dlt.createAnimation

简介

创建一个动画实例 animation。

入参

Object object

返回值

Animation

object 参数说明

属性	类型	必填	默认值	说明
duration	Number	否	400	动画持续时间（单位：ms)
timeFunction	String	否	'linear'	定义动画的效果
delay	Number	否	0	动画延迟时间（单位：ms)
transformOrigin	String	否	'50% 50% 0'	动画

timingFunction 有效值

值	说明
linear	以相同速度开始至结束
ease	慢速开始，然后变快，然后慢速结束
ease-in	慢速开始的过渡效果
ease-in-out	动画以低速开始和结束
ease-out	动画以低速结束
step-start	动画第一帧就跳至结束状态直到结束
step-end	动画一直保持开始状态，最后一帧跳到结束状态

示例代码

<view class="wrap">
    <view class="anim"  bind:tap="startToAnimate" :animation="animationData"></view>
</view>

Page({
    data: {
        animationData: {}
    },
    startToAnimate() {
        const animation = dlt.createAnimation({
            transformOrigin: '50% 50%',
            duration: 1000,
            // timingFunction 可选值还有 ease，ease-in，ease-in-out，ease-out,step-start，step-end
            timingFunction: 'linear',
            delay: 0
        });
        animation.rotate(90).translateY(10).step();
        this.setData({
            animationData: animation.export()
        });
        console.log('createAnimation', animation);
    }
});