天天看點

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

本節書摘來自異步社群《html5+javascript動畫基礎》一書中的第2章,第2.1節,作者:【美】billy lamberta , keith peters著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

如果說第1章是在原理上對動畫的概述,那麼本章将從技術角度概述如何建立html5檔案以及如何用canvas元素和javascript實作動畫。本章将介紹html5檔案結構的要點、動畫循環、javascript對象以及使用者互動的相關内容。本章所學的技巧将貫穿本書的始終。

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

動畫由幀組成,每一幀在表現運動的假象上有細微差别;

逐幀動畫包含每一幀的圖像或圖像描述;

動态動畫包含一幅圖檔的起始描述以及後續每一幀圖像的變化規則。

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

繼續閱讀