动画

界面动画的常见方式

在小程序中，通常可以使用 CSS 渐变 和 CSS 动画 来创建简易的界面动画。

同时，还可以使用 dlt.createAnimation 接口来动态创建简易的动画效果。

参数说明

属性名	类型	必填	默认值	说明
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);
  },
});