频道栏目
首页 > 微信学院 > 微信小程序 > 正文
微信小程序动画案例之圆点沿着圆圈运动新手教程
2018-04-25 09:23:28      个评论      
收藏   我要投稿

微信小程序动画案例之圆点沿着圆圈运动新手教程。作为第一批的小程序开发者,我们也大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们也分享一部分我们做过的案例:

首先用 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 来实现一个是圆点

    <code class="language-python"><view class="animation-box"></view></code>
    <code class="language-python"><view class="time-crl-path"></view></code>
    <code class="language-python"><view animation="{{dotAnData}}" class="crl-dot"></view></code>
    

    WXSS:

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

    1. .animation-box{
    2. width: 176px;
    3. height:176px;
    4. }
    5. .time-crl-path {
    6. width: 176px;
    7. height: 176px;
    8. ......
    9. }
    10.  
    11. .crl-dot {
    12. width: 9px;
    13. height:9px;
    14. ......
    15. }

    . JS:

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

    1. Page({
    2. data: {
    3. dotAnData: {}
    4. },
    5. onShow: function(){
    6. var i = 0
    7. var dotAnData =wx.createAnimation({
    8. duration: 1000,
    9. transformOrigin: '4px 91px'
    10. })
    11.  
    12. dotAnFun =setInterval(function() {
    13. dotAnData.rotate(6 * (++i)).step()
    14. that.setData({
    15. dotAnData: dotAnData.export()
    16. })
    17. }.bind(that), 1000)
    18. }
    19. })

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

    那么为什么不执行 rotate(360) 或者 rotate(180) ?

    这就要注意官方文档的 rotate(deg) 的 deg 的取值范围 -180 ~ 180,从原点顺时针旋转一个 deg。还有就是 rotate animation 在运动角度幅度较大的情况下轨迹会有偏离,就是说在正常设置的 transformOrigin 的情况下圆点运动轨迹会有偏离。

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

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

点击复制链接 与好友分享!回本站首页
上一篇:微信小程序开发之不能使用eval函数的问题解决方法
下一篇:小程序开发的注意点和快捷键分析
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站