小程序设置动画效果

        小程序和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}}"来显示

wx:if 与hidden都可以控制微信小程序中的元素的显示与否。

先演示下两种方式的山岁蠢使用

wx:if 的使用

wx:if 还可以配合wx:else 使用，用来显示隐藏不同的控件

当isShow true显示test 隐藏test1；当isShow false时显示test1 隐藏test

hidden的使用

当isHidden true时 test隐藏 isHidden false时 test显示

wx:if 和hidden的差别

wx:if的隐藏是不渲染控件

hidden的隐藏是渲染控件，但是不显示

看下面效果

在xml布局中可以看到显示了三个控件，hidden隐藏的部分依然被渲染。

在实际开发过程中，如果频繁切换的话，用wx:if因为逗陪要雀租频繁销毁和渲染，会消耗更多的资源。

如果不是频繁切换可以考虑使用wx:if，防止页面初始化时一下渲染那么多。

---