小程序设置动画效果

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

简单总结一下微信动画的实现及执行步骤。

实现方式官方文档是这样说的：

①创建一个动画实例 animation。

②调用实例的方法来描述动画。

③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性 ...

注意:

前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。

当然如果有多个元素的animation="{{ani}}"，也都会执行这个动画规则。

简单介绍一下例子中的几个参数和方法（其他的详见官方文档）：

首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为：

然后，在需要设置动画的相应的标签里，调用动画就可以了

比如需要给div添加动画效果：

div{

animation：1s 2s 动画名称 运动方式 动画执行的次数

}

详细分析：

首先 wxml 中 pupContent 初始化信息为高度为0 display: 为 noneclick 为 false

， click 这个来判断 display: 为 block 还是为 none （即： block 为换行显示， none 为不显示，把视图隐藏了） option 用来判断是否调用打开的动画，或者关闭的动画

第一次点击 click 变为 true option 变为 true 这时候 pupContent 的 display: 为 block 高度由动画变为 800rpx

第二次点击阴影部分 首先设置了 option 为 false option 为 false 的话先走的动画是 pupContent 由 800 的高度变为 0 .然后在设置click为false就隐藏掉了

小程序帧流是指在小程序中控制动画的显示频率，以达到更加流畅的动画效果。具体使用方法如下：

1. 在小程序中引入wx.createAnimation()方法创建动画对象。

2. 使用setInterval()或requestAnimationFrame()方法控制动画的帧率。setInterval()方法会在指定的时间间隔内循环执行动画，而requestAnimationFrame()方法则会在浏览器下一次重绘之前执行动画。

3. 在动画中使用step()方法更新动画状态，将动画状态传递给animation对象。

4. 使用export()方法将动画对象导出，以便在小程序中使用。

以下是示例代码：

```

// 创建动画对象

var animation = wx.createAnimation({

duration: 1000,

timingFunction: 'ease',

delay: 0,

transformOrigin: '50% 50% 0'

})

// 控制帧率

setInterval(function () {

// 更新动画状态

animation.translateX(100).step()

animation.rotate(360).step()

// 导出动画对象

wx.exportAnimation({

animationData: animation.export()

})

}, 1000 / 60)

```

---