Mootools 1.2 チュートリアル Fx.Morph、Fx オプション、および Fx イベント_Mootools

Fx.Morph (基本的に複数のスタイルシート プロパティを同時にグラデーションできるようにする) の使用方法を学び、次に Fx.Tween と Fx.Morph に適用される Fx オプションのいくつかを説明し、最後に「onComplete」や「​​onStart」などの Fx イベントを使用する方法を見ていきます。これらのオプションとイベントを通じて、シェイプ アニメーションをより適切に制御できるようになります。
Fx.Morph
新しい Fx.Morph を作成する
新しいモーフの初期化は、複数のスタイル属性を指定することを除いて、新しいグラデーションの作成と似ています。
参照コード:

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

// 最初に要素を変数に割り当てます
var morphElement = $('morph_element');
// ここで、新しいモーフを作成します
var morphObject = new Fx.Morph(morphElement); >/ / これで、Fx.Tween と同じようにスタイル属性を設定できます
// ただし、ここで複数のスタイル属性を設定できます
morphObject.set({
'width': 100,
'height ': 100,
'background-color': '#eeeeee'
})
// グラデーションのように変形を開始することもできます
// ただし、ここでは複数の属性値を配置する必要があります同時に
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
}) ;

変換の作成、設定、開始を含めて、これですべてです。
これをより合理的にするには、変数を作成し、関数を分離し、これを制御するいくつかのイベントを作成する必要があります:
リファレンス コード:

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

var morphSet = function(){
// ここで Fx.Tween 属性のようなスタイルを設定できます
// ただし、ここでは複数のスタイル属性を同時に設定できます
this.set({
'width': 100,
'height': 100,
'background-color ': ' #eeeeee'
});
}
var morphStart = function(){
// グラデーションのようなモーフを開始することもできます
// しかし、現在は複数のスタイル属性を使用できます。同時に設定します
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
} );
}
var morphReset = function(){
// 初期値に設定
this.set({
'width': 0,
'height' : 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
// まず、要素を割り当てます。変数に
var morphElement = $('morph_element');
// 次に、モーフを作成します。
var morphObject = new Fx.Morph(morphElement)
// ここで、 click イベントをボタン
// にバインドし、morphObject をこの関数
// にバインドして、上記の関数
$('morph_set').addEvent('click ', morphSet で "this" を使用できるようにします) .bind(morphObject));
$('morph_start').addEvent('click', morphStart.bind(morphObject));
$('morph_reset').addEvent('click', morphReset.bind (morphObject));
});

参照コード:

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

Set 開始
リセット


SetStartreset

FX オプション )
以下のオプションは両方とも Fx.Tween と Fx.Morph で受け入れられます。どちらも実装が非常に簡単で、エフェクトを細かく制御できます。これらのオプションを使用するには、次の構文を使用します。
参照コード:

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

// グラデーションまたはモーフを作成します

// 次に、中括弧の間にオプションを設定します { }
var morphObject = new Fx.Morph(morphElement, {
// まず、オプションの名前
// 後にコロン (:)
// が続き、オプションを定義します
duration: 'long',
transition: 'sine:in'
} ) ;


fps (フレーム/秒)

このオプションは、このアニメーションの 1 秒あたりのフレーム数を決定します。デフォルト値は 50 で、数値および数値を含む変数を受け入れます。
参照コード:

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

// グラデーションまたはモーフを作成します
// 次に、中かっこ { } の間にオプションを設定します
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
// または次のように
var FramePerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: FramePerSecond
}); >
unit (単位)

このオプションは数値の単位を設定します。たとえば、100 というのは、100 ピクセル (px)、パーセント、または em を意味しますか?
参照コード:

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

// Createあなたのグラデーション Or morph

// 次に、中かっこ { }
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
}); の間にオプションを設定します。 🎜>
link
link オプションは、エフェクトを起動する複数の関数呼び出しを管理する方法を提供します。たとえば、マウスオーバー効果がある場合、ユーザーがマウスを動かすたびにこの効果がアクティブになるようにしますか?または、ユーザーがマウスを 2 回移動した場合、2 番目の応答を無視する必要がありますか、それともそれらを連結して最初の呼び出しが完了するのを待ってから 2 回目にエフェクトを呼び出す必要がありますか?リンクには 3 つの設定があります:
"ignore" (デフォルト) - エフェクトが完了する前に新しいエフェクトを開始する呼び出しを無視します

"cancel" - 別のエフェクトが呼び出された場合、現在のエフェクトを放棄し、ハンドルに切り替えます新しいエフェクトは
"チェーン" を呼び出します - チェーンを使用すると、エフェクトを "チェーン" のように接続し、これらの呼び出しをスタックし、完了するまでこれらのエフェクトを 1 つずつ呼び出すことができます
参照コード:




コードをコピー

コードは次のとおりです: // グラデーションまたは変換を作成します// 次に、次の間でオプションを設定します。中括弧 { }

var morphObject = new Fx.Morph(morphElement, {

link: 'chain'
});


duration (duration)
duration は許可しますこのアニメーションの長さを定義するのはあなたです。連続イベントと速度は同じではないため、オブジェクトを 1 秒間に 100 ピクセル移動させる場合、オブジェクトを 1 秒間に 1000 ピクセル移動させるよりも遅くなります。数値 (ミリ秒単位)、値が数値である変数、または 3 つのショートカットを入力できます:
"short"=250ms

