Mootools 1.2 チュートリアル: 複数の変形アニメーションを同時に実行する

Mootools 1.2 チュートリアル: 複数の変形アニメーションを同時に実行する_Mootools

WBOY

リリース： 2016-05-16 18:46:25

オリジナル

1106 人が閲覧しました

これは、同じ変換オプションを使用して複数の要素をアニメーション化する場合に便利です。講義 20 で見た最後の例と同じです。
基本的な使い方
Fx.Elementsの使い方はFx.Morphと似ています。 2 つの違いは、.start({}) メソッドと .set({}) メソッドです。
物事を簡単にするために、まず Fx.Elements に渡す要素の配列を作成しましょう。
リファレンスコード: [コードをコピー] [コードを保存]
var fxElementsArray = $$('.myElementClass');
これで、配列を Fx.Elements オブジェクトに渡すことができます。
参照コード:

コードをコピーコードは次のとおりです:

 
var fxElementsObject = new Fx.Elements(fxElementsArray, { 
// Fx オプション
link: 'chain', 
duration: 1000, 
transition: 'sine:in:out', 
// Fx events
onStart: function(){ 
startInd.highlight('#C3E608'); 
} 
}); Fx.Morph、Fx.Elements のようにextends Fx クラスを使用すると、Fx のすべてのオプションとイベントを使用できます。 
.start({}) メソッドと .set({}) メソッド 

Fx.Elements エフェクトを開始したり、Fx.Elements を使用してスタイルを設定したりするには、Fx.Tween と .set({}) メソッドを使用する場合と同じように行うことができます。 Fx.Morph ただし、設定を Fx.Elements オブジェクトに直接適用する代わりに、対応する要素はインデックスによって参照されます (最初の要素は 0、2 番目の要素は 1 など)。
参照コード:

コードをコピーコードは次のとおりです: // を使用できます。 set({ ...}) スタイルを設定するには

fxElementsObject .set({

'0': { 
'height': 10, 
'width': 10, 
'背景色' : '#333' 
}, 
'1': { 
'width': 10, 
'border': '1px 破線 #333' 
} 
}); 
// または .start({...}) を使用してグラデーション アニメーションを作成します 
fxElementsObject .start({ 
'0': { 
'height': [50 , 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200 ], 
' border': '5px 破線 #333' 
} 
}); 

 
Fx.Morph と同様に、任意の開始値と終了値を設定できます。要素のグラデーション アニメーションでは、パラメータを 1 つだけ設定することもできます (上記の幅の値のみを設定したのと同じように)。その場合、要素は現在の値から新しいパラメータで指定された値に変更されます。 
Fx.Elements については以上です。以下の例を見て、それらがどのように使用されるかを確認してください。 

コード例
ここでは 2 つの要素に Fx.Elements を使用します。いくつかの異なるタイプのグラデーションアニメーションから選択でき、一時停止ボタンを使用してアニメーションを一時停止できます。
まず、要素、通知ボタン (リセットボタン、一時停止ボタン、再開ボタンを含む)、およびこのプロセスを理解するのに役立ついくつかのインジケーターを作成しましょう。
参照コード:

コードをコピーコードは次のとおりです:

onStart

onCancel

onComplete

onChainComplete

コードをコピー

コードは次のとおりです: .ind { 幅: 200px;

パディング: 10px;

フォントの太さ: 1px 無地

.myElementClass {
高さ: 50 ピクセル;
幅: 100 ピクセル;
ボーダー: 1 ピクセル #FFFFCC; >}
# ボタン {
マージン: 20px 0;
表示:
}

以下は MooTools コードです。
参照コード:

コードをコピーコードは次のとおりです:

 
var startFXElement = function() { 
this.start({ 
'0': { 
'高さ': [50, 200], 
'幅': 50, 
'背景色': '# 87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px 破線 #333' 
} 
}) ; 
} 
var startFXElementB = function(){ 
this.start({ 
'0': { 
'幅': 500, 
'背景色': ' #333' 
}, 
'1': { 
'width': 500, 
'border': '10px ソリッド #DC1E6D' 
} 
}); >} 
var setFXElement = function(){ 
this.set({ 
'0': { 
'高さ': 50, 
'背景色': '#FFFFCC' , 
'width': 100 
}, 
'1': { 
'height': 50, 
'width': 100, 
'border': 'none' 
 } 
}); 
} 
window.addEvent('domready', function() { 
var fxElementsArray = $$('.myElementClass'); 
var startInd = $(' start_ind'); 
var cancelInd = $('complete_ind'); 
varchainCompleteInd = $('chain_complete_ind'); fxElementsObject = new Fx.Elements(fxElementsArray, { 
//Fx オプション 
link: 'chain', 
duration: 1000, 
transition: '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)); addEvent(' click', startFXElementB.bind(fxElementsObject)); 
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject)); 
$('fxpause').addEvent( 'クリック' , function(){ 
fxElementsObject.pause(); 
}); 
$('fxresume').addEvent('クリック', function(){ 
fxElementsObject.resume( );
})
});

さらに詳しく