アニメーションの機能解析とアニメーションライブラリを緩和JS

前のスポークJSアニメーションタイマー知識、機能や人気のアニメーションライブラリを容易に導入、この1。

身近図

clipboard.png

実際の使用

アニメーションjQueryの()+ jquery.easingプラグ使用:

$(selector).animate(styles,speed,easing,callback)

ネイティブJSを使用してください:
Zhangxin徐の同級生の記事を

イージング関数の知識

イージング関数とは何ですか?私の理解では、アニメーション関数のパラメータと数式を組み合わせていることです。

図に示すようにeaseInQuadに関数ライブラリ例を、緩和循環コントラスト:

Tween.js

clipboard.png

jQuery.easing

clipboard.png

GSAP

clipboard.png

CreateJS

clipboard.png

Kute.js

  easingFn.easingQuadraticIn = function (t) { return t*t; };

分析と結果の比較

基本的な数式は、2のべき乗であり、同じであり、
イージング関数に関係なく、プラットフォーム支持体の、独立しており、
反応プロセス及びアニメーション値の変化量との対応関係の関数を緩和、具体的には次の通り:

GSAPやすラインの例では、各追加グリッドのアニメーション処理、変化の量は、効果が迅速に遅いからであり、増加している量の値を増加させることです。
clipboard.png

次のようにタイマーとは何の関係は、特定のコードの進化はありません:
左に、起因する二次アルゴリズムに、それを証明するたびに1/5で同等の増加を処理しますが、変化量が増えている。デモの権利、そのタイミングものの(10回に5の実施「ダニ」から減少間隔が倍増し、)変更されたが、傾向の変化量は変化の対応する量が同じで、同じ、同じ増分プロセスです。
clipboard.png

アニメーションライブラリ

2、パッケージ変数処理の種々の特性; 3、プロセス制御; 4、機能を容易1、タイマー:行うためのアニメーションライブラリは、基本的な4点を見ています。

実用化にはまだ、あなたがアニメーションライブラリを使用することをお勧めのビジネスニーズを満たしていない、もちろん、あなたがソースで単純な読み取りを見つけることができたときに学んで、自分自身のコア機能を記述しようとすると、アニメーションライブラリの性質の深い理解を自分自身を統合することができ、私はエントリーをお勧めしますKute.js

アニメーションライブラリ勧告(その長所と短所と違い、次回ディテール)

jQueryのアニメーション(プラグjquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/11965091.html