uniapp 旋转动画

在uniapp中实现旋转动画可以使用css的transform属性配合动画效果来实现。下面是一个简单的示例代码：

<template>
  <view class="container">
    <view class="box" :style="boxStyle"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      boxStyle: {
        transform: 'rotate(0deg)'
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.startAnimation()
    }, 1000)
  },
  methods: {
    startAnimation() {
      uni.createAnimation({
        duration: 1000,
        timingFunction: 'linear',
        delay: 0
      }).rotate(360).step()

      this.boxStyle = uni.createAnimation().export()
    }
  }
}
</script>

<style scoped>
.container {
  width: 200px;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

在上面的示例代码中，我们使用了uni.createAnimation()方法创建了一个动画对象，然后使用rotate()方法设置旋转角度为360度。通过调用step()方法生成动画数据，在将生成的动画数据赋值给boxStyle属性，从而触发动画效果。