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

これまで見てきた他の 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 コードは次のようになります。

リファレンス コード:

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

300 width


.fade();

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

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

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

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


参照コード:

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

知覚不透明度を 50 にフェード

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


参照コード:

コードをコピー

次のコード:

300 width> ; 100 width フェードアウト ="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

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

要素から新しいグラデーションを作成したら、.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(); メソッドを使用できます。トランジション ライブラリを使用してトランジション用に変更することもできます。ただし、このチュートリアルはすでに十分に長いので、後ほど保存しておきます。

さらに詳しく…

開始するために必要なものが含まれた zip パッケージをダウンロードします

MooTools 1.2 ライブラリ、上記の例、外部 JavaScript ファイル、単純な HTML ファイル、および CSS ファイルが含まれています。

前と同様、最良のリソースは MooTools 1.2 ドキュメントです。

• .tween(); メソッドに関する情報
• また、.morph(); メソッドと transitions ライブラリ

もご覧ください。