《HTML5+JavaScript動畫基礎》——1.3 動态動畫與靜态動畫

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

1.3　動态動畫與靜态動畫

使用程式幀實作動畫的一個大的優勢在于它可以變成動态的，因為圖像是在運作時才建立出來的。動态地建立新的圖像則可以帶給每一次觀看獨一無二的視覺體驗，而不是觀看一組事先排好順序的幀，舉個例子，無論你将一部電影翻來覆去看多少遍，它的結局都不會改變。如果能夠根據使用者提供的值計算物體的位置，例如，滑鼠光标的坐标，那麼動畫就可以根據使用者的操作做出變化進而實作與使用者的互動，營造出别的媒體類型所不能達到的一種深入其境的氛圍。

不過編碼的動畫并不一定就是互動式的。可以使用代碼讓一個物體從某個點穿過螢幕。每次播放動畫的時候，會運作同樣的代碼，導緻同樣的運動重複發生。這就是靜态動畫的一個例子。每一幀，從開始到結束都是預先定義好的。跟電影相似，你觀看的是一組事先排好順序的幀，而且每一次觀看的内容是不變的。

但是如果同樣使用代碼建立一個物體，卻将其擺放在一個随機的位置，并讓它以一個随機的速度和方向運動呢？此時，每次播放動畫都會有不同的事情發生。再想象一下，如果在動畫開始的時候，你根據目前的日期和時間建立不同的場景，比如一個冬日的早晨，一個夏日的午後，即根據動畫播放的日期展現截然不同的圖像又會如何？

再比如，你在動畫運作的時候可以通過鍵盤和滑鼠設定動畫中的一些參數。這使得使用者可以與螢幕上的物體産生互動，遠遠脫離靜态動畫。

或許動态動畫中最有意思的方面，以及本書的焦點在于如何将現實世界中的數學與實體原理運用到動畫中的物體上。可以讓一個物體往任意方向移動，還可以給它施加一些重力，這樣當它移動時，它還會不斷下落。當它碰到地面的時候，它會彈起，并且彈起的高度不會超過它的起始高度。最終它落到地面并停在那裡。你還可以加入一些使用者互動，讓使用者能夠用滑鼠撿起該物體并用鍵盤移動它。當使用者不斷抛投該物體時，他會感到他在操作一個真實的物體。

在這種動畫下，使用者不再是被動接受一串順序幀的觀衆，而是進入了你創造的場景。你可以模組化一個遵循你自己的實體規則的世界，提供更加真實的體驗，你也可以完全擺脫現實世界的限制。作為一名程式員，你可以自由發揮你的想象，隻要你覺得合适。這正是創造性的編碼的樂趣所在。通過把工作交給電腦使其不斷更新顯示的内容，你能夠建立一個非常豐富的場景使觀衆沉浸其中，而這是人類曆史上之前的種種媒體都做不到的。觀衆會為此停留多久？他們會一直沉浸其中，隻要你始終讓他們感到有興趣。他們與之互動的越多就越容易再次回來。