從精靈圖像生成動畫？

Question

我見過Sublime Text網站，他們的動畫似乎使用了一堆“精靈”。 像這樣的圖像如何：

成為動畫？ 我做了幾個谷歌搜索，其中大部分（動畫）都只是平面化圖象這成為動畫圖像這樣 。

Answer 1

您可以檢查發布的第二個鏈接的源代碼。 該代碼有據可查。 以下是一般說明：

1. 您有一個canvas元素（在其中繪制動畫）和一個sprite圖像，其中包含動畫的所有“幀”。
2. 您有一個“循環”功能，該功能按設定的時間間隔（在我們的情況下為1000/30，等於33ms）被調用
3. 該函數清除canvas元素
4. 該函數設置接下來要繪制的精靈imgae的區域。 這是我們的“框架”。
5. 該函數在畫布元素上繪制精靈的計算區域

我會以不同的方式去做。 出於兼容性原因，最好使用簡單的div來實現這種動畫。 只需將圖像精靈設置為背景圖像即可。 與創建完全相同的循環相比，該循環計算與新框架相對應的“背景位置”值。

Answer 2

喬恩·斯金納（Jon Skinner）（是，來自Sublime Text），寫了一篇博客文章，介紹了他如何為Sublime Text主頁設置動畫： http : //www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

他說他做了一系列屏幕截圖，保存到.png中。

然后，他將png編碼為delta-sheet（僅包含最后一幀和當前幀之間的像素差異的sprite表單）–非常好且高效！

他甚至為您提供了構建增量表（基於python）的編碼器的代碼： https : //github.com/sublimehq/anim_encoder