小程序设置动画效果

        小程序和html页面有点不同，主要是使用js来实现动画效果，因为小程序自身有提供一种改孝察方式：wx.createAnimation(OBJECT)，它创建一个动画实例 animation ，通过调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性，step()来停止动画，step() 表示一组动画完成。

我们主要用wx:createAnimation({})来设置一些参数，例如持续时间、延时、加载方式等，用export()来开启动画，在页面上调用animation=”{{动画名称}}”。具体步骤：

1）创建动画对象并设置有效参数==>wx:createAnimation({参核茄数：有效值})

2）创建一组动画，调用step()来表示一组动画的完成==>动画对象.动画效果.step()

3）在data中设置一个对象vip_animal(自己随意慎瞎命名)，用该对象开启动画==>this.setData({vip_animal: animation.export()})

4）在页面上调用动画对象==>animation="{{vip_animal}}"

例子：淡入淡出动画效果（当淡入动画生效后1.5s，淡出动画开始生效）

在wxml上调用animation="{{vip_animal}}"来显示

如果需要设置循环效果。我们可以设置：（setAnimation为）

另一种方式：

在wxml上调用style="{{style_img}}"来显示

跳转的方法写成函数，然后函数执行第一行就调用这个 loading 状态为 true 然后写跳转的地址 跳转地址侍源后面改变这个 loading 状态为false

比如：

onClick(){

this.loading = true

window.location.href = 'www.baidu.com'

this.loading = false

}

其实这里的这个加载状态一直都是在页面上有写上去的 只是隐藏掉老轮态了桐卖 然后通过方法触发它就可以了的 希望能帮到你 我不是做小程序的 所以我并不清楚代码如何实现 只是有一点思路而已

通过执行其他动画的配置可以实现跨组件动画触发，以实现丰富的交互效果。执行其他动画的数量可无限叠加。配置 *** 作也非常简单。

添加执行其他动画配置，添加配置项以实现同时触岁侍发多个组件的多个动画，数量可以无限叠加圆禅。

选择所属组件，选择目标动画所属的组件。

选橘雀尘择目标动画，选择被执行的目标动画。

---