Mootools 1.2 튜토리얼: 동시에 여러 변형 애니메이션 수행_Mootools

이는 동일한 변환 옵션을 사용하여 여러 요소에 애니메이션을 적용할 때 유용합니다. 강의 20에서 본 마지막 예와 같습니다.
기본 사용법
Fx.Elements를 사용하는 방법은 Fx.Morph와 유사합니다. 둘의 차이점은 .start({}) 메서드와 .set({}) 메서드입니다.
간단하게 하기 위해 먼저 Fx.Elements에 전달할 요소 배열을 만들어 보겠습니다.
참조 코드: [코드 복사] [코드 저장]
var fxElementsArray = $$('.myElementClass')
이제 배열을 Fx.Elements 개체에 전달할 수 있습니다.
참조 코드:

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

var fxElementsObject = new Fx.Elements(fxElementsArray, {
// Fx 옵션
링크: '체인',
기간: 1000,
전환: 'sine:in:out',
// Fx events
onStart: function(){
startInd.highlight('#C3E608');
}
})

Fx.Morph, Fx.Elements와 같습니다. 확장 Fx 클래스를 사용하면 Fx의 모든 옵션과 이벤트를 사용할 수 있습니다.
.start({}) 및 .set({}) 메서드
Fx.Elements 효과를 시작하거나 Fx.Elements를 사용하여 스타일을 설정하려면 Fx.Tween 및 Fx.Elements에서와 동일한 작업을 수행할 수 있습니다. Fx.Morph, 그러나 설정을 Fx.Elements 개체에 직접 적용하는 대신 해당 요소는 인덱스로 참조됩니다. 첫 번째 요소는 0이고 두 번째 요소는 1입니다.
참조 코드:

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

// 을 사용할 수 있습니다. set({ ...}) 스타일을 설정하려면
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
' background-color' : '#333'
},
'1': {
'너비': 10,
'테두리': '1px 점선 #333'
}
});// 또는 .start({...})를 사용하여 그라데이션 애니메이션을 만듭니다.
fxElementsObject .start({
'0': {
'height': [50 , 200],
'너비': 50,
'배경색': '#87AEE1'
},
'1': {
'너비': [100, 200 ],
' border': '5px dashed #333'
}
})

Fx.Morph와 마찬가지로 시작 값과 종료 값을 설정할 수 있습니다. 요소의 그래디언트 애니메이션에 대해 하나의 매개변수만 설정할 수도 있습니다(위의 너비에 대한 값만 설정한 것처럼). 그러면 요소가 현재 값에서 새 매개변수에 의해 지정된 값으로 변경됩니다.
Fx.Elements에 관한 모든 것입니다. 아래 예제를 보고 어떻게 사용되는지 살펴보세요.
예제 코드
여기에서는 두 요소에 Fx.Elements를 사용합니다. 선택할 수 있는 다양한 유형의 그라데이션 애니메이션이 있으며 일시 중지 버튼을 사용하면 애니메이션을 일시 중지할 수 있습니다.
먼저 이 프로세스를 이해하는 데 도움이 되는 요소, 가능한 알림 버튼(재설정 버튼, 일시 정지 버튼, 재개 버튼 포함) 및 일부 표시기를 만들어 보겠습니다.
참조 코드:

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

onStart

onCancel

onComplete

onChainComplete

< ;button id="fxstart">A 시작
B 시작
재설정
일시중지
재개 🎜>< ;div class="myElementClass">요소 0

요소 1

CSS 코드는 다음과 같습니다. 또한 매우 간단합니다
참조 코드:

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

너비: 200px;

배경색: #87AEE1;
글꼴-바닥: 1px 단색 흰색; }
.myElementClass {
높이: 50px;
너비: 100px;
배경색: #FFFFCC;
테두리: 1px #FFFFCC; >}
# 버튼 {
여백: 20px 0
디스플레이: 블록
}


아래는 MooTools 코드입니다.
참조 코드:

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

var startFXElement = function() {
this.start({
'0': {
'높이': [50, 200],
'너비': 50,
'배경색': '# 87AEE1'
},
'1': {
'너비': [100, 200],
'테두리': '5px 점선 #333'
}
}) ;
}
var startFXElementB = function(){
this.start({
'0': {
'너비': 500,
'배경색': ' #333'
},
'1': {
'너비': 500,
'테두리': '10px solid #DC1E6D'
}
}); >}
var setFXElement = function(){
this.set({
'0': {
'높이': 50,
'배경색': '#FFFFCC' ,
'너비': 100
},
'1': {
'높이': 50,
'너비': 100,
'테두리': '없음'
}
})
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $(' start_ind');
var cancelInd = $('cancel_ind');
var CompleteInd = $('complete_ind')
var chainCompleteInd = $('chain_complete_ind'); fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx 옵션
링크: '체인',
기간: 1000,
전환: 'sine:in:out',
/ /Fx 이벤트
onStart: function(){
startInd.highlight('#C3E608')
},
onCancel: function(){
cancelInd.highlight('#C3E608' );
},
onComplete: function(){
completeInd.highlight('#C3E608')
},
onChainComplete: function(){
chainCompleteInd.highlight( '#C3E608');
}
});
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject))
$('fxstartB'). addEvent(' 클릭', startFXElementB.bind(fxElementsObject))
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject))
$('fxpause').addEvent( '클릭' , function(){
fxElementsObject.pause();
})
$('fxresume').addEvent('click', function(){
fxElementsObject.resume( );
});
});
자세히 알아보기

보시다시피 Fx.Elements는 매우 간단합니다. 더 자세히 알아보려면

Fx.Elements 문서

,

Fx.Morph 문서 및 를 주의 깊게 읽어보세요. Fx 문서. 또한 Fx.Morph 및 Fx 옵션과 이벤트에 대한 튜토리얼

을 꼭 읽어보세요.

마지막 예시 코드 다운로드

또한 시작하는 데 필요한 모든 것이 포함되어 있습니다.