[微信小程序系列] 动画案例之圆点沿着圆圈运动

做者：滴滴公共前端团队 - Tawnia

滴滴做为第一批的小程序开发者，咱们也大量地用到了动画，积累了一些经验，因为市面上的小程序动画案例不多，咱们也分享一部分咱们作过的案例：

首先用 wx.createAnimation(OBJECT) 建立一个动画实例，OBJECT 里的参数是设置动画 duration、timingFunction、delay、transformOrigin；而后经过 export 方法将动画实例输出并 setData 给组件 data{} 里的 animation 属性。

在开始说下面的小动画以前须要注意如下几点：

1. 小程序官方动画 API 文档的最下面的 bug&tip ：
   bug: IOS/Android 6.3.30 经过step()分隔动画，只有第一步动画能生效。
2. 在小程序动画文档里的 wx.creatAnimation(OBJECT) 这个方法提供的参数没有相似 css3 animation-iteration-count 这样的参数。

接来就说说下面的小动画案例：

如上图咱们要实现小圆点沿着圆圈轨迹运动的小动画。

WXML:

两个 view 标签，一个是路径圆圈，圆圈能够用背景图来作也能够用 border-radius 来实现；一个是圆点。

<view class='animation-box'>
    <view class = 'time-crl-path'></view>
    <view class = 'crl-dot' animation='{{dotAnData}}'></view>
</view>复制代码

WXSS:

基本设置定位，这里只放宽高。

.animation-box{
    width: 176px;
    height:176px;
}
.time-crl-path {
    width: 176px;
    height: 176px;
    ......
}

.crl-dot {
    width: 9px;
    height:9px;
    ......
}复制代码

JS:

transformOrigin 这个参数所设置的是小圆点旋转时的原点，默认是元素中心，下面设置的就是路径圆圈的中心，具体参数须要根据路径圆圈不来算。

Page({
  data: {
        dotAnData: {}
  },
  onShow: function(){
        var i = 0
        var dotAnData =wx.createAnimation({
            duration: 1000,
            transformOrigin: '4px 91px'
        })

        dotAnFun =setInterval(function() {
             dotAnData.rotate(6 * (++i)).step()
             that.setData({
                  dotAnData: dotAnData.export()
             })
        }.bind(that), 1000)
   }
})复制代码

从上面的代码能够看出是使用 setInterval() 解决了文章开头的两项注意事项。

那么为何不执行 rotate(360) 或者 rotate(180) ？
这就要注意官方文档的 rotate(deg) 的 deg 的取值范围 -180 ~ 180，从原点顺时针旋转一个 deg。还有就是 rotate animation 在运动角度幅度较大的状况下轨迹会有偏离，就是说在正常设置的 transformOrigin 的状况下圆点运动轨迹会有偏离。

因此上面的小动画案例就是把它拆分，定义 deg 为 6 做基本增长量， ++i 累加，这样在正常的 transformOrigin 下整个动画就是由每一个小动画 rotate(6) 组成的。

目前小程序动画对于动画效果仍是有限制的，不过简单的动画效果是没问题的啦~

---

欢迎关注DDFE
GITHUB：github.com/DDFE
微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码