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

2023-09-23 08:50:06 53

//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,centerright是水平方向取值，对应的百分值为left=0%;center=50%;right=100% *topcenterbottom是垂直方向的取值，其中top=0%;center=50%;bottom=100% */ transformOrigin:'lefttop0', success:function(res){ console.log(res) } }) }, /** *位移 */ translate:function(){ //x轴位移100px this.animation.translate(100,0).step() this.setData({ //输出动画 animation:this.animation.export() }) } })

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

热门推荐

随机推荐

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