002柿饼派GUI模组学习之AnimatedImage控件调试

本文声明：本文为个人学习柿饼派显示模组的相关记录与经验。

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