- アニメーションに必要なものすべてをjQueryに似たフレームワークから取得しようとします（これはかなり時間がかかるタスクであることが判明しました）
- 自分で機能を書くことができます（一部のブラウザではアーキテクチャを十分に検討していないか、十分にテストされていないリスクがあります）
- 効果を持つ独立した基本クラスを見つける
驚いたことに、検索エンジンフレームワークmoo.fx.jsは何も提供しなかったため、このトピックの主な目的はそれに注目することです。 開発者にとって、moo.fxは、流体アニメーションを使用してアプリケーションを作成するための超軽量のバックボーンです。 その主なタスクは、より複雑なエフェクトを作成するための基本的なアーキテクチャとインターフェイスを開発者に提供することです。
2番目のバージョンのmoo.fxの使用に関する十分なドキュメントと例が見つからなかったため、moo.fx形式自体について簡単に説明することにしました。 開発者はValerio Proietti（ mootoolsのリード開発者）であるため、エンジンも注目に値します。 Moo.fx自体は、2つの有名なフレームワークmootoolsとprototypeで使用するために作成されました。 ここでは、mootoolsの使用例を検討しません（最も軽量のスタンドアロンソリューションを探しているため）。 実際、prototype.js全体を接続する必要はありません。moo.fxを機能させるには、prototypeフレームワークのmoo.fxの配信に含まれるいわゆるprototype.lite.jsを接続する必要があります。 prototype.lite.jsの存在は非常に楽しいです。これは、2つのファイルのみを接続することでエフェクトエンジンを使用できるようになったためです。
<script type= "text/javascript" src= "prototype.lite.js" ></script><!-- ~3-4 KB -->
<script type= "text/javascript" src= "source/moo.fx.js" ></script><!-- ~3-4 KB -->
* This source code was highlighted with Source Code Highlighter .
prototype.jsを操作するためのmoo.fx.js配信セット ：
- prototype.lite.js（必須） -moo.fx.jsまたはprototype.jsのフルバージョンを操作するために特に必要となるprototype.jsの簡略版
- moo.fx.js（必須） -エフェクトの基本アーキテクチャ
詳細が続きます。
ここでは、moo.fx.jsの使用例を見ることができます
- moo.fx.pack.js（オプション） -追加の効果を含む拡張機能
-スクロールコントロール（ Fx.Scroll ）
-カラー管理（ Fx.Color ）
-追加の関数rgbToHex（配列）およびhexToRgb（配列）
ここでは、moo.fx.pack.jsの使用例を見ることができます
- moo.fx.utils.js（オプション）-DOM要素の高さ、幅、透明度をアニメーション化するための拡張機能。 トグル（）メソッドがすべての場合に期待どおりに動作しないことに注意してください。 幅/高さのスタイル属性を設定すると問題が始まります。 一方、この追加機能はスペースをほとんど占有せず、ニーズに合わせて簡単に調整できます。
-高さ制御（ Fx.Height ）[合計2つの方法：トグル（）、ショー（）]
-幅制御（ Fx.Width ）[合計2つの方法：トグル（）、ショー（）]
-透明度管理（ Fx.Opacity ）[合計2つの方法：トグル（）、ショー（）]
ここでは、moo.fx.utils.jsの使用例を見ることができます
- moo.fx.accordion.js（オプション） -「アコーディオン」機能（ moofx.mad4milk.netページ自体で表示できます ）
- moo.fx.transitions.js（オプション） -fnk。 ロバート・ペナーによるイージング方程式に基づくスムーズな遷移
moo.fx.js-moo.fxエフェクトの基本機能（フレームワーク）
新しいエフェクトを作成するとき、デフォルトで次のように設定されるオプションを変更できます。
setOptions: function (options){
this .options = Object.extend({
onStart: function (){}, //
onComplete: function (){}, //
transition: Fx.Transitions.sineInOut, // ( )
duration: 500, //
unit: 'px' , //
wait: true , // ?
fps: 50 // : Math.round(1000/this.options.fps)
}, options || {});
}
* This source code was highlighted with Source Code Highlighter .
最初にwait、onStart（）、onComplete（）パラメータがアーキテクチャに組み込まれていると非常に便利だと思います。これにより、複雑なエフェクトとそのキューを作成できます。
moo.jsには2種類のエフェクトがあります。
- 単一のプロパティを操作する[新しいFx.Styleで作成（el、property、options）]
- 複数のプロパティを同時に変更する[新しいFx.Styles（el、オプション）で作成]
- set：function（to）{...} -いくつかの値の1つ以上のパラメーターを設定します
例（id =“ someId”の要素のクロスブラウザー設定、透明度値0.5）：
var eff = new Fx.Style( 'someId' , 'opacity' );
eff.set(0.5);
* This source code was highlighted with Source Code Highlighter .
- hide：function（）{...} -いくつかのパラメーター（アニメーションが行われるパラメーター）をリセットします。 このパラメーターが「不透明度」の場合-通常の非表示要素
例（要素を隠す）：
var eff = new Fx.Style( 'someId' , 'opacity' );
eff.hide();
* This source code was highlighted with Source Code Highlighter .
- custom：function（from、to）{...}は最も価値のある方法です。 1つ以上のパラメーターの[スムーズ]アニメーションを作成します[値からto]
例（要素の位置の同時スムーズアニメーション）：
var eff = new Fx.Styles( 'myElement' , {duration: 1000, transition: Fx.Transitions.linear});
eff.custom({ 'top' : [100, 400], 'left' : [300, 200]});
* This source code was highlighted with Source Code Highlighter .
- clearTimer：function（）{...} -現在のアニメーションの早期終了
例（最初の動きをすぐにリセットし、2番目の動きを開始します）：
var eff = new Fx.Styles( 'myElement' , {duration: 1000, transition: Fx.Transitions.linear});
eff.custom({ 'top' : [100, 200], 'left' : [100, 200]}); // №1
eff.clearTimer(); // №1
eff.custom({ 'top' : [300, 100], 'left' : [200, 900]});// №2
* This source code was highlighted with Source Code Highlighter .
便利なリンク：
- プロジェクトの公式サイト
- このフレームワークの以前のバージョンに関するドキュメント （最後に見つけなかった）
- 以前のバージョン（バージョン1.2）を使用したいくつかの例