Mootools 1.2 튜토리얼 Fx.Tween_Mootools 사용법
우리가 본 다른 MooTools 기능과 마찬가지로 이 방법도 사용하기 매우 간단하지만 매우 강력합니다. Tween을 사용하면 매우 "눈부신" 효과를 추가할 수 있습니다. 변형 애니메이션이 원활하게 발생하여 사용자 경험이 향상됩니다.
트윈 단축키
우리는 일반적으로 "기본 지식"부터 시작하지만 MooTools 1.2는 그라디언트(트윈)에 대한 뛰어난 단축키만 제공합니다. 모두 사용이 너무 간단해서 여기서 시작하지 않을 수 없습니다.
.tween();
트윈은 두 스타일 속성 값 사이를 원활하게 변경하는 것입니다. 예를 들어 그라데이션(트윈)을 사용하면 div의 너비를 100픽셀에서 300픽셀로 부드럽게 변경할 수 있습니다.
참조 코드:
// 새 함수 만들기
var tweenerFunction = function() {
// 그래디언트를 사용하려는 요소를 선택합니다
// 그런 다음 .tween을 추가합니다
// 마지막으로 변경하려는 속성과 값을 선언합니다
$( 'tweener').tween('width', '300px');
}
window.addEvent('domready', function() {
// 여기에서 버튼에 이벤트를 추가하세요.
//클릭 시 이 그라디언트를 초기화합니다
// 그라디언트 함수
$('tween_button').addEvent('click', tweenerFunction)
}); >
위 코드에 해당하는 HTML 코드는 다음과 같을 것입니다.
.fade();
참조 코드:
// 여기에서 선택기를 만듭니다.
// 그런 다음 .fade를 추가합니다.
// 마지막으로 0 사이의 값을 선언합니다. 및 1 사이의 값(0은 표시되지 않음, 1은 완전히 표시됨)
$('tweener').fade('.5')
}
window.addEvent('domready', function( ) {
// 여기 버튼에 이벤트를 추가하세요
// 클릭 시 이 그라데이션을 초기화하세요
// 그리고 그라데이션 함수를 호출하세요
$('tween_fade_fifty').addEvent('click', tweenFadeFifty)
});
참조 코드:
.highlight();
Highlight는 두 가지 기능을 제공하는 매우 구체적이고 매우 유용한 그라데이션 단축키입니다.
다른 배경색으로 부드럽게 변경하는 데 사용합니다.
사용자 피드백을 생성할 때 매우 유용합니다. 예를 들어, 요소를 선택할 때 깜박이게 하거나 색상을 변경한 다음 저장하거나 닫을 때 다시 깜박이게 할 수 있습니다. 옵션이 너무 많고 사용하기가 너무 쉽습니다. 이 예에서는 두 개의 div를 만든 다음 두 가지 유형의 강조 표시 방법을 추가해 보겠습니다.
참조 코드:
코드 복사
// 함수 만들기
var tweenHighlight = function(event) {
// 여기서는 이 함수에서 전달된 매개 변수인 event.target을 사용합니다.
// 이는 " 트리거된 이벤트의 대상(소스)"
// 이 효과는 이벤트를 트리거한 요소에 적용되므로
// 선택기를 만들 필요가 없습니다
// 참고: addEvent will 이벤트 개체가 이 호출 함수에 매개변수로 자동으로 전달됩니다.
//... 매우 편리합니다.
event.target.highlight('#eaea16')
}
// 생성 함수
// 매개변수를 전달해야 합니다
// 이 함수는 이벤트(이벤트)에서 호출되므로
// 이 함수는 자동으로 이벤트 개체를 전달합니다
// 그러면 you 이 요소는 .target
// (이벤트의 대상 요소)
var tweenHighlightChange = function(item) {
// 여기서는 색상을 사용하지 않고 쉼표를 추가합니다. 두 번째
// 첫 번째 색상을 설정한 다음 두 번째 색상으로 변경합니다.
item.target.highlight('#eaea16', '#333333')
}
window.addEvent ('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange) ;
});
참조 코드:
빠른 방법 예
다음은 효과에 대한 단축키 방법의 몇 가지 온라인 예입니다. 이 버튼을 다른 순서로 클릭하면 어떻게 변경되는지 확인할 수 있습니다.
참조 코드:
var tweenerFunction = function() {
$('tweener').tween('width', '300px')
}
var tweenerGoBack = function ( ) {
$('tweener').tween('width', '100px');
}
// .fade는 'out' 및 'in'을 매개변수로 허용할 수도 있습니다. 0과 1에 해당
var tweenFadeOut = function() {
$('tweener').fade('out')
}
var tweenFadeFifty = function() {
$ ('tweener').fade('.5');
}
var tweenFadeIn = function() {
$('tweener').fade('in')
} 🎜>var tweenHighlight = function(event) {
event.target.highlight('#eaea16')
}
window.addEvent('domready', function() {
$(' tween_button') .addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack)
$('tween_fade_out').addEvent('click', tweenFadeOut) ;
$('tween_fade_fifty').addEvent('click', tweenFadeFifty)
$('tween_fade_in').addEvent('click', tweenFadeIn)
$('tweener').addEvent ('mouseover',tweenHighlight)
});
높이: 100px
너비 : 100px
background- color: #3399CC
}
너비 300
너비 100
페이드 아웃
불투명도 50%로 페이드
페이드 인
추가 그라디언트(트윈)
새 그라디언트 만들기
자세한 내용 변형 효과에 대한 유연성과 제어력을 확보하려면 해당 단축키를 대체할 새로운 모양 애니메이션을 만들고 싶을 수도 있습니다. Fx.Tween의 새 인스턴스를 생성하려면 "new"를 사용하십시오.
참조 코드:
window.addEvent('domready', function() {
// 먼저 변경할 요소를 변수에 할당합니다.
var newTweenElement = $('newTween');
// 이제 애니메이션 이벤트를 생성하고 이 요소를 매개변수로 전달합니다.
var newTween = new Fx.Tween(newTweenElement)
})
참조 코드:
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7625
15
1389
52
89
11
70
19
31
138
프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까?
Apr 04, 2025 pm 02:42 PM
프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...
누가 더 많은 파이썬이나 자바 스크립트를 지불합니까?
Apr 04, 2025 am 12:09 AM
기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.
Demystifying JavaScript : 그것이하는 일과 중요한 이유
Apr 09, 2025 am 12:07 AM
JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.
JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까?
Apr 04, 2025 pm 05:09 PM
동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...
Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까?
Apr 04, 2025 pm 05:36 PM
이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.
Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까?
Apr 04, 2025 pm 05:12 PM
Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...
JavaScript는 배우기가 어렵습니까?
Apr 03, 2025 am 12:20 AM
JavaScript를 배우는 것은 어렵지 않지만 어려운 일입니다. 1) 변수, 데이터 유형, 기능 등과 같은 기본 개념을 이해합니다. 2) 마스터 비동기 프로그래밍 및 이벤트 루프를 통해이를 구현하십시오. 3) DOM 운영을 사용하고 비동기 요청을 처리합니다. 4) 일반적인 실수를 피하고 디버깅 기술을 사용하십시오. 5) 성능을 최적화하고 모범 사례를 따르십시오.
프론트 엔드 개발에서 VSCODE와 유사한 패널 드래그 앤 드롭 조정 기능을 구현하는 방법은 무엇입니까?
Apr 04, 2025 pm 02:06 PM
프론트 엔드에서 VSCODE와 같은 패널 드래그 앤 드롭 조정 기능의 구현을 탐색하십시오. 프론트 엔드 개발에서 VSCODE와 같은 구현 방법 ...
