JS動畫實作方法-js教程-PHP中文網

首頁

web前端

js教程

JS動畫實作方法

一个新手

Sep 23, 2017 am 10:33 AM

javascript實現方法

實作動畫的方案主要有6種：Javascript直接實作動畫，可伸縮向量圖形(SVG)動畫，CSS transition，CSS3 animation、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 transition

<!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>

為什麼 transform 沒有觸發 repaint 呢？簡而言之，transform 動畫由GPU控制，支援硬體加速，並不需要軟體方面的渲染。

硬體加速原理
瀏覽器接收到頁面文件後，會將文件中的標記語言解析為DOM樹。 DOM樹和CSS結合後形成瀏覽器建置頁面的渲染樹。渲染樹中包含了大量的渲染元素，每一個渲染元素會被分到一個圖層中，每個圖層又會被載入到GPU形成渲染紋理，而圖層在GPU中transform 是不會觸發repaint 的，最終這些使用transform 的圖層都會由獨立的合成器流程處理。

CSS3 animation

<!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中屬性改變不會觸發repaint ），實際上只有少數屬性可以，例如下面的這些：
transform
opacity
filter

#Canvas動畫

<!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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。