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

发布时间：2020-12-14 20:12:05 所属栏目：资源来源：网络整理

导读：微信小程序——简易动画案例 wxml： js： },onReady: function () { // 页面渲染完成 //实例化一个动画 this.animation = wx.createAnimation({ // 动画持续时间，单位ms，默认值 400 duration: 400,/** http://cubic-bezier.com/#0,.58,1 linear 动画一直较

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

wxml：

js：

},onReady: function () {
// 页面渲染完成
//实例化一个动画
this.animation = wx.createAnimation({
// 动画持续时间，单位ms，默认值 400
duration: 400,/**

http://cubic-bezier.com/#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({
//输出动画
animation: this.animation.export()
})
}

})

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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

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