本文導(dǎo)讀

在UI開發(fā)過(guò)程中，序列幀基本是繞不開的，AWTK支持多種方法實(shí)現(xiàn)序列幀顯示，本文介紹圖片動(dòng)畫控件和Video image控件的使用方法。

ZDP1440是一款基于開源GUI引擎AWTK的圖像顯示專用驅(qū)動(dòng)芯片，在其上面顯示序列幀有多種方法，下面列出幾種方法的優(yōu)缺點(diǎn)：

本文將介紹圖片動(dòng)畫控件及video_image自定義控件。

圖片動(dòng)畫控件

圖片動(dòng)畫控件非常簡(jiǎn)單，僅需要把序列幀圖片加入圖片資源中，然后設(shè)置控件中的圖片前綴和圖片名稱格式，再調(diào)整起始編號(hào)和結(jié)束編號(hào)即可。例如：num0.png、num1.png、······、num9.png，這些圖片的命名格式為：“%s%d”，其中%s為num；每張圖片播放的時(shí)間可調(diào)，且可設(shè)置是否啟用循環(huán)播放，有單次播放完成（啟用循環(huán)播放）和播放完成（禁用循環(huán)播放）事件，可注冊(cè)對(duì)應(yīng)事件的回調(diào)函數(shù)。

圖1

勾選該控件雜項(xiàng)中的“auto_play”選項(xiàng)，在打開頁(yè)面時(shí)就會(huì)自動(dòng)開始播放，或在程序中調(diào)用開始播放接口：image_animation_play。

運(yùn)行效果（黑框?yàn)榭丶吙?，圖片默認(rèn)顯示在控件中央）：

video_image自定義控件

首先在插件管理界面找到video_image控件并安裝，等待安裝結(jié)束后根據(jù)右下角提示，點(diǎn)擊刷新按鈕刷新界面。

圖2

此時(shí)在控件列表的自定義欄中將會(huì)多出video_image控件。

圖3

在已安裝欄選中video_image，右側(cè)會(huì)打開該控件的使用說(shuō)明。

圖4

此時(shí)，在UI工程路徑下，會(huì)出現(xiàn)一個(gè)“3rd”文件夾：

圖5

進(jìn)入“UI工程路徑\3rd\awtk-widget-video-image\bin”，如若該路徑下沒有diff_image_to_video_gen.exe和gif_to_ frame_gen.exe兩個(gè)可執(zhí)行文件，在“UI工程路徑\3rd\awtk-widget-video-image”下按住shift鍵點(diǎn)擊鼠標(biāo)右鍵，選擇在此處打開Powershell窗口，在窗口中敲入“scons”重新編譯該自定義控件。

參照該控件的使用說(shuō)明，使用gif_to_frame_gen.exe拆分gif圖片，再使用diff_image_to_video_gen.exe將圖片壓縮成一個(gè)video_image控件可用的文件。

生成的文件需要拷貝至“UI工程路徑\design\default\data”。

回到AWTK Designer，拖拽一個(gè)video_image控件至頁(yè)面上，填好對(duì)應(yīng)參數(shù)，這里使用示例中提供的”gif_35”演示，和圖片動(dòng)畫控件一樣，此控件也可設(shè)置單次播放完成（啟用循環(huán)播放）和播放完成（禁用循環(huán)播放）事件對(duì)應(yīng)的回調(diào)函數(shù)。

圖6