博得概况  多媒体简介  我们的服务  案例展示  联系方式  留言板 招贤纳士 | 设为首页 | E-MAIL
 

  如何在微信小程序中制作圆 重庆动画公司http://www.cqredtime.com
 
今天小编和大家一起学习的是如何在 微信 小程序中制作圆点沿着圆圈运动的动画?重庆动画公司http://www.cqredtime.com 一定有许多朋友很是期待吧,下面就是详细的内容。

微信
软件版本:6.5.23
软件大小:53.74MB
软件授权:免费
适用平台:Android

立即下载
  首先用 wx.createAnimation(OBJECT) 创建一个动画实例,OBJECT 里的参数是设置动画 duration、timingFunction、delay、transformOrigin;然后通过 export 方法将动画实例输出并 setData 给组件 data{} 里的 animation 属性。重庆动画公司http://www.cqredtime.com

  在开始说下面的小动画之前需要注意以下几点:

  小程序官方动画 API 文档的最下面的 bug&tip :

  bug: IOS/Android 6.3.30 通过step()分隔动画,只有第一步动画能生效。

  在小程序动画文档里的 wx.creatAnimation(OBJECT) 这个方法提供的参数没有类似 css3 animation-iteration-count 这样的参数。

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


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

WXML:

  两个 view 标签,一个是路径圆圈,重庆动画制作http://www.cqredtime.com 圆圈可以用背景图来做也可以用 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 这个参数所设置的是小圆点旋转时的原点,默认是元素中心,重庆动画公司http://www.cqredtime.com 下面设置的就是路径圆圈的中心,具体参数需要根据路径圆圈不来算。

  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 作基本重庆动画制作http://www.cqredtime.com 增加量, ++i 累加,这样在正常的 transformOrigin 下整个动画就是由每个小动画 rotate(6) 组成的。

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

本文出处:重庆动画公司http://www.cqredtime.com
  2018-01-19


2012 WWW.CQREDTIME.COM All RIGHTS RESERVED.   E-MAIL:cqredtime@163.com
重 庆 博 得 文 化 传 媒 有 限 公 司 版 权 所 有
客户服务热线:86-023-68781096 13452883959 15320360086  客服QQ:3775303
地址:重庆市九龙坡区杨家坪四季花园2-20-15  www.cqredtime.com
重庆多媒体制作 重庆影视制作 电子楼书 FLASH动画 3D影视制作 虚拟现实 360度全景演示 产品演示