2. 程式人生 > >HTML5實現動畫三種方式

HTML5實現動畫三種方式

阿新 • • 發佈：2019-02-07

編者注：作者以一個運動的小車為例子，講述了三種實現HTML5動畫的方式，思路清晰，動畫不僅僅是，還有CSS3和.通過合理的選擇，來實現最優的實現。

原文來自http://caibaojian.com/3-html5-animations.html

PS：由於顯示卡、錄製的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或者失真！

分三種方式實現：

(1)   canvas元素結合JS

(2)   純粹的CSS3動畫（暫不被所有主流瀏覽器支援，比如IE）

(3)   CSS3結合jQuery實現

知道如何使用CSS3動畫比知道如何使用<canvas>元素更重要：因為瀏覽器能夠優化那些元素的效能(通常是他們的樣式，比如CSS

)，而我們使用canvas自定義畫出來的效果卻不能被優化。原因又在於，瀏覽器使用的硬體主要取決於顯示卡的能力。目前，瀏覽器沒有給予我們直接訪問顯示卡的權力，比如，每一個繪畫操作都不得不在瀏覽器中先呼叫某些函式。

1.canvas

html程式碼：

  1. <html>
  2.    <head>
  3.       <metacharset="UTF-8"/>
  4.          <title>Animation in HTML5 using the canvas element</title>
  5.     </head>
  6.    <bodyonload="init();">
  7.       <canvasid="canvas"width="1000"height="600">Your browser does not support the <code><canvas></code>-element.Please think about updating your brower!</canvas>
  8.       <divid="controls">
  9.          <buttontype="button"onclick="speed(-0.1);"
    >Slower</button>
  10.          <buttontype="button"onclick="play(this);">Play</button>
  11.      <buttontype="button"onclick="speed(+0.1)">Faster</button>
  12.       </div>
  13.    </body>
  14. </html>

js程式碼：

定義一些變數：

[javascript] view plain copy
  1. //code from http://caibaojian.com/3-html5-animations.html
  2. var dx=5,           //當前速率
  3.             rate=1,         //當前播放速度
  4.             ani,            //當前動畫迴圈
  5.             c,              //畫圖(Canvas Context)
  6.             w,              //汽車[隱藏的](Canvas Context)
  7.             grassHeight=130,        //背景高度
  8.             carAlpha=0,         //輪胎的旋轉角度
  9.             carX=-400,          //x軸方向上汽車的位置(將被改變)
  10.             carY=300,           //y軸方向上汽車的位置(將保持為常量)
  11.             carWidth=400,       //汽車的寬度
  12.             carHeight=130,      //汽車的高度
  13.             tiresDelta=15,      //從一個輪胎到最接近的汽車底盤的距離
  14.             axisDelta=20,       //汽車底部底盤的軸與輪胎的距離
  15.             radius=60;          //輪胎的半徑

為了例項化汽車canvas(初始時被隱藏)，我們使用下面的自執行的匿名函式

[javascript] view plain copy
  1. (function(){  
  2.            var car=document.createElement('canvas');    //建立元素
  3.            car.height=carHeight+axisDelta+radius;   //設定高度
  4.            car.width=carWidth;              //設定寬度
  5.            w=car.getContext('2d');  
  6.         })();  

點選“Play”按鈕，通過定時重複執行“畫汽車”操作，來模擬“幀播放”功能：

[javascript] view plain copy
  1. function play(s){               //引數s是一個button
  2.            if(ani){                 //如果ani不為null，則代表我們當前已經有了一個動畫
  3.               clearInterval(ani);           //所以我們需要清除它(停止動畫)
  4.               ani=null;                   
  5.               s.innerHTML='Play';           //重新命名該按鈕為“播放”
  6.            }else{  
  7.               ani=setInterval(drawCanvas,40);       //我們將設定動畫為25fps[幀每秒]，40/1000，即為二十五分之一
  8.               s.innerHTML='Pause';          //重新命名該按鈕為“暫停”
  9.            }  
  10.         }  

加速，減速，通過以下方法，改變移動距離的大小來實現：

[javascript] view plain copy
  1. function speed(delta){  
  2.            var newRate=Math.max(rate+delta,0.1);  
  3.            dx=newRate/rate*dx;  
  4.            rate=newRate;  
  5.         }  

頁面載入的初始化方法：

[javascript] view plain copy
  1. //init
  2.             function init(){  
  3.            c=document.getElementById('canvas').getContext('2d');  
  4.            drawCanvas();  
  5.         }  

主調方法：

[javascript] 

相關推薦

HTML5實現動畫三種方式

編者注：作者以一個運動的小車為例子，講述了三種實現HTML5動畫的方式，思路清晰，動畫不僅僅是，還有CSS3和.通過合理的選擇，來實現最優的實現。 PS：由於顯示卡、錄製的幀間隔，以及可能你電腦處理器的原因，播放過程可能有些不太流暢或者失真！ 分三

前端動畫效果實現的三種方式

near 動畫效果 timeout css屬性 轉移 動畫 sla 三種方式 內存 第一種，js中setTimeout和setintervel，把動畫元素設置position：absalute，然後操作left、top來移動。此種方法內存消耗大，顯示效果差，不推薦。 第二種

iOS 簡單動畫效果實現的三種方式

