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

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

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

video_image控件播放序列幀動畫優點

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

video_image控件的使用方法

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

圖2AWStudio插件列表的video_image控件將GIF轉換成位圖序列幀

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

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

圖3使用工具將GIF轉成位圖序列幀

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

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

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

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

在AWTK程序播放序列幀

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

圖5添加與設置視頻文件到應用中