微信小程序（学习九） -- 小程序动画实现旋转（animation @keyframes）

前端一定离不开一个东西，动画，无论是游戏还是app还是网页，都一定有动画效果，微信小游戏，小程序也有动画效果，这里有三种办法实现小程序的动画效果。

1、每帧setData()

onReady: function () {
    var that = this;
    setInterval(function(){
      that.onUpdate();
    },1000/60);
  },

  onUpdate: function() {
    this.setData ({
      angle: this.data.angle + 1,
    })
  }

data中的angle数据是用来设置上面图片的角度的，所以可以通过这种方法实现旋转效果，首先在启动页面的时候模拟一个update效果，每一帧执行一次。
该种方法非常耗费性能，不推荐使用。

2、使用Animation实现旋转效果

onReady: function () {
    var animation = wx.createAnimation({
      duration: 3000,
      timingFunction: "linear",
    });  
    this.animation = animation;

    animation.rotate(45).step();
    this.setData({
      animationData: animation.export()
    })

    this.interval = setInterval(function () {
      animation.translate(30).step();
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 3000)
  },

Animation不但可以实现旋转，也可以实现放大缩小，移动等动画。
该种方法可以使用，但是不推荐，因为我自己在使用的时候总遇到各种问题，显示有问题，旋转有问题等等，可能是我用的方法不对吧。而且通过定时器去做也是挺耗费性能的事情，微信小程序本来就性能低下。

3、使用keyfreams

.question .desc .image-rotate {
  position: absolute;
  z-index: 2;
  margin-left: 20rpx;
  margin-top: 20rpx;
  height: 280rpx;
  width: 280rpx;
  border-radius: 140rpx;
  animation: headRotate 6s linear infinite
}

/* 头像旋转效果  */
@keyframes headRotate{
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

在wxss中通过控制transform组件的属性，来实现旋转效果，我也是采用的这种方式，性能上面提示非常多，而且很简单。
css可以实现很多的效果，多看看css对于我们实现前端效果有很大帮助。