RM新时代网站-首页

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

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

ZLG致遠(yuǎn)電子 ? 2024-07-18 08:25 ? 次閱讀

AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架?!禔WTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何加載外部資源?如何設(shè)計(jì)自定義進(jìn)度條?這些都會(huì)在系列文章進(jìn)行解答。

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

圖1ZTP800示教器運(yùn)行video_image控件demo效果

video_image控件播放序列幀動(dòng)畫(huà)優(yōu)點(diǎn)

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

對(duì)比格式

播放序列幀方式的優(yōu)點(diǎn)

MJPG

MJPG動(dòng)畫(huà)文件占用空間大,JPG的解壓速度慢;video_image的幀間差異圖像算法能夠很大程度降低空間上的消耗,包括內(nèi)存和文件系統(tǒng)空間,同時(shí)解壓速度也會(huì)更快。

GIF

GIF只支持8位色,并且不支持半透;而video_image動(dòng)畫(huà)可支持32位色,并且支持半透顯示。

MP4

MP4壓縮率較高,解壓位圖需要消耗較大性能,需要依賴硬件解碼才能流暢播放;而video_image控件可以用在中低端平臺(tái),解碼消耗性能會(huì)較低,動(dòng)畫(huà)會(huì)更流暢。

video_image控件的使用方法

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

4374991e-449c-11ef-817b-92fbcf53809c.png

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

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

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

43897c6c-449c-11ef-817b-92fbcf53809c.png

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

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

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

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

438da3e6-449c-11ef-817b-92fbcf53809c.png

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

在AWTK程序播放序列幀

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

439144f6-449c-11ef-817b-92fbcf53809c.png

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

聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 視頻
    +關(guān)注

    關(guān)注

    6

    文章

    1942

    瀏覽量

    72884
  • C語(yǔ)言
    +關(guān)注

    關(guān)注

    180

    文章

    7604

    瀏覽量

    136683
  • awtk
    +關(guān)注

    關(guān)注

    0

    文章

    44

    瀏覽量

    226
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    AWTK使用經(jīng)驗(yàn)】如何響應(yīng)物理按鍵

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架?!?b class='flag-5'>AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何加載外部資源?如何設(shè)計(jì)自定義進(jìn)度條?這些都會(huì)在系列文章
    的頭像 發(fā)表于 06-06 08:25 ?790次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何響應(yīng)物理按鍵

    AWTK使用經(jīng)驗(yàn)】如何添加中文輸入法

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架。《AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何加載外部資源?如何設(shè)計(jì)自定義進(jìn)度條?這些都會(huì)在系列文章
    的頭像 發(fā)表于 06-20 08:25 ?1035次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何添加中文輸入法

    AWTK使用經(jīng)驗(yàn)】如何更換AWTK SDK與渲染模式

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架?!?b class='flag-5'>AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何播放攝像頭畫(huà)面?如何更換
    的頭像 發(fā)表于 08-01 08:25 ?1066次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何更換<b class='flag-5'>AWTK</b> SDK與渲染模式

    AWTK-MVVM是什么?其功能有哪些

    AWTK-MVVM是一套為AWTK用C語(yǔ)言開(kāi)發(fā),并支持各種腳本語(yǔ)言的MVVM框架,實(shí)現(xiàn)了數(shù)據(jù)綁定、命令綁定和窗口導(dǎo)航等基本功能,使用AWTK-MVVM開(kāi)發(fā)應(yīng)用程序,無(wú)需學(xué)習(xí)
    發(fā)表于 12-15 06:07

    在QML動(dòng)畫(huà)設(shè)計(jì)中通過(guò)指定關(guān)鍵創(chuàng)建時(shí)間線動(dòng)畫(huà)

    在QML動(dòng)畫(huà)設(shè)計(jì)中,可以通過(guò)指定關(guān)鍵創(chuàng)建時(shí)間線動(dòng)畫(huà);還可以將時(shí)間線綁定到組件(如滑塊)的屬性值,以這種方式控制動(dòng)畫(huà)。
    的頭像 發(fā)表于 10-10 11:27 ?2137次閱讀

    如何在OpenHarmony上實(shí)現(xiàn)動(dòng)畫(huà)?

    動(dòng)畫(huà)是常見(jiàn)的一種動(dòng)畫(huà)呈現(xiàn)形式,本例就為大家介紹如何通過(guò) translate(),setInterval(),clearAllInterval() 等方法實(shí)現(xiàn)
    的頭像 發(fā)表于 06-18 15:14 ?886次閱讀
    如何在OpenHarmony上<b class='flag-5'>實(shí)現(xiàn)</b>逐<b class='flag-5'>幀</b><b class='flag-5'>動(dòng)畫(huà)</b>?

    AWTK 開(kāi)源智能串口屏方案

    修改數(shù)據(jù),自動(dòng)更新界面。主要特色1.開(kāi)發(fā)強(qiáng)大的界面設(shè)計(jì)器AWStudio;基于AWTK實(shí)現(xiàn)強(qiáng)大的GUI功能(多窗口、輸入法、動(dòng)畫(huà)和各種控件);基于AWTK-MVVM
    的頭像 發(fā)表于 12-02 08:24 ?944次閱讀
    <b class='flag-5'>AWTK</b> 開(kāi)源智能串口屏方案

    AWTK使用經(jīng)驗(yàn)】如何設(shè)計(jì)立體電池進(jìn)度條?

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架?!?b class='flag-5'>AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何加載外部資源?如何設(shè)計(jì)自定義進(jìn)度條?這些都會(huì)在系列文章
    的頭像 發(fā)表于 04-18 08:25 ?449次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何設(shè)計(jì)立體電池進(jìn)度條?

    AWTK使用經(jīng)驗(yàn)】加載和釋放外部圖片

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架?!?b class='flag-5'>AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何加載外部資源?如何設(shè)計(jì)自定義進(jìn)度條?這些都會(huì)在系列文章
    的頭像 發(fā)表于 04-26 08:25 ?468次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】加載和釋放外部圖片

    通過(guò)視頻提取及批量取模轉(zhuǎn)換實(shí)現(xiàn)基于STC32的點(diǎn)陣LED動(dòng)畫(huà)播放

    通過(guò)視頻提取及批量取模轉(zhuǎn)換實(shí)現(xiàn)基于STC32的點(diǎn)陣LED動(dòng)畫(huà)播放
    的頭像 發(fā)表于 06-27 02:16 ?379次閱讀
    通過(guò)視頻<b class='flag-5'>幀</b>提取及批量取模轉(zhuǎn)換<b class='flag-5'>實(shí)現(xiàn)</b>基于STC32的點(diǎn)陣LED<b class='flag-5'>動(dòng)畫(huà)</b>播放

    AWTK使用經(jīng)驗(yàn)】如何播放視頻或攝像頭畫(huà)面

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架?!?b class='flag-5'>AWTK使用經(jīng)驗(yàn)》系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何加載外部資源?如何設(shè)計(jì)自定義進(jìn)度條?這些都會(huì)在系列文章
    的頭像 發(fā)表于 07-04 08:25 ?609次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何播放視頻或攝像頭畫(huà)面

    圖片動(dòng)畫(huà)控件和Video image控件的使用方法

    在UI開(kāi)發(fā)過(guò)程中,序列幀基本是繞不開(kāi)的,AWTK 支持多種方法實(shí)現(xiàn)序列幀顯示,本文介紹圖片動(dòng)畫(huà)控件和Video image控件的使用方法。
    的頭像 發(fā)表于 08-06 16:44 ?851次閱讀
    圖片<b class='flag-5'>動(dòng)畫(huà)</b>控件和Video image控件的使用方法

    AWTK使用經(jīng)驗(yàn)】如何在AWTK顯示阿拉伯文本

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架。AWTK使用經(jīng)驗(yàn)系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案,例如:如何播放視頻或攝像頭畫(huà)面?如何播放
    的頭像 發(fā)表于 09-12 08:07 ?349次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何在<b class='flag-5'>AWTK</b>顯示阿拉伯文本

    AWTK使用經(jīng)驗(yàn)】如何裁剪字庫(kù)以及如何使用點(diǎn)陣字

    AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架。AWTK使用經(jīng)驗(yàn)系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案。AWTK如何裁剪字庫(kù)在
    的頭像 發(fā)表于 10-10 08:05 ?284次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何裁剪字庫(kù)以及如何使用點(diǎn)陣字

    AWTK使用經(jīng)驗(yàn)】如何使用系統(tǒng)輸入法與開(kāi)啟最大化窗口功能

    導(dǎo)讀AWTK是基于C語(yǔ)言開(kāi)發(fā)的跨平臺(tái)GUI框架。AWTK使用經(jīng)驗(yàn)系列文章將介紹開(kāi)發(fā)AWTK過(guò)程中一些常見(jiàn)問(wèn)題與解決方案。AWTK具有跨平臺(tái)的
    的頭像 發(fā)表于 11-14 01:05 ?218次閱讀
    【<b class='flag-5'>AWTK</b>使用<b class='flag-5'>經(jīng)驗(yàn)</b>】如何使用系統(tǒng)輸入法與開(kāi)啟最大化窗口功能
    RM新时代网站-首页