ホームページ >ウェブフロントエンド >jsチュートリアル >JSアニメーションの実装方法
JSアニメーションの実装方法
- 一个新手オリジナル
- 2017-09-23 10:33:122139ブラウズ
アニメーションを実装するには主に 6 つの方法があります: Javascript はアニメーション、スケーラブル ベクター グラフィックス (SVG) アニメーション、CSS トランジション、CSS3 アニメーション、Canvas アニメーション、および requestAnimationFrame を直接実装します。
JavaScript の実装
<!DOCTYPE html><html><head>
<style>
.content{width: 100px;height: 100px;background-color: red;}
</style></head><body><p class="content"></p><script>
var ele=document.getElementsByClassName("content")[0];
var left=0;
let timer=setInterval(function () {
if(left<window.innerWidth-100){
ele.style.marginLeft=left+'px';
left++;
} else {
clearInterval(timer);
}
},16);</script></body></html> 欠点: Javascript を使用してアニメーションを実装すると、通常、ページの再配置と再描画が頻繁に発生し、パフォーマンスが消費されます。
常識的に考えて、要素の位置を変更すると再配置が発生するのはなぜですか?その理由は、絶対配置では新しいレイヤーが作成され、このレイヤーには現在の要素のみが存在するため、再配置ではなく再描画のみが行われるためです。このことからも、同一レイヤー内では要素数が少ない方が並び替え性能が良く、速度が速いことがわかります。
CSS3 トランジション
<!DOCTYPE html><html><head>
<style>
.content{
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out 0s;
-webkit-transition: all 10s ease-in-out 0s;
margin-left: 0;
}
.right{
width: 100px;
height: 100px;
margin-left: 400px;
background-color: blue;
}
</style></head><body><p class="content"></p><script>var timer=setTimeout(function () {
var content=document.getElementsByClassName("content")[0];
content.setAttribute('class','right');
},500);</script></body></html>変換で再描画がトリガーされないのはなぜですか?つまり、変換アニメーションは GPU によって制御され、ハードウェア アクセラレーションをサポートし、ソフトウェア レンダリングを必要としません。
ハードウェアアクセラレーションの原則
ブラウザはページドキュメントを受信すると、ドキュメント内のマークアップ言語を解析して DOM ツリーに変換します。 DOM ツリーと CSS を組み合わせて、ブラウザーがページを構築するためのレンダリング ツリーを形成します。レンダリング ツリーには多数のレンダリング要素が含まれており、各レンダリング要素は GPU にロードされてレンダリング テクスチャを形成しますが、最終的にこれらは再描画されません。トランスフォームを使用するレイヤーは、独立したコンポジター プロセスによって処理されます。
CSS3 アニメーション
<!DOCTYPE html><html><head>
<style>
.content{
width: 100px;
height: 100px;
background-color: red;
transition: all 10s ease-in-out 0s;
-webkit-transition: all 10s ease-in-out 0s;
animation: move 4s infinite;
margin-left: 0;
}
@keyframes move {
from{
margin-left: 0;
}
50%{
margin-left: 400px;
}
to{
margin-left: 0;
}
}
</style></head><body><p class="content"></p></body></html> すべての CSS プロパティが GPU ハードウェア アクセラレーションをトリガーできるわけではありません (GPU でのレイヤー プロパティの変更は再描画をトリガーしません)。実際には、次のようないくつかのプロパティのみが可能です:
transform
opacity
フィルター
キャンバスアニメーション
<!DOCTYPE html><html><head></head><body><canvas id="canvas" width="700" height="500"></canvas><script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var left=0;
var timer=setInterval(function () {
ctx.clearRect(0,0,700,550);
ctx.beginPath();
ctx.fillStyle="#f00";
ctx.fillRect(left,0,100,100);
ctx.stroke();
if(left>700){
clearInterval(timer);
}
left+=1;
},16);</script></body></html>requestAnimationFrame
<!DOCTYPE html><html><head>
<style>
p{width: 100px;height: 100px;background-color: red;}
</style></head><body><p id="box" width="700" height="500"></p><script>
window.requestAnimationFrame=window.requestAnimationFrame||
window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
let element=document.getElementById("box");
let left=0;
requestAnimationFrame(step);
function step() {
if(left<window.innerWidth-200){
left+=1;
element.style.marginLeft=left+"px";
requestAnimationFrame(step);
}
}</script></body></html>以上がJSアニメーションの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。