《HTML5+JavaScript動畫基礎》——第2章 動畫的JavaScript基礎2.1動畫基礎

非同步社群發表於2017-05-02

本節書摘來自非同步社群《HTML5+JavaScript動畫基礎》一書中的第2章,第2.1節,作者:【美】Billy Lamberta , Keith Peters著,更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視

第2章 動畫的JavaScript基礎

如果說第1章是在原理上對動畫的概述,那麼本章將從技術角度概述如何建立HTML5檔案以及如何用canvas元素和JavaScript實現動畫。本章將介紹HTML5檔案結構的要點、動畫迴圈、JavaScript物件以及使用者互動的相關內容。本章所學的技巧將貫穿本書的始終。

2.1 動畫基礎

在開始本章的介紹之前,先回顧下第1章的內容:

  • 動畫由幀組成,每一幀在表現運動的假象上有細微差別;
  • 逐幀動畫包含每一幀的影像或影像描述;
  • 動態動畫包含一幅圖片的起始描述以及後續每一幀影像的變化規則。

本書著重於動態動畫的規則,其中會介紹改變影像描述的各種不同技術,正是依賴於這些技術才得以實現逼真的動畫效果。本章將介紹如何定義影像起始描述的結構,如何為每一幀應用變化規則以及如何將兩者結合在一起完成一個程式。在此過程中我們會建立大量可行的例項。


相關文章