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

末蓝、 2023-10-09 16:14 17阅读 0赞

本文章实现的效果是：点击按钮，图标顺时针旋转90度，再点击时，逆时针旋转回去，效果图如下：  
![在这里插入图片描述][025f11e2f411456dacaeda93265ce445.gif_pic_center]  
在 uniapp 中，有两种动画实现方式：

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

##### html内容 #####

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

##### JS 动画实现 #####

##### 平移 #####

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

[025f11e2f411456dacaeda93265ce445.gif_pic_center]: https://img-blog.csdnimg.cn/025f11e2f411456dacaeda93265ce445.gif#pic_center