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

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

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

wxml：

我在做动画

旋转

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://tuicool.com/articles/neqMVr

* step-start 动画一开始就跳到http:// 100% 直到动画持续时间结束 一闪而过

* step-end 保持 0% 的http://样式直到动画持续时间结束 一闪而过

*/

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({

//输出动画

animation: this.animation.export()

})

}

})

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。