dlt.createAnimation

Introduction

Create an animation instance animation.

Parameters

Object object

Return Value

Animation

Explanation of object parameters

Property	Type	Required	Default	Description
duration	Number	No	400	Duration of the animation (in ms)
timingFunction	String	No	'linear'	Defines the animation effect
delay	Number	No	0	Delay time of the animation (in ms)
transformOrigin	String	No	'50% 50% 0'	The origin of the animation transformation

Valid values for timingFunction

Value	Description
linear	Starts and ends at the same speed
ease	Starts slowly, then speeds up, and slows down at the end
ease-in	Starts slowly
ease-in-out	Starts and ends slowly
ease-out	Ends slowly
step-start	Jumps to the end state at the first frame and stays there
step-end	Stays in the start state and jumps to the end state at the last frame

Sample Code

<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 can also be 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);
    }
});