Mootools 1.2 튜토리얼 Fx.Morph, Fx 옵션 및 Fx Events

Fx.Morph(기본적으로 여러 스타일시트 속성을 동시에 그라데이션할 수 있음)를 사용하는 방법을 배운 다음 Fx.Tween 및 Fx.Morph에 적용되는 Fx 옵션 중 일부를 살펴보고 마지막으로 "onComplete" 및 "onStart"와 같은 Fx 이벤트를 사용하는 방법을 살펴보겠습니다. 이러한 옵션과 이벤트를 통해 모양 애니메이션을 더 효과적으로 제어할 수 있습니다.
Fx.Morph
새 Fx.Morph 만들기
새 모프를 초기화하는 것은 여러 스타일 속성을 지정한다는 점을 제외하면 새 그라디언트를 만드는 것과 유사합니다.
참조 코드:

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

 
// 먼저 , 요소는 변수에 할당됩니다. 
var morphElement = $('morph_element') 
// 이제 새 모프를 만듭니다. 
var morphObject = new Fx.Morph(morphElement) 
/ / 이제 Fx.Tween과 마찬가지로 스타일 속성을 설정할 수 있습니다
// 하지만 여기서는 여러 스타일 속성을 설정할 수 있습니다
morphObject.set({ 
'width': 100, 
'height ': 100, 
'ground-color': '#eeeeee' 
}); 
// 그라데이션처럼 변형을 시작할 수도 있습니다 
// 여기서는 여러 속성 값을 배치해야 합니다. ​​동시에 
morphObject.start({ 
'너비': 300, 
'높이': 300, 
'배경색': '#d3715c' 
}) ; 

변환을 생성하고 설정하고 시작하는 것이 전부입니다.
이를 보다 합리적으로 만들려면 변수를 만들고, 함수를 분리하고, 이를 제어하기 위한 일부 이벤트를 만들어야 합니다.
참조 코드:

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

 
var morphSet = function(){ 
// 여기서 Fx.Tween 속성과 같은 스타일을 설정할 수 있습니다 
 // 하지만 여기서는 동시에 여러 스타일 속성을 설정할 수 있습니다. 
this.set({ 
'width': 100, 
'height': 100, 
'Background-color ': ' #eeeeee' 
}); 
} 
var morphStart = function(){ 
// 그라데이션처럼 변형을 시작할 수도 있습니다 
// 이제 여러 스타일 속성을 사용할 수 있습니다. 동시에 설정 
this.start({ 
'너비': 300, 
'높이': 300, 
'배경색': '#d3715c' 
} ); 
} 
var morphReset = function(){ 
// 초기값으로 설정 
this.set({ 
'width': 0, 
'height' : 0, 
'ground-color': '#ffffff' 
}); 
} 
window.addEvent('domready', function() { 
// 먼저 요소가 할당됩니다. 변수에 
var morphElement = $('morph_element'); 
// 이제 모프를 만듭니다. 
var morphObject = new Fx.Morph(morphElement)// 여기에 이벤트를 버튼에 클릭 
//하고 morphObject를 이 함수에 바인딩 
//하면 위 함수에서 "this"를 사용할 수 있습니다 
$('morph_set').addEvent('click ', morphSet .bind(morphObject)); 
$('morph_start').addEvent('click', morphStart.bind(morphObject)) 
$('morph_reset').addEvent('click', morphReset.bind (morphObject)) 
}); 

 

참조 코드:

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

SetStartreset

Fx 옵션 )
아래 옵션은 Fx.Tween 및 Fx.Morph에서 모두 허용됩니다. 둘 다 구현하기가 매우 쉽고 효과를 다양하게 제어할 수 있습니다. 이러한 옵션을 사용하려면 다음 구문을 사용하십시오.
참조 코드:

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

// 그래디언트 또는 모프 만들기

// 그런 다음 중괄호 사이에 옵션을 설정합니다. { }
var morphObject = new Fx.Morph(morphElement, { 
// 첫 번째는 옵션 이름 
// 뒤에 콜론(:) 
//을 입력하고 옵션을 정의합니다. 
duration: 'long', 
transition: 'sine:in' 
} ) ; 

 
fps(초당 프레임) 

이 옵션은 이 애니메이션의 초당 프레임 수를 결정합니다. 기본값은 50이며 숫자와 숫자 값이 있는 변수를 허용합니다.
참조 코드:

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

 
// 그래디언트 또는 모프 만들기 
// 그런 다음 중괄호 사이에 옵션을 설정합니다. { } 
var morphObject = new Fx.Morph(morphElement, { 
fps: 60 
 });// 또는 이렇게 
