微信小程序——简易动画案例
wxml:
rush:xml;">
js:
rush:js;">
//js
Page({
data: {
},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()
})
}
})
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文地址:https://www.jb51.cc/weapp/35855.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。