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 코드는 다음과 같을 것입니다.

참조 코드:

코드 복사 코드는 다음과 같습니다.

300 너비


.fade();

이 방법을 사용하면 요소의 불투명도를 부드럽게 조정할 수 있습니다. 위의 예와 거의 똑같습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다.

// 새 함수 만들기

var tweenFadeFifty = function() {
// 여기에서 선택기를 만듭니다.
// 그런 다음 .fade를 추가합니다.
// 마지막으로 0 사이의 값을 선언합니다. 및 1 사이의 값(0은 표시되지 않음, 1은 완전히 표시됨)
$('tweener').fade('.5')
}
window.addEvent('domready', function( ) {
// 여기 버튼에 이벤트를 추가하세요
// 클릭 시 이 그라데이션을 초기화하세요
// 그리고 그라데이션 함수를 호출하세요
$('tween_fade_fifty').addEvent('click', tweenFadeFifty)
});


참조 코드:

코드 복사

불투명도 50%로 페이드
.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)
});

참조 코드:

코드 복사 코드는 다음과 같습니다.

300 너비
100 너비
페이드 아웃
페이드 인

참조 코드:

코드 복사 코드는 다음과 같습니다.

#tweener {
높이: 100px
너비 : 100px
background- color: #3399CC
}

마우스를 위로 올리면 눈길을 끄는 첫 번째 효과를 볼 수 있습니다.
너비 300
너비 100
페이드 아웃
불투명도 50%로 페이드
페이드 인
추가 그라디언트(트윈)
새 그라디언트 만들기
자세한 내용 변형 효과에 대한 유연성과 제어력을 확보하려면 해당 단축키를 대체할 새로운 모양 애니메이션을 만들고 싶을 수도 있습니다. Fx.Tween의 새 인스턴스를 생성하려면 "new"를 사용하십시오.
참조 코드:

코드 복사 코드는 다음과 같습니다.

window.addEvent('domready', function() {
// 먼저 변경할 요소를 변수에 할당합니다.
var newTweenElement = $('newTween');
// 이제 애니메이션 이벤트를 생성하고 이 요소를 매개변수로 전달합니다.
var newTween = new Fx.Tween(newTweenElement)
})

참조 코드:

코드 복사 코드는 다음과 같습니다.