JSアニメーションの実装方法-jsチュートリアル-php.cn

JSアニメーションの実装方法

一个新手

リリース： 2017-09-23 10:33:12

オリジナル

2147 人が閲覧しました

アニメーションを実装するには主に 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+&#39;px&#39;;
            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(&#39;class&#39;,&#39;right&#39;);
},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 サイトの他の関連記事を参照してください。