【在ios開發中，動畫是廉價的】 一、首尾式動畫 程式碼示例： // beginAnimations表示此後的程式碼要“參與到”動畫中 [UIView beginAnimations:nil context:nil]; //設定動畫時長

Java多線程實現的三種方式

get() warning 三種方式 方式 緩存 運行 了解 ren ava Java多線程實現方式主要有三種：繼承Thread類、實現Runnable接口、使用ExecutorService、Callable、Future實現有返回結果的多線程。其中前兩種方式線程執行完後

單例模式實現的三種方式

初始化 實例 得到 assm ini 0.10 文件中 base cal 1、什麽是單例模式 單例模式：基於某種方法實例化多次得到實例是同一個2、為何用單例模式 當實例化多次得到的對象中存放的屬性都一樣的情況，應該將多個對象指向同一個內存，即同一個實例3、如何用

sql92查詢與sql99查詢實現的三種方式（講義）

--SQL92&SQL99實現三表聯合查詢 --建立city表：使用圖形操作即可 --給city表新增測試資料 insert into city values(1,'商丘','歷史聞名古都'); insert into city values(2,'邯鄲','歷史聞名

Spring AOP程式設計(二)-AOP實現的三種方式

AOP的實現有三種方式: l         aop底層將採用代理機制進行實現。 l         介面 + 實現類 ：spring採用 jdk

【Android】一、Progress進度條實現的三種方式：主執行緒實現，Service載入，動態建立

前言 更新版本，上傳資料到服務端，都是需要進度顯示的，Android進度顯示兩種方式 ProgressDialog 和 ProgressBar 新版本中ProgressDialog不被推薦使用，所以專案採用ProgressBar 分為三種實現方式： 1、MainAct

Java代理模式實現的三種方式

1.靜態代理 1.1.定義一個介面 public interface IWorkerService { void doSomething(); } 1.2.定義一個實現 public class WorkerServiceImpl implements

JAVA多執行緒實現的三種方式及內部原理

JAVA多執行緒實現方式主要有三種：繼承Thread類、實現Runnable介面、使用ExecutorService、Callable、Future實現有返回結果的多執行緒。其中前兩種方式執行緒執行完

JAVA多執行緒實現的三種方式

JAVA多執行緒實現方式主要有三種：繼承Thread類、實現Runnable介面、使用ExecutorService、Callable、Future實現有返回結果的多執行緒。其中前兩種方式執行緒執行完後都沒有返回值，只有最後一種是帶返回值的。 1、繼承Thread類實現多

多執行緒實現的三種方式

  JAVA多執行緒實現方式主要有三種：繼承Thread類、實現Runnable介面、使用ExecutorService、Callable、Future實現有返回結果的多執行緒。其中前兩種方式執行緒執行完後都沒有返回值，只有最後一種是帶返回值的。 1、繼承Thread類

servlet實現的三種方式

（1）方法一：//這是第一個實現servlet的方法，使用時限servlet介面的方法來實現，使用的時候需要引用servlet-api.jarpackage com.lc;  import javax.servlet.*;  import java.io.*;  import

Android裡的底部頁面的切換的實現的三種方式

底部頁面的切換 實現方式有三種: 1. tabhost+Activity的方式: 1.將MainActivity繼承TabActivity 2.在setContentView();(不一定緊跟隨)之後獲取TabHost物件<只有繼承了TabActivity才能獲取得

web分頁實現的三種方式

個人所知的web分頁的三種方式，閒來無事總結一下。1、使用前端表格外掛進行分頁例如用bootstrap的拓展table元件，注意設定其分頁屬性時設定為“client”，即是 sidePagination:"client", //客戶端分頁，如果改成server就是服務端分頁。

分散式鎖的實現（三種方式）

很多小夥伴在學習Java的時候，總是感覺Java多執行緒在實際的業務中很少使用，以至於不會花太多的時間去學習，技術債不斷累積！等到了一定程度的時候對於與Java多執行緒相關的東西就很難理解，今天需要探討的東西也是一

servlet實現的三種方式對比

第一種：　　實現Servlet 介面第二種：　　繼承GenericServlet第三種　　繼承HttpServlet （開發中使用）通過檢視api文件發現他們三個(servlet 和GenericServlet和HttpServlet)的關係是 　　　　Servlet是一個介面，其中含有很多方法如：init（

JAVA多執行緒實現的三種方式(繼承Thread類、實現Runnable介面、使用ExecutorService、Callable、Future實現有返回結果的多執行緒)

JAVA多執行緒實現方式 JAVA多執行緒實現方式主要有三種：繼承Thread類、實現Runnable介面、使用ExecutorService、Callable、Future實現有返回結果的多執行緒。其中前兩種方式執行緒執行完後都沒有返回值，只有最後一種是帶返回值的。

Android利用android:indeterminateDrawable來實現ProgressBar三種方式

方式1：(效果為補間動畫一樣) <ProgressBar android:layout_width="wrap_content" android:lay

java執行緒實現的三種方式以及靜態代理

# 執行緒 - 一個程序中若開闢多個執行緒，執行緒的執行由排程器控制，先後順序不能人為干預。 - 實現方式 1. 繼承 Thread類 - 呼叫run方法，只有主執行緒一條路 - 呼叫start方法，主執行緒和子執行緒並行交替執行 - ```java