"normal"=500ms (デフォルト)
"long"= 1000ms
参照コード:




コードをコピー

コードは次のとおりです: //グラデーションまたはモーフ// 次に、中かっこ { }

var morphObject = new Fx.Morph(morphElement, {

duration: 'long'
}); の間にオプションを設定します。または、このように
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});


transition (トランジション効果)
最後のオプション: トランジション。トランジションのタイプを決定できます。たとえば、移行をスムーズに行うべきか、それともゆっくりと開始して最後まで加速するべきかなどです。 MooTools のコア ライブラリで利用できるこれらのトランジション効果を見てください:
リファレンス コード:

コードをコピー

コードは次のとおりです。 var tweenObject = new Fx.Tween(tweenElement, { transition: 'quad:in' }); 注:最初のもの トランジション バーは、最初に赤い目を引く効果をトリガーし、最後にオレンジ色の目を引く効果をトリガーします。以下の Fx イベントの使用方法を参照してください。

上記の 30 のトランジション タイプは 10 のグループに分類できます:

Quad
Cubic
Quart
Quint
Expo

Circ
Sine
Back
バウンス
エラスティック
各グループには 3 つのオプションがあります:
イーズ イン
イーズ アウト
イーズ イン アウト
Fx イベント
Fx イベントにより、プロセス中にアニメーション効果を実行できます、一部のコードは異なるポイントで実行されます。これは、ユーザー フィードバックを作成するときに役立ち、また、グラデーションと変換を制御する別のレイヤーも提供します。
onStart - Fx の開始時に発生します
onCancel - Fx がキャンセルされたときに発生します トリガー
onComplete - Fx が完了するとトリガーされます
onChainComplete - Fx チェーンが完了するとトリガーされます
グラデーションまたは変形を作成するとき、1 つまたは複数のオプションを設定するのと同じように、これらのイベントの 1 つを設定できます。値を設定すると、関数が設定されます:
参照コード:




コードをコピー


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

// まず新しい Fx.Tween を変数に代入します
// 次に、勾配を付けたい要素を定義します
quadIn = new Fx.Tween(quadIn, {
/ /ここにいくつかのオプションがあります
link: 'cancel',
transition: 'quad:in',
// ここにいくつかのイベントがあります
onStart: function(passes_tween_element){
// これらのイベントすべてはグラデーション オブジェクトを渡します
// したがって、アニメーションが開始されるとき
// ここでは「ハイライト」効果を呼び出します
passes_tween_element.highlight('#C54641');
/ / このカンマが各イベントとオプションの間に常に表示されることに注意してください
// ただし、最後のイベントまたはオプションの後には表示されません
onComplete: function(passes_tween_element){
// 最後に、別のハイライト効果を適用しましょう
passes_tween_element.highlight('#C54641');
}
});

例
上記の変換コードを生成するには、この一連のチュートリアルでは見たことのない方法で機能します。上記のすべての変形要素は 2 つの関数を使用します。1 つはマウスが入ると徐々にフェードアウトし、もう 1 つはマウスが離れると徐々にフェードアウトします。
参考コード:

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

// これは、マウスが入ったときに呼び出す関数です
// 幅のグラデーションは 700px
var enterFunction = function() {
this.start('width', '700px');
}
// これはマウスが離れるときに呼び出す関数です
// 幅徐々に 300px に戻ります
var LeaveFunction = function() {
this.start('width', '300px');
}
window.addEvent('domready', function() {
// ここでは、いくつかの要素を変数に代入します。
varquadIn = $('quadout');
varquadInOut = $('quadinout'); ;
// 次に、上記の 3 つの変数に対応する 3 つのグラデーション要素
//
quadIn = new Fx.Tween(quadIn, {
link: 'cancel',
transition: Fx.Transitions.Quad.easeIn、
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
}、
onComplete: function(passes_tween_element){
passes_tween_element .highlight ('#E67F0E');
}
});
quadOut = new Fx.Tween(quadOut, {
link: 'キャンセル',
transition: 'quad:out '
});
quadInOut = new Fx.Tween(quadInOut, {
リンク: 'キャンセル',
遷移: 'quad:in:out'
}); // 次に、マウス Enter イベントとマウス Leave イベントを追加します
// .addEvents
の使用に注意してください// .addEvent
の使用に似ています// ただし、次のように複数のイベントを追加できます。 mode
$('quadin').addEvents({
// まず、イベントを指定し、イベントを一重引用符で囲む必要があります
// その後にコロン (:) を続けます
// 最後に関数を配置します
// この例では、関数はグラデーション オブジェクトにバンド化されています
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leftFunction.bind (quadIn)
});
$('quadout').addEvents({
// ここでこの関数をどのように再利用するかに注目してください
'mouseenter': enterFunction.bind(quadOut),
' Mouseleave': LeaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
// ここでも同じ関数を使用します
// ただし、毎回私たちは皆、さまざまな要素にイベントを適用します
// さまざまなグラデーションをバインドします
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leftFunction.bind(quadInOut)
});



さらに詳しく…

Fx ライブラリのツールを使用すると、エフェクトをより詳細に制御できます。ドキュメントの

Fx セクション

と、tween、morph と 遷移。

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

このページの例、MooTools 1.2 コア ライブラリ、外部 JavaScript ファイル、外部 CSS ファイル、または単純な HTML ファイルを含めます。