AnimatedImage

简介

AnimatedImage是动态图片集。在这个控件中设定图片元素后,能够根据相关设定(如时间间隔,是否循环)自动播放图片,能够实现动态图的效果。

AnimatedImage的 开始、停止、暂停 操作需要在JS脚本中实现。

AnimatedImage 的基类是 widget , widget 属性及接口详细请查看 widget 控件介绍。基础属性中某些属性在 AnimatedImage 控件中无效(可以设置这类接口属性,但并无效果,显示状态上并无任何变化,因此可以忽略此类属性),不可用属性有:

  • font:字体属性
  • textAlign:文本对齐方式
  • foreground:前景色属性
  • gesture:手势监听

AnimatedImage 属性

公共属性

  • 控件类型

    默认 animatedImage,且不可改动

  • 透明度

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

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

名称

  • 控件名称

    设定控件的名称。

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

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

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

  • 是否隐藏控件

    选项:True/False

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

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

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

图片

  • 背景图片

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

外观

  • 背景颜色

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

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

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

  • 播放时间间隔

    设定图片之间切换的时间间隔,单位: 毫秒

  • 是否循环

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

  • 图片文件集

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

    添加方法如下:

    1. 点击下图所示的按钮

      添加图片

    2. 在弹出的图片选择器中加入所需图片

      添加图片

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 属性值 类型 描述 注解
    value start string AnimatedImage控件启动图片播放 true 则启动,false 则无操作
    stop string AnimatedImage控件停止图片播放 true 则停止,false 则无操作
    pause string AnimatedImage控件暂停图片播放 true 则暂停,false 则无操作
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({animatedImage1 : 'start'}) 使 idanimatedImage1 的 AnimatedImage 控件启动图片播放
    this.setData({animatedImage1 : 'stop'}) 使 idanimatedImage1 的 AnimatedImage 控件停止图片播放
    this.setData({animatedImage1 : 'pause'}) 使 idanimatedImage1 的 AnimatedImage 控件暂停图片播放
    this.setData({animatedImage1 : {value : 'pause'}}) 使 idanimatedImage1 的 AnimatedImage 控件暂停图片播放

Sample

sample实现了简单的图片轮播器,由3个Button控制AnimatedImage的播放。

控件布局

布局

Buttonbingtap属性设定为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;
        }
    }

效果

sample效果