小程序環形動畫效果

點擊的時候按照設定的角度進行旋轉。
具體代碼如下：

<view class='time' bindtap='leftStart'>
  <view class='big-circle red first'></view>
  <view class='big-circle green right first'  animation='{{leftAnimationData}}'></view>
  <view class='circle yellow first'></view>
</view>

/**index.wxss**/
.time{
  height: 180px;
  margin-top: 20px;
}
.big-circle{
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}
.red{
  background: red;
}
.green{
  background: green;
}
.yellow{
  background: yellow;
}
.circle{
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 10px 0 0 10px;
}
.first{
  left: 50rpx;
}
.right{
  clip: rect(0,auto,auto,75px);
}

//index.js
Page({
  leftMove:0,
  data: {
    leftAnimationData:{}
  },
  leftStart:function(){
    var animation=wx.createAnimation({
      duration:1000,
      timingFunction:"linear",
      delay:0
    })
    // this.animation = animation;
    animation.rotate(this.leftMove +=100).step();
    this.setData({ leftAnimationData: animation.export()});
  }
})

歡迎大家指導交流~