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

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

참조 코드:

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

Set 시작
reset


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

자세히 알아보기…

Fx 라이브러리의 도구를 통해 효과를 더욱 세부적으로 제어할 수 있습니다. 설명서의

Fx 섹션과 tween, morph 및 전환.

시작하는 데 필요한 내용이 포함된 zip 패키지를 다운로드하세요.

이 페이지의 예제, MooTools 1.2 핵심 라이브러리, 외부 JavaScript 파일, 외부 CSS 파일 또는 간단한 html 파일을 포함하세요.