动画
wx.createAnimation()创建一个动画实例。参数duration动画持续的时间默认400,timingFunction定义动画效果默认‘linear’,delay动画延迟时间默认0,transformOrigin设置transform-origin。
timingFunction的有效值linear从头到尾速度相同,ease低速开始然后加快在结束前变慢,ease-in动画以低速开始,ease-in-out动画以低速开始和结束,ease-out动画以低速结束,step-start动画第一帧跳至结束状态直到结束,step-stop动画一直保持开始状态最后一帧跳到结束状态
animation
样式方法opacity透明度,backgroundColor背景色,width宽度值,height高度值,top上边值,right右边值,bottom下边值,left左边值
旋转方法rotate旋转-180~180,rotateX在X轴旋转的角度-180~180,rotateY在Y轴旋转的角度-180~180,rotateZ在Z轴旋转的角度-180~180,rotate3d三个方向的旋转
缩放方法scale表示XY轴的缩放倍数,scaleX表示X轴的缩放倍数,scaleY表示Y轴的缩放倍数,scaleZ表示Z轴的缩放倍数,scale3d三个方向的缩放倍数
偏移translate表示XY轴的平移距离,translateX表示X轴的偏移距离,translateY表示Y轴的偏移距离,translateZ表示Z轴的偏移距离,translate3d表示三个方向的偏移距离
倾斜skew表示XY轴的倾斜度数-180~180,skewX表示X轴的倾斜度数-180~180,skewY表示Y轴的倾斜距离-180~180
矩阵变形matrix组合动画,matrik3d组合3d动画
animation.step()来表示一组动画。参数ducation动画持续的时间
animation.export()输出动画。
//创建animation对象 var animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease' }) this.animation = animation; //定义一个XY缩放2倍的动画 animation.scale(2,2).step({duration: 1000}); //定义一个XY平移100的动画 animation.translate(100,100).step({duration: 1000}); //定义了一个透明度为0.2宽度为300的动画 animation.width(300).opacity(0.2).step({ duration: 3000, timingFunction: 'ease-in'}); //页面加载完2s后执行动画 setTimeout(function(){ that.setData({ animationData: animation.export() }) },2000)