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

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

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

以下にそのプロセスと原則について簡単に説明します。
ステップ 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 ループは一度だけ実行されます (i=9 の場合)。興味のある学生は自分で試すことができます
これまでのところ、コード全体は次のようになります




コードコード


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

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




コードをコピーします


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



;background-color:red;}