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控件，来控制

sample效果

## AnimatedImage 属性

### 公共属性

控件类型

默认 animatedImage，且不可改动
透明度

设置背景颜色的透明度，范围： 0 ~ 255。也可以在背景颜色中设定。

注：当背景图片的设定不为空时，将自动设置为 0。

名称¶

控件名称

设定控件的名称。

在JS脚本中，可根据控件名称来指定控件，并对其进行设定或操作。

设计¶

控件锁定

选项：True/False

设定该控件是否锁定。

如果设定值为True,则设计器中无法移动该控件。
是否隐藏控件

选项：True/False

设定该控件是否需要隐藏。

如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

当控件已隐藏时，可通过在工程管理器中点击来选中该控件。

图片¶

背景图片

设定控件的背景图片，不支持缩放，且居中显示。

外观¶

背景颜色

设定背景颜色，设定背景颜色的ARGB值。

可打开颜色选择器，通过颜色选择器修改RGB值。

Alpha值(即透明度)，可以直接修改设定值或修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。
播放时间间隔

设定图片之间切换的时间间隔，单位: 毫秒
是否缓存使能

选项：True/False

设定轮播的图片是否需要进行缓存。
是否循环播放

选项：True/False

设定是否循环播放图片集。
图片文件集

添加需要播放图片文件，并能够调整顺序。

添加方法如下:
1. 点击下图所示的按钮
2. 在弹出的图片选择器中加入所需图片

位置属性¶

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 控件暂停图片播放