本文聲明：本文為個人學習柿餅派顯示模組的相關記錄與經驗。

002柿餅派GUI模組學習之AnimatedImage 控件調試

1、認識AnimatedImage控件

? AnimatedImage是動態圖片集。在這個控件中設定圖片元素后，能夠根據相關設定(如時間間隔,是否循環播放,是否緩存使能)自動播放圖片，能夠實現動態圖的效果。

AnimatedImage的 開始、停止、暫停 操作需要在JS腳本中實現。（詳細請參考官方幫助文檔）

2、新建工程名為AnimatedImage demo

預先放置需要的界面控件，如：

? ? ? ?點擊基礎控件欄的animatedImage控件將其放置于畫布中，點擊button控件放置于畫布，button控件分別放置3個，可復制粘貼；對界面控件進行調整至合適的大小和位置。個人Demo如下圖：

? ? ? ?界面布置合理之后，進行對控件相關屬性的配置：

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

? ? ? ?三個botton控件配置：重要配置的屬性有：控件名稱、調用屬性，分別在三個botton控件的屬性欄將botton控件的名稱分別改為start、pause、stop，個人理解為定義三個按鍵的名稱以于在程序函數中調用。將三個botton控件的調用屬性欄bindtap的右邊統一填寫為onBtn，個人理解為定義了一個名稱為onBtn的按鍵函數以于在函數中調用，此名稱個人認為可以根據實際操作命名，在編寫實際應用函數時命名于此一致即可。

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

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

? ? ? ?代碼編輯結束后，可以在線運行或者下載到柿餅派中，實際效果為：

鼠標點擊start按鍵，圖片輪流播放、點擊pause按鍵，圖片暫停播放、點擊stop按鍵，圖片停止播放，回到第一張圖片。

黑色顯示框中可以看到我點擊按鍵的返回數據，如:start clicked，此是按鍵處理函數下因為有console.log("start clicked");此類函數。

在線運行演示：

下載到柿餅派演示：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。