Taro 4.x 动画API详解：微信小程序、H5、React Native全面支持

Taro 的 Animation 对象为微信小程序、抖音小程序、H5、React Native、Harmony 等平台提供了丰富的动画方法。以下是常用的动画方法及其参数说明：

方法

1. export

   • 导出动画队列，每次调用后清除之前的动画操作。
   • 示例：

     const animation = Taro.createAnimation();
     animation.rotate(45).step();
     const animData = animation.export();
     

2. step

   • 标志一组动画的结束，完成后可以继续下一组动画。
   • 参数：option（可选），类型为 StepOption，包含 delay、duration、timingFunction、transformOrigin 等。
   • 示例：

     animation.rotate(45).step({ duration: 300 });
     

3. rotate

   • 旋转动画，从原点顺时针旋转一个角度。
   • 参数：angle（number），旋转角度，范围 [-180, 180]。
   • 示例：

     animation.rotate(90).step();
     

4. scale

   • 缩放动画。
   • 参数：sx（number），sy（number，可选），缩放倍数。
   • 示例：

     animation.scale(1.5, 1.5).step();
     

5. translate

   • 平移动画。
   • 参数：tx（number），ty（number，可选），平移距离，单位为 px。
   • 示例：

     animation.translate(30, 30).step();
     

6. opacity

   • 设置透明度。
   • 参数：value（number），透明度，范围 0-1。
   • 示例：

     animation.opacity(0.5).step();
     

示例代码

const animation = Taro.createAnimation({
  duration: 400,
  timingFunction: 'ease',
});

animation
  .rotate(45)
  .scale(1.5)
  .translate(30, 30)
  .opacity(0.5)
  .step();

this.setState({
  animationData: animation.export(),
});

参数说明

• StepOption
  • delay: 动画延迟时间，单位 ms。
  • duration: 动画持续时间，单位 ms。
  • timingFunction: 动画效果，值为 linear、ease、ease-in、ease-in-out、ease-out、step-start、step-end。
  • transformOrigin: 动画变换的基点。

通过这些方法，开发者可以在 Taro 项目中实现丰富的动画效果，提升用户体验。