varframePerSecond = 60; 
var tweenObject = new Fx.Tween(tweenElement, { 
fps:framePerSecond 
}); > 
unit(단위) 
숫자의 단위를 설정하는 옵션입니다. 예를 들어 100이란 100픽셀(px), 백분율 또는 em을 의미합니까? 

참조 코드:

코드 복사 코드는 다음과 같습니다. // 생성 그라데이션 또는 morph

// 그런 다음 중괄호 사이에 옵션을 설정합니다. { }

var morphObject = new Fx.Morph(morphElement, { 
unit: '%' 
}) 
 
 
link 
link 옵션은 효과를 실행하는 여러 함수 호출을 관리하는 방법을 제공합니다. 예를 들어 마우스 오버 효과가 있는 경우 사용자가 이동할 때마다 이 효과가 활성화되기를 원하십니까? 아니면 사용자가 마우스를 두 번 이동하는 경우 두 번째 응답을 무시해야 합니까, 아니면 효과를 두 번째 호출하기 전에 연결하고 첫 번째 호출이 완료될 때까지 기다려야 합니까? 링크에는 세 가지 설정이 있습니다. 

"무시"(기본값) - 효과가 완료되기 전에 새 효과를 시작하기 위한 모든 호출을 무시합니다.
"취소" - 호출된 다른 효과가 있는 경우 현재 효과를 포기하고 핸들을 돌립니다. 새로운 효과 호출
"체인" - 체인을 사용하면 "체인"과 같은 효과를 연결하고 이러한 호출을 스택한 다음 완료될 때까지 이러한 효과를 하나씩 호출할 수 있습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. // 그라데이션 또는 변환 만들기

// 그런 다음 사이의 옵션을 설정합니다. 중괄호 { }

var morphObject = new Fx.Morph(morphElement, { 
link: 'chain' 
}) 

 
duration(기간) 
duration은 허용됩니다. 이 애니메이션의 지속 시간을 정의할 수 있습니다. 연속적인 이벤트와 속도는 동일하지 않으므로 개체가 1초에 100픽셀을 움직이기를 원한다면 초당 1000픽셀을 움직이는 개체보다 느릴 것입니다. 숫자(밀리초 단위), 값이 숫자인 변수 또는 세 가지 단축키를 입력할 수 있습니다. 

"short"=250ms
"normal"=500ms(기본값)
"long"= 1000ms
참조 코드:

코드 복사 코드는 다음과 같습니다. // 만들기 그라데이션 또는 모프

// 그런 다음 중괄호 사이에 옵션을 설정합니다. { }

var morphObject = new Fx.Morph(morphElement, { 
duration: 'long' 
}); 또는 이렇게 
var morphObject = new Fx.Morph(morphElement, { 
duration: 1000 
}) 

 
transition(전환 효과) 
마지막 옵션 : 전환을 사용하면 전환 유형을 결정할 수 있습니다. 예를 들어 전환이 원활해야 하는지 아니면 천천히 시작했다가 끝까지 속도를 높여야 하는지 등이 있습니다. MooTools의 핵심 라이브러리에서 사용할 수 있는 전환 효과를 살펴보세요. 
참조 코드: 

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: var tweenObject = new Fx.Tween(tweenElement, { transition: 'quad:in'

})

 
참고: 첫 번째 전환 막대는 처음에는 눈길을 끄는 빨간색 효과를, 끝에서는 눈길을 끄는 주황색 효과를 트리거합니다. 아래에서 Fx 이벤트를 사용하는 방법을 확인하세요. 
위의 30가지 전환 유형은 10개의 그룹으로 나눌 수 있습니다. 
Quad 

Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
각 그룹에는 세 가지 옵션이 있습니다.
Ease In
Ease Out
Ease In Out
Fx 이벤트
Fx 이벤트를 사용하면 프로세스 중에 애니메이션 효과를 실행할 수 있습니다. , 일부 코드는 다른 지점에서 실행됩니다. 이는 사용자 피드백을 생성할 때 유용할 수 있으며 그라데이션 및 변형에 대한 또 다른 제어 계층을 제공합니다.
onStart - Fx가 시작될 때 실행됩니다.
onCancel - Fx가 취소될 때 실행됩니다. Trigger
onComplete - Fx가 완료되면 트리거됨
onChainComplete - Fx 체인이 완료되면 트리거됨
그라디언트 또는 변형을 생성할 때 하나 또는 여러 옵션을 설정하는 것처럼 이러한 이벤트 중 하나를 설정할 수 있지만 대신 값을 설정하면 기능이 설정됩니다.
참조 코드:

