小程序的动画效果
制作动画的方法 分为几个步骤
1.创建一个动画实例
var animation=wx.createAnimation() 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性
所以在 wxml 文件上,我们需要在组件上绑定 animation 属性 <view animation="{{a}}"><view>
在 js文件上 data 属性 a:{}
为什么要将数据给 animation 属性 因为我么需要通过数据来进行动画与页面的交互
2. 通过实例的方法来实现动画,两种方法
第一种
animate.translateX(100).step()
animate.translateY(100).step() //先向右边偏移,在向下偏移 动画的逐个执行
第二种
animate.translateX(100).translateY(100).step() // 向右 向下 同时执行
最后,this.setData({
a:animate.export() //最后把这个动画导出,然后让这个数据传递给组件中去,这样组件就拥有了这个方法
})