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()