微信小程序 动画的简单实例

微信小程序——简易动画案例

wxml：

<view class="container">
<view animation="{{animation}}" class="view">我在做动画</view>
</view>
<button type="primary" bindtap="translate">旋转</button>
 

js：

//js
Page({
 data: {

 },
 onReady: function () {
 // 页面渲染完成
 //实例化一个动画
 this.animation = wx.createAnimation({
 // 动画持续时间，单位ms，默认值 400
 duration: 400,
 /**
 * http://cubic-bezier.com/#0,0,.58,1 
 * linear 动画一直较为均匀
 * ease 从匀速到加速在到匀速
 * ease-in 缓慢到匀速
 * ease-in-out 从缓慢到匀速再到缓慢
 * 
 * http://www.tuicool.com/articles/neqMVr
 * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
 * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
 */
 timingFunction: 'ease',
 // 延迟多长时间开始
 delay: 100,
 /**
 * 以什么为基点做动画 效果自己演示
 * left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
 * top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
 */
 transformOrigin: 'left top 0',
 success: function (res) {
 console.log(res)
 }
 })
 },
 /**
 *位移
 */
 translate: function () {
 //x轴位移100px

 this.animation.translate(100, 0).step()
 this.setData({
 //

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！