微信小程序——简易动画案例
wxml：
js：
},onReady: function () {
// 页面渲染完成
//实例化一个动画
this.animation = wx.createAnimation({
// 动画持续时间，单位ms，默认值 400
duration: 400,/**
// 页面渲染完成
//实例化一个动画
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()
})
}
})
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：https://www.f2er.com/weapp/35855.html