前端一定離不開一個東西，動畫，無論是遊戲還是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對於我們實現前端效果有很大幫助。