重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
微信小程序——简易动画案例
创新互联公司-专业网站定制、快速模板网站建设、高性价比潼南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式潼南网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖潼南地区。费用合理售后完善,十多年实体公司更值得信赖。
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://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() }) } })
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!