Animation

Common Ways to Create Interface Animations

In a mini-program, you can typically use CSS gradients and CSS animations to create simple interface animations.

You can also use the dlt.createAnimation interface to dynamically create simple animation effects.

Parameter Descriptions

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

Valid timingFunction Values

Value	Description
linear	Constant speed throughout the animation.
ease	Slow start, then fast, then slow finish.
ease-in	Slow start for the animation.
ease-in-out	Slow start and slow finish.
ease-out	Slow finish for the animation.
step-start	Jumps to the end state on the first frame and stays in that state until the end.
step-end	Stays in the start state until the last frame, then jumps to the end state.

Example 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 options: 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);
  },
});