移動應用中有很多幼兒教育應用需要這樣乙個功能：以動畫的方式展示乙個漢字怎麼寫。對外漢語應用有時候也需要這樣的功能。
怎麼實現呢？
以「地」字為例子：
漢字「地」由許多筆畫組成。單獨筆畫的動畫很容易實現，每次繪製一部分，逐步繪製完全，連貫起來就是動畫：
這一步不難，具體實現方法有很多種，這裡介紹我採用的方法：幾乎所有的ui平台都提供了畫線的功能，那麼我們就設定乙個起始點，設定乙個終點，然後在起始點和終點之間畫線，線的寬度要足夠寬能夠覆蓋住筆畫。這個線和筆畫影象重疊的畫素就是我們每一步要顯示的畫素。起始點不動，終點沿著一定軌跡走（最簡單的就是沿著直線走），筆畫便會一部分一部分的顯示，直到全部顯示出來。
筆畫動畫實現後，下面就是要把漢字分解為乙個個的筆畫，然後對筆畫編號為一定的順序，對每個筆畫動畫設定動畫軌跡，這樣就可實現漢字的動畫了。
怎麼分解漢字呢？
最簡單的方法是在photoshop中手動分解。比如，把乙個「地」字分解為「橫」、「豎」等等等筆畫影象：
這是個體力活，本大人只分解了兩筆就不想向下幹了。問元芳，你怎麼看？元芳說，大人，小滴不識字。
***，不識字，勞資的金·瓶·梅怎麼會出現在你的房間？
也罷，還是得親自來。頭大啊，分解就很麻煩了，分解完了還要對各圖進行編號，尋找軌跡點，豈不要累死本大人！
這時候，本大人一直銘記的程式設計師的第一美德起作用了。
程式設計師的第一美德：懶惰！
於是一拍腦門，乙個方案出現了——不進行分解，換一種方法，對影象進行多邊形約束。
什麼是多邊形約束呢？看下圖：
以「地」字起手一橫為例子。找乙個多邊形，將這個筆畫與其它筆畫隔開。這個多邊形很好畫，其中有四點需要精確定位（圖上的 a,b,c,d 四點），其餘的點就沒硬性要求了，只需要能把筆畫包起來就行了（當然還得是簡單多邊形，也就是說，多邊形的邊不能交叉，不然會影響到後面的實現）。
而幾乎每乙個ui平台都有繪製path的api，使用這個api，加上上面的多邊形約束，就可以在執行時產生乙個筆畫蒙板：
有了這個蒙板，加上字型的原始圖，我們就能知道每一筆畫的畫素集合（蒙板圖and原始圖），新增路徑線後【蒙板圖 and 原始圖 and 路徑線覆蓋圖】便是字型動畫的幀圖。
這種方案的優點：
（1）不需要分解影象，只需要找出漢字影象的筆畫分解多邊形，也就是放大圖打點的過程，開發對應生產工具的話可以將工作量降低很多；
（2）而每個字的動畫只需要儲存原始圖、多邊形頂點資料和路徑資料，儲存量非常小，單個字型4-5k即可；
（3）路徑線覆蓋圖和蒙板圖都是在執行時呼叫系統的api產生的，不需要用圖形學演算法。
下面是我寫的flash版的實現：
這時候，元芳走過來，虛偽的說：「大人真乃神人也！」
這小兔崽子！
xiaotie 集異璧實驗室(geblab)
漢字動畫程式的原理
移動應用中有很多幼兒教育應用需要這樣乙個功能 以動畫的方式展示乙個漢字怎麼寫。對外漢語應用有時候也需要這樣的功能。怎麼實現呢？以 地 字為例子 漢字 地 由許多筆畫組成。單獨筆畫的動畫很容易實現，每次繪製一部分，逐步繪製完全，連貫起來就是動畫 這一步不難，具體實現方法有很多種，這裡介紹我採用的方法 ...
2018 2 10 動畫原理
動畫原理 人走路的時候，步長 動畫的基本原理 讓盒子的 offsetleft 步長 盒子 原來的位置 0 10 盒子現在的offsetleft 10 10 10 20 10 原理 script 動畫的基本原理 盒子的offsetleft 步長 var btn document getelements...
骨骼動畫原理
骨骼動畫技術後於幀動畫技術出現 最開始，骨骼動畫僅用於非實時渲染的建模領域，如3dmax這類建模軟體之中，以方便美工的建模。後來，cpu從渲染中解放後，骨骼動畫才用於實時渲染的遊戲中。頂點動畫 早期的3d模型動畫，就是把每幀的頂點資料輸出到檔案中，所以3d模型的乙個動作就是一系列的模型，這樣做的目的...