本文聲明：本文為個(gè)人學(xué)習(xí)柿餅派顯示模組的相關(guān)記錄與經(jīng)驗(yàn)。

002柿餅派GUI模組學(xué)習(xí)之AnimatedImage 控件調(diào)試

1、認(rèn)識(shí)AnimatedImage控件

? AnimatedImage是動(dòng)態(tài)圖片集。在這個(gè)控件中設(shè)定圖片元素后，能夠根據(jù)相關(guān)設(shè)定(如時(shí)間間隔,是否循環(huán)播放,是否緩存使能)自動(dòng)播放圖片，能夠?qū)崿F(xiàn)動(dòng)態(tài)圖的效果。

AnimatedImage的 開始、停止、暫停 操作需要在JS腳本中實(shí)現(xiàn)。（詳細(xì)請(qǐng)參考官方幫助文檔）

2、新建工程名為AnimatedImage demo

預(yù)先放置需要的界面控件，如：

? ? ? ?點(diǎn)擊基礎(chǔ)控件欄的animatedImage控件將其放置于畫布中，點(diǎn)擊button控件放置于畫布，button控件分別放置3個(gè)，可復(fù)制粘貼；對(duì)界面控件進(jìn)行調(diào)整至合適的大小和位置。個(gè)人Demo如下圖：

? ? ? ?界面布置合理之后，進(jìn)行對(duì)控件相關(guān)屬性的配置：

? ? ? ?AnimatedImage控件配置：重點(diǎn)配置的屬性有：是否循環(huán)播放、圖像文件集，在屬性欄此兩項(xiàng)我勾選循環(huán)播放，圖像文件我這里添加的是png格式的圖片，點(diǎn)擊圖像文件集右邊空白格進(jìn)入操作即可添加預(yù)先準(zhǔn)備好的圖片文件，注意圖片的尺寸要合適屏幕大小，大于屏幕的圖片會(huì)自動(dòng)裁剪，其他屬性可自行配置。

? ? ? ?三個(gè)botton控件配置：重要配置的屬性有：控件名稱、調(diào)用屬性，分別在三個(gè)botton控件的屬性欄將botton控件的名稱分別改為start、pause、stop，個(gè)人理解為定義三個(gè)按鍵的名稱以于在程序函數(shù)中調(diào)用。將三個(gè)botton控件的調(diào)用屬性欄bindtap的右邊統(tǒng)一填寫為onBtn，個(gè)人理解為定義了一個(gè)名稱為onBtn的按鍵函數(shù)以于在函數(shù)中調(diào)用，此名稱個(gè)人認(rèn)為可以根據(jù)實(shí)際操作命名，在編寫實(shí)際應(yīng)用函數(shù)時(shí)命名于此一致即可。

? ? ? ?控件屬性配置完成后，接下來(lái)編寫 .js文件代碼，詳細(xì)參考官方提供的幫助文檔：下圖為本次控件學(xué)習(xí)的代碼：

鼠標(biāo)雙擊右邊工程管理欄的page1.js文件即可打開代碼編輯器，填寫如下紅色方框的函數(shù)。此處有三個(gè)注意的要點(diǎn)為：1、函數(shù)名onBtn:要和前面botton控件所配置的bindtap屬性一致，否則會(huì)提示按鍵失效；2、條件判斷中的“start” "pause" "stop"也是要和前面的名稱一致；3、this.setDate函數(shù)中引用的animatedImage1要和工程管理器中的畫面控件下的animatedImage1名稱一致，此處自己的開始調(diào)試時(shí)就是掉坑里了，官方的演示代碼中onBtn函數(shù)下引用的直接時(shí)animatedImage而不是animatedImage1，就是少了個(gè)1，開始時(shí)怎么調(diào)試也沒調(diào)出來(lái)，可能是自己沒理解透官方的教程，所以掉坑里，自己仔細(xì)檢查加嘗試調(diào)試，總是添加了個(gè)1，調(diào)試成功。標(biāo)紅色以此為鑒。

? ? ? ?代碼編輯結(jié)束后，可以在線運(yùn)行或者下載到柿餅派中，實(shí)際效果為：

鼠標(biāo)點(diǎn)擊start按鍵，圖片輪流播放、點(diǎn)擊pause按鍵，圖片暫停播放、點(diǎn)擊stop按鍵，圖片停止播放，回到第一張圖片。

黑色顯示框中可以看到我點(diǎn)擊按鍵的返回?cái)?shù)據(jù)，如:start clicked，此是按鍵處理函數(shù)下因?yàn)橛衏onsole.log("start clicked");此類函數(shù)。

在線運(yùn)行演示：

下載到柿餅派演示：

最后附上演示工程相關(guān)代碼：https://download.csdn.net/download/weixin_44549195/12356024

總結(jié)

以上是生活随笔為你收集整理的002柿饼派GUI模组学习之AnimatedImage控件调试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。