ホームページ > 記事 > ウェブフロントエンド > アニメーション効果のコアメソッドを実現するjsコード_javascriptスキル

アニメーション効果のコアメソッドを実現するjsコード_javascriptスキル

WBOYオリジナル: 2016-05-16 17:21:171057ブラウズ

以下にそのプロセスと原則について簡単に説明します。
ステップ 1: 匿名関数を実装し、自分で実行します。

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

(function(){ })()

この関数は、よく書かれた JS コードでよく見られます。これには、関数の後に () のペアを追加して、自動実行が必要であることを示します。ホスト (BOM 環境) が理解できるように () を使用します。内部の function(){} は匿名関数です。
ステップ 2: ボックスの明るさを変更することでアニメーションを実装します。
ID アニメーションを持つ div

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

アニメーションの透明なグラデーションを実現するには、このように透明度を変更する必要があります

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

for(var i=0;i<10;i) { 
 setTimeout((function(pos){ 
 return function(){ someAnimation(pos); このコードを説明していきます。このコードは複雑でわかりにくいので、理解できなくても大丈夫です。まず、setTimeout の使い方を説明します。

コードをコピーします。

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

setTimeout((function(){})(i/10),i*100) setTimeout の最初のパラメータは実行される関数であり、2 番目のパラメータはパラメータは時間パラメータで、実行を開始するまでにかかる時間を意味しますただし、js にはブロックの概念がなく、スコープは関数に基づいています。したがって、ここで使用するクロージャ、実装原理は次のとおりです。

コードをコピーします

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

(function(){ return function(){} })() クロージャパッケージを使用しない場合にのみ、for ループを実行して必要な結果を得ることができます。

コードをコピーします

コードは次のようになります:

for( var i=0 ;i<10;i ){ setTimeout(function(pos){ someAnimation(pos); }(i/10),i*100) }

このような for ループは一度だけ実行されます (i=9 の場合)。興味のある学生は自分で試すことができます 
これまでのところ、コード全体は次のようになります

コードコード

コードは次のとおりです。引数;
return function(){

} })()
このようにして、IDアニメーション付きのボックスの透明度が0から1に変化します。
3 番目のステップは、継続的な変更を実現するために setInterval を使用します。
setInterval には 2 つのパラメーターがあります。1 つ目は実行される関数で、2 つ目は実行間隔です。
このコードは次のようになります。 far は次のとおりです:

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

(function() {
function someanimation（args）{
document.getElementByid（ "Animation"）。 
コード全体は次のとおりです

コードをコピーします

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

;background-color:red;}