AnimatedImage¶
简介¶
AnimatedImage
是动态图片集。在这个控件中设定图片元素后,能够根据相关设定(如时间间隔
,是否循环播放
,是否缓存使能
)自动播放图片,能够实现动态图的效果。
AnimatedImage
的 开始、停止、暂停 操作需要在JS脚本中实现。
Sample¶
sample实现了简单的图片轮播器,由3个Button控制AnimatedImage的播放。
控件布局¶
Button
的bingtap
属性设定为onBtn
,当Button按下时,将触发JS代码中的onBtn
函数。
在animatedImage
控件中加入需要播放的图片。
JS代码¶
上述三个Button触发的事件函数如下:
onBtn : function(event){ switch(event.target.id) { case "start": this.setData({animatedImage : 'start'}); //也可使用以下方法 //this.setData({animatedImage : {value : 'start'}}); break; case "pause": this.setData({animatedImage : 'pause'}); break; case "stop": this.setData({animatedImage : 'stop'}); break; default: break; } }
效果¶
以下效果为 : 通过三个Button控件,来控制
## AnimatedImage 属性
### 公共属性
-
控件类型
默认
animatedImage
,且不可改动 -
透明度
设置背景颜色的透明度,范围: 0 ~ 255。也可以在
背景颜色
中设定。注:当
背景图片
的设定不为空时,将自动设置为 0。
名称¶
-
控件名称
设定控件的名称。
在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。
设计¶
-
控件锁定
选项:True/False
设定该控件是否锁定。
如果设定值为True,则设计器中无法移动该控件。
-
是否隐藏控件
选项:True/False
设定该控件是否需要隐藏。
如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。
当控件已隐藏时,可通过在
工程管理器
中点击来选中该控件。
图片¶
-
背景图片
设定控件的背景图片,不支持缩放,且居中显示。
外观¶
-
背景颜色
设定
背景颜色
,设定背景颜色的ARGB值。可打开颜色选择器,通过颜色选择器修改RGB值。
Alpha值(即透明度),可以直接修改设定值 或 修改
透明度
的值。背景颜色
的透明度与属性透明度
的值会自动保持一致。 -
播放时间间隔
设定图片之间切换的时间间隔,单位: 毫秒
-
是否缓存使能
选项:True/False
设定轮播的图片是否需要进行缓存。
-
是否循环播放
选项:True/False
设定是否循环播放图片集。
-
图片文件集
添加需要播放图片文件,并能够调整顺序。
添加方法如下:
-
点击下图所示的按钮
-
在弹出的图片选择器中加入所需图片
-
位置属性¶
-
x坐标点
设定 控件的左上角 相对于 父控件的左上角 的横坐标。
-
y坐标点
设定 控件的左上角 相对于 父控件的左上角 的纵坐标。
-
高度
设定控件的高度
-
宽度
设定控件的宽度
setData¶
-
控件自有属性
属性名 类型 描述 注解 start Bool AnimatedImage控件启动图片播放 true
则启动,false
则无操作stop Bool AnimatedImage控件停止图片播放 true
则停止,false
则无操作pause Bool AnimatedImage控件暂停图片播放 true
则暂停,false
则无操作 -
setData
设置更改属性示例示例代码 注解 this.setData({animatedImage1 : 'start'})
使 id
为animatedImage1
的 AnimatedImage 控件启动图片播放this.setData({animatedImage1 : 'stop'})
使 id
为animatedImage1
的 AnimatedImage 控件停止图片播放this.setData({animatedImage1 : 'pause'})
使 id
为animatedImage1
的 AnimatedImage 控件暂停图片播放this.setData({animatedImage1 : {value : 'pause'}})
使 id
为animatedImage1
的 AnimatedImage 控件暂停图片播放