【AWTK使用經(jīng)驗】如何實現(xiàn)序列幀動畫

AWTK是基于C語言開發(fā)的跨平臺GUI框架?！禔WTK使用經(jīng)驗》系列文章將介紹開發(fā)AWTK過程中一些常見問題與解決方案，例如：如何加載外部資源？如何設(shè)計自定義進度條？這些都會在系列文章進行解答。

假設(shè)目前想在AWTK中顯示炫酷流暢的圖片動畫，此時可以用video_image控件來播放序列幀動畫。本篇文章將介紹該控件的原理和使用方法。

圖1?ZTP800示教器運行video_image控件demo效果

video_image控件播放序列幀動畫優(yōu)點

video_image控件采用了幀間差異的圖像算法，在壓縮位圖時會計算并保存每一幀之間的臟矩形區(qū)域和數(shù)據(jù)，接著將這些差異數(shù)據(jù)壓縮成自定義的視頻文件，最后再采用lz4算法對視頻文件進一步壓縮。在video_image控件播放視頻文件時會先用lz4算法解壓視頻文件，再將幀間差異解析組合成位圖播放。下面是video_image控件播放序列幀相比較MP4、MJPG與GIF等常見格式的優(yōu)點：

video_image控件的使用方法

首先，在AWStudio插件列表安裝awtk-widget-video-image控件，并編譯video_image控件工程，會在awtk-widget-video-image/bin目錄下生成相關(guān)工具：gif_to_frame_gen工具可以將GIF轉(zhuǎn)換成一張張位圖序列幀；diff_image_to_video_gen工具可以將這些位圖序列幀壓縮成video_image控件支持播放的自定義視頻文件。

圖2?AWStudio插件列表的video_image控件將GIF轉(zhuǎn)換成位圖序列幀

假設(shè)目前的GIF名稱為zlg.gif，可以在bin文件夾輸入下面命令將GIF轉(zhuǎn)成位圖序列幀，工具的詳細參數(shù)可以看控件目錄下的README.md文檔：

./gif_to_frame_gen.exe ./zlg.gif ./my_image/

圖3?使用工具將GIF轉(zhuǎn)成位圖序列幀

將位圖序列幀合成自定義視頻文件

同樣是在bin目錄下可以使用diff_image_to_video_gen工具將位圖序列幀合成自定義視頻文件。工具的設(shè)置的參數(shù)比較多，詳細參數(shù)說明可以看控件目錄下的README.md文檔，示例命令如下：

./diff_image_to_video_gen.exe ./my_image/ frame%d ./my_image/video_gif RGB565 30

圖4?diff_image_to_video_gen工具生成自定義視頻文件

在AWTK程序播放序列幀

將上面生成的自定義視頻文件通過AWStudio導(dǎo)入到資源瀏覽器的“其他數(shù)據(jù)”分類項，接著再設(shè)置video_image控件的video_name屬性為視頻文件名稱，最后打包編譯運行程序即可。

圖5?添加與設(shè)置視頻文件到應(yīng)用中