Mootools 1.2 튜토리얼 Fx.Tween_Mootools 사용법-JS 튜토리얼-php.cn

자세히 알아보기…

집

웹 프론트엔드

JS 튜토리얼

Mootools 1.2 튜토리얼 Fx.Tween_Mootools 사용법

May 16, 2016 pm 06:46 PM

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

참조 코드:

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

<button id="tween_button">300 너비</button> 

.fade();

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

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

// 새 함수 만들기

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

 
참조 코드: 

코드 복사

<button id="tween_fade_fifty">불투명도 50%로 페이드</button> 
 .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) ; 
 }); 

참조 코드:

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

 
<div id="tweener"></div> 
<div id="tweenerChange"></div> 

빠른 방법 예
다음은 효과에 대한 단축키 방법의 몇 가지 온라인 예입니다. 이 버튼을 다른 순서로 클릭하면 어떻게 변경되는지 확인할 수 있습니다.
참조 코드:

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

 
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) 
}); 

 

참조 코드:

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

<div id="tweener"></div><br />
<button id="tween_button">300 너비

참조 코드:

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

#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) 
}) 

참조 코드:

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

 
<!-- 여기가 우리가 신청하고 싶은 곳입니다 그라디언트 효과 요소--> 
<div id="newTween"></div> 
<!-- 그라디언트 효과를 시작하는 버튼입니다--
 <button id= "netTween_set">Set</div> 

그라디언트를 통한 스타일 지정
요소에서 새 그라디언트를 생성한 후에는 .set를 통해 쉽게 설정할 수 있습니다. () 메소드 스타일 속성. 이는 .setStyle() 메서드와 동일합니다.
참조 코드:

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

 
var newTweenSet = function() { 
// "this" 사용에 주의하세요 
// "this" 사용 방법 알아보기 
this.set('width', '300px') 
} 

이전에 배운 것처럼 함수를 domready 이벤트와 분리하고 싶지만 이 예에서는 domready 이벤트에 그라데이션을 만든 다음 이를 외부에서 참조하려고 합니다. 우리는 이미 domready 외부에서 매개변수를 전달하는 방법(익명 함수를 생성하고 인수 전달)을 마스터했습니다. 오늘 우리는 Moo와 유사하고 그래디언트 객체를 전달하는 더 나은 방법을 배울 것입니다(이것은 더 이상 익명 함수에 관한 것이 아닙니다. 언제든지 적절합니다).
.bind();
.bind();를 통해 매개변수와 동일한 함수에서 "this"를 만들 수 있습니다.
참조 코드:

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

 
// 먼저 위에서 본 버튼에 클릭 이벤트를 추가합니다
// 그런 다음, 아니요 그냥 이 함수를 호출하세요 
// 이 함수를 호출하고 ".bind()"를 추가합니다 
// 그런 다음 함수에 전달하려는 모든 내용을 바꿉니다 
// 이제 이 "newTweenSet"에서 함수 내에서 "this"는 "newTween"을 가리킵니다. 
$('netTween_set').addEvent('click', newTweenSet.bind(newTween)) 

이제 살펴보겠습니다. 위의 함수를 보면 "this"는 이제 "newTween"(트윈 객체)과 동일합니다.
이제 이것들을 모아서 살펴보겠습니다.
참조 코드:

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

 
// 함수는 다음과 같습니다. 
var newTweenSet = function() { 
// 바인드를 사용했기 때문에 이제 "this"는 "newTween"을 가리킵니다 
/ / 따라서 여기서는 다음과 같습니다. 
// newTween.set('width', '300px') 
this.set('width', '300px') 
} 
window. addEvent('domready', function() { 
// 먼저 요소를 변수에 할당 
var newTweenElement = $('newTween'); 
// 그런 다음 새 FX.Tween을 생성합니다. 변수에 할당 
var newTween = new Fx.Tween(newTweenElement); 
// 이제 이벤트를 추가하고 newTween 및 newTweenSet을 바인딩합니다. 
$('netTween_set').addEvent('click ', newTweenSet .bind(newTween)); 
}); 

그라디언트 효과 시작
이제 모든 그라디언트 객체를 설정했으므로 함수가 준비되었습니다. 또한 .set() 메서드를 통해 스타일 시트 속성을 설정하는 방법도 배웠습니다. 실제 그래디언트를 살펴보겠습니다. 그라디언트 시작은 매우 간단하며 .fade();와 매우 유사합니다. .start() 메서드를 사용하는 방법에는 두 가지가 있습니다.
속성 값을 현재 값에서 다른 값으로 변경합니다.
하나를 설정합니다. 첫 번째 속성 값을 선택한 후 다른 값으로 변경
참조 코드:

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

 
// 너비(width)가 현재 기존 값에서 300px로 변경됩니다. 
newTween.start('width', '300px') 
// 너비가 설정됩니다. (너비) 먼저 100px로 변경한 다음 300px로 변경합니다. 
newTween.start('width', '100px', '300px') 

이제 함수 내에서 .start(); 메서드를 사용하여 이 그라디언트를 시작할 수 있습니다. .bind() 메서드를 사용하여 함수에 "newTween"을 바인딩하면 "this"를 사용할 수 있습니다.
지금까지 그래디언트(트윈)는 여기까지입니다…
하지만 그래디언트 효과에 대해서는 아직 할 말이 많습니다. 예를 들어, 여러 스타일시트 속성을 한 번에 "그라데이션"하려면 .morph() 메서드를 사용할 수 있습니다. 전환 라이브러리를 사용하여 전환을 변경할 수도 있습니다. 하지만 이 튜토리얼은 이미 충분히 길기 때문에 나중에 저장하겠습니다.