uniapp旋转动画 uniapp 实现点击图标旋转90度

本文章实现的效果是：点击按钮，图标顺时针旋转90度，再点击时，逆时针旋转回去，效果图如下：

在 uniapp 中，有两种动画实现方式：

• 直接使用 CSS 动画
• 通过 uniapp 提供编程式创建动画 uniapp 提供createAnimation内置函数，用于创建一个动画实例animation（本文章使用的方式）

html内容

<view :animation="animationData" @click="openAdd()">
   <u-icon  color="#ccc" size="16"   >u-icon>
view>

• u-icon 是uniapp 提供的显示图标的组件
• 这里的核心就是 view 的 animation 属性

JS 动画实现

<script>
export default {
  data() {
      return {
          animationData: {},
          isRote: false,
          animation: null,
  },
  onLoad() {},
  methods: {
   
      startAnimation() {
          //旋转角度 
		  let rota = 90;
		  //判断是否展开
		  if(this.isRote){
			  rota = 0;
			  //标记未展开
			  this.isRote = false;
			  //隐藏需要隐藏的内容
			  this.showAddPople = false;
		  }else{
			  this.isRote = true;
			  //显示隐藏的内容
			  this.showAddPople = true;
		  }
		 //创建动画
		this.animation = uni.createAnimation();
		//设置旋转角度 
        this.animation.rotate(rota).step()
        //导出动画
        this.animationData = this.animation.export()
          
      },
}
</script>

平移

this.animation.translate(
		Math.random() * 100 - 50, 
		Math.random() * 100 - 50)
		.step()
this.animationData = this.animation.export()

缩放

this.animation.scale(Math.random() * 2).step()
this.animationData = this.animation.export()

旋转与缩放同时执行

this.animation.rotate(Math.random() * 720 - 360)
					.scale(Math.random() * 2)
					.step()
 this.animationData = this.animation.export()

先旋转后缩放

this.animation.rotate(Math.random() * 720 - 360)
			  .step()
			  .scale(Math.random() * 2)
			  .step()
this.animationData = this.animation.export()