코드 복사

코드는 다음과 같습니다.

 
// 먼저 새 Fx.Tween을 변수에 할당합니다 
// 그런 다음 그라데이션하려는 요소를 정의합니다 
quadIn = new Fx.Tween(quadIn, { 
/ / 다음은 몇 가지 옵션입니다
link: 'cancel', 
transition: 'quad:in', 
// 여기에 몇 가지 이벤트가 있습니다
onStart: function(passes_tween_element){ 
// 이러한 이벤트 모두 그라데이션 객체를 전달합니다 
// 애니메이션이 시작되면 
// 여기서 "강조 표시" 효과를 호출합니다 
passes_tween_element.highlight('#C54641') 
}, 
 / / 이 쉼표는 각 이벤트와 옵션 사이에 항상 표시됩니다 
// 마지막 이벤트나 옵션 다음에는 표시되지 않습니다 
onComplete: function(passes_tween_element){ 
// 마지막에 또 다른 하이라이트 효과를 적용해 보겠습니다 
passes_tween_element.highlight('#C54641'); 
} 
}); 

예
위 변환 코드를 생성하려면 이 튜토리얼 시리즈에서는 본 적이 없는 방식으로 작동합니다. 위의 모든 변형 요소는 두 가지 기능을 사용합니다. 하나는 마우스가 들어갈 때 점차적으로 페이드 아웃되고 다른 하나는 마우스가 떠날 때 점차적으로 페이드 아웃됩니다.
참조 코드:

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

 
// 마우스가 입력되었을 때 호출하는 함수입니다
// 너비 그라데이션은 700px입니다
var enterFunction = function() { 
this.start('width', '700px'); 
} 
// 마우스가 떠날 때 호출하는 함수입니다. 
// 너비 점차적으로 300px로 돌아갑니다. 
var LeaveFunction = function() { 
this.start('width', '300px') 
} 
window.addEvent('domready', function() { 
// 여기서는 일부 요소를 변수에 할당합니다. 
varquadIn = $('quadin') 
varquadOut = $('quadout') 
varquadInOut = $('quadinout') ; 
 // 그런 다음 위의 세 변수에 해당하는 세 개의 그래디언트 요소를 생성합니다 
// 
quadIn = new Fx.Tween(quadIn, { 
link: 'cancel', 
transition: Fx.Transitions.Quad.easeIn, 
onStart: function(passes_tween_element){ 
passes_tween_element.highlight('#C54641') 
}, 
onComplete: function(passes_tween_element){ 
passes_tween_element .highlight ('#E67F0E'); 
} 
}); 
quadOut = new Fx.Tween(quadOut, { 
link: 'cancel', 
transition: 'quad:out ' 
}) 
quadInOut = new Fx.Tween(quadInOut, { 
link: 'cancel', 
transition: 'quad:in:out' 
}); // 이제 마우스 입력 및 마우스 떠나기 이벤트를 추가합니다
// .addEvents 사용에 유의하세요
// .addEvent
 사용과 유사합니다. 하지만 다음을 통해 여러 이벤트를 추가할 수 있습니다. mode
 $('quadin').addEvents({ 
// 먼저 어떤 이벤트인지 지정하고 이벤트를 작은따옴표로 묶어야 합니다. 
// 그 뒤에 콜론(:)을 붙여야 합니다. 
// 마지막으로 함수 배치 
 // 이 예에서 함수는 그래디언트 객체에 연결됩니다. 
'mouseenter': enterFunction.bind(quadIn), 
'mouseleave': LeaveFunction.bind (quadIn) 
}) 
$('quadout').addEvents({ 
// 여기서 이 함수를 어떻게 재사용하는지 주목하세요 
'mouseenter': enterFunction.bind(quadOut), 
' mouseleave': LeaveFunction.bind(quadOut) 
}); 
$('quadinout').addEvents({ 
// 여기서도 동일한 기능을 사용합니다 
// 하지만 매번 우리는 모두 다양한 요소에 이벤트를 적용하고 
// 다양한 그라데이션을 바인딩합니다 
'mouseenter': enterFunction.bind(quadInOut), 
'mouseleave': LeaveFunction.bind(quadInOut) 
 }); 