| |
如何在微信小程序中制作圆 重庆动画公司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 |
|
 |
