uniapp rotation animation uniapp realizes clicking the icon to rotate 90 degrees

The effect achieved in this article is: click the button, the icon rotates 90 degrees clockwise, and when you click again, it rotates back counterclockwise. The effect picture is as follows: In uniapp, there are two

animation implementation methods:

• Use CSS animations directly
• Provide programmatic animation creation through uniapp uniapp provides createAnimation built-in function to create an animation instance animation (the method used in this article)

html content

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

• u-icon is the icon display component provided by uniapp
• The core here is the animation property of view

JS animation implementation

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

translate

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

zoom

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

Rotation and scaling are performed simultaneously

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

Scale after rotation

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