动画

createAnimation(Object object)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

OBJECT 参数说明:

属性 类型 默认值 是否必须 说明 支持平台
duration number 400 动画持续时间,单位 ms 都支持
timingFunction string 'linear' 动画的效果 微信,支付宝
delay number 0 动画延迟时间,单位 ms 都支持
transformOrigin string 百度为‘50% 50% 0’ 设置transform-origin 都支持

timingFunction 的合法值:

值 说明
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始,然后加快,在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
'ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态,最后一帧跳到结束状态

animation

样式:

方法 参数 说明
opacity value 透明度,参数范围 0~1
backgroundColor color 颜色值
width length 如果传入 number 则默认使用 px,可传入其他自定义单位的长度值
height length 同上
top length 同上
left length 同上
bottom length 同上
right length 同上

旋转:

方法 参数 说明
rotate deg deg 范围 -180 ~ 180,从原点顺时针旋转一个 deg 角度
rotateX deg deg 范围 -180 ~ 180,在 X 轴旋转一个 deg 角度
rotateY deg deg 范围 -180 ~ 180,在 Y 轴旋转一个 deg 角度
rotateZ deg deg 范围 -180 ~ 180,在 Z 轴旋转一个deg角度
rotate3d (x, y , z, deg) 同 transform-function rotate3d。

缩放:

方法 参数 说明
scale sx,[sy] 只有一个参数时,表示在 X 轴、Y 轴同时缩放 sx 倍;两个参数时表示在 X 轴缩放 sx 倍,在 Y 轴缩放 sy 倍
scaleX sx 在 X 轴缩放 sx 倍
scaleY sy 在 Y 轴缩放 sy 倍
scaleZ sz 在 Z 轴缩放 sy 倍
scale3d (sx,sy,sz) 在 X 轴缩放 sx 倍,在 Y 轴缩放sy 倍,在 Z 轴缩放 sz 倍

偏移:

方法 参数 说明
translate tx,[ty] 只有一个参数时,表示在 X 轴偏移 tx;两个参数时,表示在 X 轴偏移 tx,在 Y 轴偏移 ty,单位均为 px。
translateX tx 在 X 轴偏移 tx,单位 px
translateY ty 在 Y 轴偏移 tx,单位 px
translateZ tz 在 Z 轴偏移 tx,单位 px
translate3d (tx,ty,tz) 在 X 轴偏移 tx,在 Y 轴偏移t y,在Z轴偏移 tz,单位 px

倾斜:

方法 参数 说明
skew ax,[ay] 参数范围 -180 ~ 180。只有一个参数时,Y 轴坐标不变,X 轴坐标延顺时针倾斜 ax 度;两个参数时,分别在 X 轴倾斜 ax 度,在 Y 轴倾斜 ay 度
skewX ax 参数范围 -180 ~ 180。Y 轴坐标不变,X 轴坐标延顺时针倾斜 ax度
skewY ay 在参数范围 -180~180。X 轴坐标不变,Y 轴坐标延顺时针倾斜 ay 度

矩阵变形:

方法 参数 说明
matrix (a,b,c,d,tx,ty) 同transform-function matrix
matrix3d ax 同transform-function matrix3d

动画队列

调用动画操作方法后需要要调用 step() 来表示一组动画完成,在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画。step() 可以传入一个跟 my.createAnimation() 一样的配置参数用于指定当前组动画的配置。

Animation.step(Object object)

OBJECT 参数说明:

属性 类型 默认值 是否必须 说明 支持平台
duration number 400 动画持续时间,单位 ms 都支持
timingFunction string 'linear' 动画的效果 微信
delay number 0 动画延迟时间,单位 ms 都支持
transformOrigin string 接口调用失败的回调函数 都支持
complete function 50% 50% 0 设置transform-origin 都支持

timingFunction 的合法值:

值 说明
'linear' 动画从头到尾的速度是相同的
'ease' 动画以低速开始,然后加快,在结束前变慢
'ease-in' 动画以低速开始
'ease-in-out' 动画以低速开始和结束
'ease-out' 动画以低速结束
'step-start' 动画第一帧就跳至结束状态直到结束
'step-end' 动画一直保持开始状态,最后一帧跳到结束状态
<div>
    <button onTap={this.animation} animation={this.state.animation}>showModal</button>
</div>
    var animation = React.api.createAnimation();
    animation.rotate(90).translateY(10).step();
    animation.rotate(-90).translateY(-10).step();
        this.setState({
            animation: animation.export()
        });