Mootools 1.2 チュートリアル Fx.Tween_Mootools の使用方法-jsチュートリアル-php.cn

これまで見てきた他の MooTools 機能と同様、これらのメソッドは使い方が非常に簡単ですが、非常に強力です。 Tween を使用すると、非常に「まばゆい」効果を追加できます。変形アニメーションをスムーズに実行できるため、ユーザーエクスペリエンスが向上します。
トゥイーンのショートカット
通常は「基礎知識」から始めますが、MooTools 1.2 には、グラデーション (トゥイーン) に関する優れたショートカットしか用意されていないため、ここから始めずにはいられません。
.tween();
トゥイーンは、2 つのスタイルプロパティ値の間のスムーズな変更です。たとえば、グラデーション (トゥイーン) を使用すると、div の幅を 100 ピクセルから 300 ピクセルにスムーズに変更できます。
参照コード:

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

 
// 新しい関数を作成します
var tweenerFunction = function() { 
// グラデーションを使用する要素を選択します 
// 次に .tween を追加します 
// 最後に変更する属性と値を宣言します 
$( 'tweener').tween('width', '300px'); 
} 
window.addEvent('domready', function() { 
// ここのボタンにイベントを追加します
//クリックされたときにこのグラデーションを初期化します
// グラデーション関数を呼び出します 
$('tween_button').addEvent('click', 
}); > 
上記のコードに対応して、HTML コードは次のようになります。 

リファレンスコード:

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

.fade();

このメソッドを使用すると、要素の不透明度をスムーズに調整できます。これは上の例とほぼ同じです。
参照コード:

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

// 新しい関数を作成します

var tweenFadeFifty = function() { 
// ここにセレクターを作成します 
// 次に .fade を追加します 
// 最後に 0 の間の値を宣言しますと 1 の間の値 (0 は非表示、1 は完全に表示) 
$('tweener').fade('.5'); 
} 
window.addEvent('domready', function( ) { 
// ここのボタンにイベントを追加します 
// クリックされたときにこのグラデーションを初期化します 
// そして、グラデーション関数を呼び出します 
$('tween_fade_fifty').addEvent('click', tweenFadeFifty); 

 
参照コード: 

コードをコピーします次のように:

 .highlight(); 
ハイライトは、次の 2 つの機能を提供する非常に具体的な (そして非常に便利な) グラデーション ショートカットです: 
別の背景色にスムーズに変更するために使用します
別の背景色を直接設定しますその後、別の背景色にスムーズに変更します

これらは、ユーザーのフィードバックを作成するときに非常に便利です。たとえば、要素が選択されているときに要素を点滅させたり、色を変更して保存または閉じるときに再度点滅させることができます。オプションがたくさんあり、とても使いやすいです。この例では、2 つの div を作成し、2 種類のハイライトメソッドを追加します。
リファレンスコード:

コードをコピー

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

 
// 関数を作成します 
var tweenHighlight = function(event) { 
// ここでは、この関数から渡されるパラメーターであるevent.targetを使用します 
// これは、 "トリガーされたイベントのターゲット (ソース)" 
// この効果はイベントをトリガーした要素に適用されるため 
// したがって、セレクターを作成する必要はありません 
// 注: addEventイベント オブジェクトは、この呼び出し関数にパラメータとして自動的に渡されます 
//... 非常に便利 
event.target.highlight('#eaea16'); 
} 
// Create a function
// パラメータを渡す必要があります 
// この関数はイベント (event) で呼び出されるため 
// この関数は自動的にイベント オブジェクト 
// 次にこの要素は .target 
// (イベントのターゲット要素) 
var tweenHighlightChange = function(item) { 
// ここでは色を使用せず、カンマを追加します。 2 番目の 
 // これは最初の色を設定し、次に 2 番目の色に変更します 
item.target.highlight('#eaea16', '#333333'); 
} 
window.addEvent ('domready', function() { 
$('tweener').addEvent('mouseover', tweenHighlight); 
$('tweenChange').addEvent('mouseover', tweenHighlightChange) ; 
 }); 

参照コード:

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

クイックメソッド例
エフェクトのショートカット方法のオンライン例をいくつか示します。これらのボタンをさまざまな順序でクリックして、どのように変化するかを確認できます。
参照コード:

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

var tweenerFunction = function() { 
$('tweener').tween('width', '300px'); 
} 
var tweenerGoBack = function ( ) { 
$('tweener').tween('width', '100px'); 
} 
// .fade はパラメータとして 'out' と 'in' も受け入れることができます。 0 と 1 に相当します。 
var tweenFadeOut = function() { 
$('tweener').fade('out'); 
} 
var tweenFadeFifty = function() { 
$ ('tweener ').fade('.5'); 
} 
var tweenFadeIn = function() { 
$('tweener').fade('in'); 🎜>var tweenHighlight = function(event) { 
event.target.highlight('#eaea16'); 
} 
window.addEvent('domready', function() { 
$(' tween_button') .addEvent('click', tweenFadeOut); 
$('tween_reset').addEvent('click', tweenGoBack); ; 
$('tween_fade_fifty').addEvent('click', tweenFadeFifty); 
$('tween_fade_in').addEvent('click', tweenFadeIn); ('mouseover ',tweenHighlight); 


参照コード: 

コードをコピー

次のコード:

="tween_fade_fifty" >不透明度 50% にフェード

 
参照コード: 

コードをコピー

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

#tweener { height: 100px width : 100px background- color: #3399CC }

 
マウスを上に移動すると、最初のタイプの目を引く効果が表示されます。 
幅 300 
幅 100 
フェードアウト 
不透明度 50% にフェード 
フェードイン 

さらにグラデーション (トゥイーン)
新しいグラデーションを作成
もっと見る変形効果を柔軟に制御できるようにするには、新しいシェイプアニメーションを作成してこれらのショートカットを置き換えることをお勧めします。 Fx.Tween の新しいインスタンスを作成するために "new" を使用していることに注意してください:
参照コード:

コードをコピー

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

 
window.addEvent('domready', function() { 
// まず、変更する要素を変数に割り当てます 
var newTweenElement = $('newTween'); 
 // ここでアニメーション イベントを作成し、この要素をパラメータとして渡します 
var newTween = new Fx.Tween(newTweenElement) 
}); 

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

<-- これはグラデーション効果を開始するボタンです-->

グラデーションによるスタイリング

要素から新しいグラデーションを作成したら、.set を使用して簡単に設定できます。 () メソッドスタイル属性。これは .setStyle() メソッドと同じです。
参照コード:

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

var newTweenSet = function() {

// "this" の使用に注意してください 
// "this" の使用方法を学びましょう 
this.set('width', '300px'); 

 
 前に学習したように、関数を domready イベントから分離したいと考えていますが、この例では、domready イベント内でグラデーションを作成し、それを外部参照したいと考えています。私たちは既に domready の外でパラメータを渡す方法 (匿名関数を作成して引数を渡す方法) を習得しました。今日は Moo に似た、より良い方法でグラデーション オブジェクトを渡す方法を学びます (これはもはや匿名関数に関するものではありません)いつでも適切です）。 
.bind(); 

.bind(); を通じて、関数内の "this" をパラメータと等しくすることができます:
参照コード:

コードをコピーコードは次のとおりです: // まず、上で見たボタンにクリックイベントを追加します

// 次に、いいえ、この関数を呼び出すだけです

// この関数を呼び出して ".bind()" を追加します 
// 次に、関数に渡したいものをすべて置き換えます 
// さて、この "newTweenSet" では関数内では、「this」は「newTween」を指します。 
$('netTween_set').addEvent('click', newTweenSet.bind(newTween)); 

 
上記の関数を見ると、「this」は「newTween」（トゥイーン オブジェクト）と同等になります。 
これらをまとめて見てみましょう: 

リファレンスコード:

コードをコピーコードは次のとおりです。 // これが関数です

var newTweenSet = function() {

// binding を使用したため、「this」は「newTween」を指すようになりました 
/ / したがって、これに相当するのは次のとおりです: 
// newTween.set('width', '300px') 
this.set('width', '300px'); 
} 
window. addEvent('domready', function() { 
// まず要素を変数に割り当てます 
var newTweenElement = $('newTween'); 
// 次に、新しい FX.Tween を作成します。それを変数に割り当てます 
var newTween = new Fx.Tween(newTweenElement); 
// ここでイベントを追加し、newTween と newTweenSet をバインドします 
$('netTween_set').addEvent('click ', newTweenSet .bind(newTween)); 
}); 

 
すべてのグラデーション オブジェクトを設定したので、イベントに加えて関数も準備完了です。 .set() メソッドを通じてスタイル シート プロパティを設定する方法も学びました。実際のグラデーションを見てみましょう。グラデーションの開始は非常に簡単で、.fade(); とよく似ています。 .start(); メソッドを使用するには、次の 2 つの方法があります。 
 属性値を現在の値から別の値に変更する 

1 つを設定します。最初の属性値、次に別の値に変更します
参照コード:

コードをコピー

コードは次のとおりです: // 幅 (width) を現在の既存の値から 300px に変更します newTween.start('width', '300px');

// これは幅を設定します(幅) 最初に 100px に変更し、次に 300px に変更します。

newTween.start('width', '100px', '300px');
関数内で .start(); メソッドを使用してこのグラデーションを開始できます。 .bind(); メソッドを使用して関数に「newTween」をバインドする場合は、「this」を使用できます。
これまでのグラデーション (トゥイーン) は以上です…
しかし、グラデーション効果についてはまだ説明すべきことがたくさんあります。たとえば、複数のスタイルシートプロパティを一度に「グラデーション」する場合は、 .morph(); メソッドを使用できます。トランジションライブラリを使用してトランジション用に変更することもできます。ただし、このチュートリアルはすでに十分に長いので、後ほど保存しておきます。