type: FrameAnimation

通过各类样式属性的应用，使用多张图片实现逐帧动画效果, 用户可以自定义帧动画的执行间隔、执行次数以及设置结束的触发事件。

demo

props

名称	类型	默认值	可选值	必填	描述
images	array	[]	-	否	帧动画地址数组
interval	number	100	-	否	帧动画播放间隔，单位毫秒
repeatCount	number,string	1	-	否	帧动画播放重复次数
repeatMode	string	restart	restart,reverse	否	帧动画播放模式
autoplay	boolean	true	-	否	是否开始自动逐帧动画
scaleType	string	centerCrop	fitCenter,centerCrop	否	帧动画铺开方式，铺满且保持原有比例 fitCenter，铺满不保持原有比例有裁剪 centerCrop

events

名称	参数	参数说明	event说明
onEnd	-	-	播放完成后可触发该事件，标识为播放完成状态
onLoaded	-	-	组件加载完成后可触发该事件（仅在初次渲染完成时触发一次）

样例（example）

{
    "type": "FrameAnimation",
    "componentId": "example-frame-animation",
    "styles": {
        "position":"absolute",
        "top": "300dp",
        "right": "160dp",
        "height": "50dp",
        "width": "100dp",
        "scale-type": "fixCenter",
        "border-bottom-right-radius": "10dp"
    },
    "props":{
        "images": [
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_010.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A29Z%2F-1%2F%2Fedd8190a94350849d379bb7c2cafd9d9e43b1e4a6bb8668a1d4c795a1aa00152",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_009.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A29Z%2F-1%2F%2Fc69615be00bc8a19278c1d0f5616d943392d1b83739e54c540db4e32fc04aafd",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_008.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A29Z%2F-1%2F%2Fde00fa648f6d1e6fb6fc0131c8ceea3f24fa0c1234085739a5790f37a8241f0a",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_007.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A29Z%2F-1%2F%2F6b3829c8e1d100e3bf6f11aadc7a0116a95518d473956b615a13b284b9f73bca",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_006.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A29Z%2F-1%2F%2F6f8dbc95cfb5d076b63720aad53c22880b8937159b119b940dc2530d629435b9",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_005.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A28Z%2F-1%2F%2Fc37e525f04eed03c693198b1cea702e9d7710ce005c2a697629e7d6fa91c680e",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_004.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A28Z%2F-1%2F%2Fd2fc9994800c038198fc78a747d092462d07cc83de6f0b85cb511f3d8561b2d2",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_003.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A28Z%2F-1%2F%2F6a75f9a5401c43c240ee092efa8b1163b5604b096e6bc6efa23b5d178a19a900",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_002.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A28Z%2F-1%2F%2F9af8f794e69c3027d084d067a16dd88af08c488f75b544b35bd08dc4510fd6d8",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_001.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A28Z%2F-1%2F%2Fd3ba3aa842a9bfedb8e4fe49bd5bac2ebc96b01e68670982778664d22d402711",
            "https://dbp-resource.gz.bcebos.com/253dc0d3-76b4-94d2-f577-45e1a1a5795c/%E5%80%92%E8%AE%A1%E6%97%B6_000.png?authorization=bce-auth-v1%2Fa4d81bbd930c41e6857b989362415714%2F2019-12-11T02%3A37%3A28Z%2F-1%2F%2Fa6157efbb5487cffdaaaf4dc12adb15c9027b07e78ca79fcdf327c0f04002f69"
        ],
        "interval": 100,
        "repeatMode": "reverse",
        "repeatCount": "infinite"
    },
    "events": {
        "onEnd": [{
            "type": "SendEvent",
            "componentId": "example-frame-animation"
        }]
    }
}