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

これは、同じ変換オプションを使用して複数の要素をアニメーション化する場合に便利です。講義 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

A を開始
B を開始
リセット
一時停止
再開
🎜>

要素 0

要素 1

私たちの CSS コードは次のとおりです。こちらも非常に簡単です
リファレンス コード:

コードをコピー

コードは次のとおりです: .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( );
})
});
さらに詳しく

ご覧のとおり、Fx.Elements は非常にシンプルです。さらに詳しく学ぶには、

Fx.Elements ドキュメント

、

Fx.Morph ドキュメント

、および をよく読んでください。 Fx ドキュメント。 また、Fx.Morph、Fx オプションとイベントに関するチュートリアルも必ずお読みください。

最後の例のコードをダウンロードします

開始するために必要なものもすべて含まれています。