JavaScript の小さなアニメーション コンポーネントと実装コード_PHP チュートリアル
- WBOYオリジナル
- 2016-07-21 15:36:51766ブラウズ
一般的なアニメーション効果を作成するには、js はどのように完成させるのでしょうか? 例を見てください
コードをコピーします コードは次のとおりです:
setInterval(function(){
element.style.left = parseFloat(element.style.left) +(n) +'px'
;
var interval =setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px'; } 、 10); clearInterval (interval) を使用してアニメーションの再生を終了します。 (element.style.left) +2 +'px' },10);
が 500px を超えるとアニメーションが停止し、要素は移動しなくなります。 element.style.left =parseFloat(element.style.left) +(n) +'px'; } 、 10); clearInterval (interval) を使用してアニメーションの再生を終了します。 (element.style.left) +2 +'px' },10);
テスト
[Ctrl+A Select All 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]
ただし、上記のアニメーションは比較的硬いので、別のタイムライン アニメーションがあります。
例を見てください:
var element = document.getElementById('test1'); pos = 終了? 1 : (時間-開始)/dur;
if(時間>終了); interval) ; } },10); start はターゲットアニメーションの開始時間です ( +new Date は実際には new Date().getTime() です)
dur はアニメーションの実行に必要な合計時間です if(時間>終了); interval) ; } },10); start はターゲットアニメーションの開始時間です ( +new Date は実際には new Date().getTime() です)
finish はターゲット アニメーションの終了時間
pos = time > end ? 1 : (time-start)/dur; // pos は時間の比率
(100*pos) と考えることができ、100 は距離を表します。距離が 500px の場合は、500 *pos に設定します。
time>finish: 時間を超えるとアニメーションを停止します。
テスト
[Ctrl+A を押してすべてを選択します 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]
とてもわかりました。簡単なアニメーション効果を記述する方法はすでにわかりました
見てみましょう。小さなもの 完全なアニメーション コンポーネントの書き方:
コードをコピーします
コードは次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。