Taro-react 微信小程序Taro.createAnimation实现动画，动画过渡没实现的问题。

原创于 2025-08-01 14:37:21 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#taro #react.js #微信小程序

一、微信小程序动画实现过程：

初始化动画实列

  // 1. 初始化动画实列
  const anim = Taro.createAnimation({
    duration: 200,
    timingFunction: 'linear',
    delay: 0,
    transformOrigin: '50% 50%'
  })
  
 const [animationData, setAnimationData] = useState<any>(anim)

在标签上面绑定动画实列


 <View animation={animationData}>
	一些内容
 </View>

<View onClick={onShakeView}>开始移动</View>

实现动画效果

  // 实现左右移动
  const onShakeView= () => {
    anim.translateX(20).step()
    anim.translateX(0).step()
    anim.translateX(20).step()
    anim.translateX(0).step()
    setAnimationData(anim.export())
  }

二、完整代码

import Taro from "@tarojs/taro"
import { useState } from "react"

export default = () => {

 const anim = Taro.createAnimation({
    duration: 200,
    timingFunction: 'linear',
    delay: 0,
    transformOrigin: '50% 50%'
 })
  
const [animationData, setAnimationData] = useState<any>(anim)

// 旋转动画
 const rotate = () => {
   anim.rotate(Math.random() * 360).step()
   setAnimationData(anim.export())
 }
 
 // 缩放动画
 const scale = () => {
   animation.scale(Math.random() * 1.5 + 0.5).step()
   setAnimationData(anim.export())
 }
 
// 移动
 const onShakeView= () => {
   anim.translateX(20).step()
   anim.translateX(0).step()
   anim.translateX(20).step()
   anim.translateX(0).step()
   setAnimationData(anim.export())
 }

// 组合动画
const comboAnimation = () => {
    anim
      .rotate(Math.random() * 360)
      .scale(Math.random() * 1.5 + 0.5)
      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
      .step()
    setAnimationData(animation.export())
  } 

// 更多示列，可自行测试

  return (
	<View>
		<View animation={animationData}>
		一些内容
		</View>
		<View onClick={onShakeView}>开始移动</View>
		<View onClick={scale }>缩放</View>
		<View onClick={rotate }>旋转</View>
	</View>
   )
 }

三、细节，踩过的坑

一定要先初始化动画实列， useState默认不能为null、undefind，不然动画没有过渡效果

  const anim = Taro.createAnimation({
    duration: 200,
    timingFunction: 'linear',
    delay: 0,
    transformOrigin: '50% 50%'
  })
  
 const [animationData, setAnimationData] = useState<any>(anim)

关于多次设置同一个动画属性：移动，每一个步骤后面都要加step

// 多次移动的正确写法
 const onShakeView= () => {
   anim.translateX(20).step()
   anim.translateX(0).step()
   anim.translateX(20).step()
   anim.translateX(0).step()
   setAnimationData(anim.export())
 }
 
// 错误的写法， 这样写没有动画效果
 const onShakeView= () => {
   anim.translateX(20)
   anim.translateX(0)
   anim.translateX(20)
   anim.translateX(0).step()
   setAnimationData(anim.export())
 }
  
 const onShakeView= () => {
   anim.translateX(20).translateX(0).translateX(0).translateX(0).step()
   setAnimationData(anim.export())
 }

// 用一个动画属性不能连写，每一个后面要加step