小程序设置动画效果

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

1）首先点击进入主页面的“设置”按钮。2）在设置列表中找到“通用”选项，然后点击打开3）接下来在通用列表中找到“辅助功能”选项，并且点击打开4）随后在辅助功能列表中找到“减少动态效果”选项，点击进入5）最后把减少动态效果的开关打开，这样就可以关闭手机显示的一些动画效果了。打开“设置”，进入“开发者选项”，将“窗口动画缩放”、“过渡动画”缩放调整为1.5x，而“Animator时长缩放”保持默认的1x，原因是“Animator时长缩放”是关联下滑通知栏的反应速度，所以不需要调整其速率。

有些小伙伴可能不知道“开发者选项”如何开启，在“设置”，进入“关于手机”，选择“软件信息”，找到“编译编号”，连点多次之后就能启用开发者模式。

---