你好，我是李艺。上节课我们主要学习使用了容器组件。

这节课我们学习在一个相对独立的页面里面如何使用动画效果。

优美流畅的动画可以显著提升用户体验，尤其是互动式动画，它在用户操作某些页面元素的时候可以联动地改变页面上的其他的元素，从而使页面整体上呈现出一种很棒的互动式、反馈式动画效果，根据滚动位置而改变动画进度。为满足这个场景需求，小程序从2.9.0基础库版本开始提供了关键帧动画技术，对于运行时性能要求较高的一个场景又可以通过编写WXS脚本在视图层内操作组件样式，以完成动画的实现。如现在我们在屏幕上看到的小程序有四种实现动画的方式：

第一种是使用Animation对象，实现了一个CSS动画；

第二种是使用页面或组件对象，拥有的animate方法实现的关键帧动画；

第三种是使用滚动事件驱动的响应式动画；

最后一种是通过WXS脚本，实现了一个样式动画。

对于第一种是小程序最早支持的一种动画方式，它的效率是最低的。第二种以animate方法实现的关键帧动画，它拥有更好的性能和更容易控制的接口，它是目前推荐选择的方式，从效率上来讲，它并不是最高效的一种方式。第三种以滚动事件驱动的响应式动画，它的用户体验感最好，使用也简单，是一种推荐的低成本创建响应式页面效果的一种方式。第四种也是最后一种，通过WXS脚本实现样式动画，这种方式效率最高，因为它不需要逻辑层的参与改变视图层组件的样式，在视图层里边就可以自己完成动画了。

下面我们看项目实践，具体看一下这几种动画的具体实现方式以及运行效果。

首先看实践一，使用CSS动画。在商品详情页面里面有一个onAnimationFinish，这个方法是swiper组件在一个动画结束时触发的事件句柄函数，它有两个方法可以调用一个是animation1，另一个是animation2，我们现在在屏幕上看到的JS代码，主要是这两个方法其中animation1它实现的是CSS动画，animation2实现的是关键帧动画。这两个方法在onAnimationFinish方法里面可以彼此的进行替换，本质上所谓的CSS动画它是先创建一个animation对象，然后通过这个对象提供的方法生成一系列的动画样式，然后再将改变后的动画样式通过setData方法渲染到这个视图里面去，这种动画方式与H5里面HTML5里面实现的动画原理是一致的。如果这个小程序是从HTML5移植过来的话，使用这种方式可以降低移植门槛，但是因为它使用了setData，所以它动画效率其实并不是最理想的。

关键帧动画是通过内置接口animation实现的，这个接口在组件以及页面对象上都是存在的，它允许开发者将对象的动画状态定义为一个一个的关键帧，动画就是在这些关键帧中间进行变换的，这种方式动画目标更明确，对象的状态也更容易控制。现在我们在屏幕上看到的截图是onAnimationFinish，它绑定在单次轮播动画结束的事件上的一个代码，我们可以看到这是它的一个绑定的方式。

接下来我们开始代码演示。

我们需要在我们的商品详情页里面，在这个goods目录下面这有一个pages里面有个detail。这是我们的商品详情页，这个页面里面首先在JS里面需要实现三个方法：

第一个方法是animation1，这个是用于实现CSS动画。

第二个是animation2，这个实现的是关键帧动画，我们可以看到，在这个地方我们调用的是animate，这是页面上面的一个动画接口，它的第二个参数是一个数组。数组里边，每一个都是对象，每一个对象其实是一个关键帧的状态，它是定义这些关键帧的状态然后在这些状态之间进行一个动画的切换，最后面这是它的一个在动画完成以后所要执行的一个回调代码。

最后要实现的就是一个onAnimationFinish 。这是一个事件回调句柄，它需要在我们swiper组件里面，然后动画完成的时候去调用它，我们可以将这三个方法给它拷贝过来。

这三个方法，第一个方法我们可以再看一下，这个是animation它本身是一个对象。这个对象在我们这个地方可以检索一下，它目前是不是存在，这个对象是在页面的onLoad周期函数里面，然后进行一个初始化的。它通过这个createAnimation的一个小程序接口然后创建的一个实例，一般情况下我们将页面周期函数放在所有的方法的下面，把我们自定义的方法就往上放，这样的一种顺序去排序。在这个地方我们可以看到这个代码已经存在了，创建这样的一个对象，然后创建以后我们在animation1这个里面就可以直接去使用它了。

首先我们要调用animation1看它的一个效果，这个地方我们也需要一个绑定，要绑定在这个事件对象上面，这地方有一个catchanimationfinish，在动画结束的时候去执行这个回调函数，这个代码已经写完了。下面我们测试一下animation1动画的一个表现。

编译模式我们可以选择商品详情页，如果是你那个地方没有的话可以通过下面这个添加编译模式进行添加，这个动画已经呈现了。然后我们可以通过在调试区有一个是Performance面板、性能面板，可以通过这个面板去查看我们动画的一个运行时的执行效率，打开这个面板以后单击录制。然后让这个页面去运行一段时间，它在收集运行时的一个数据，感觉可以的时候就单击Stop让它停止，现在我们可以看到上面都有一个时间轴对吧，然后有一些小山峰。这些小山峰其实我们这个代码在执行，然后凡是有红三角的一个地方基本上标志着这个地方代码的任务，它的执行比较费时，就有一个警示的作用。我们可以选择 选择以后然后去看它这个地方的一个执行的情况，我们还可以再录制一下、停止，然后我们如果是用触控板的话。可以放大以及缩小我们下面的任务的视图，你可以鼠标放上去可以看到它里边，上面会指示它这个任务所花费的一个时间，我们这个地方显示这个任务大概花了是100，下面也有一个总览图。大概是157ms 157毫秒，这是它的一个执行的情况，可以帮助我们简单地去了解我们这个动画它的执行的效率是怎么样的。

下面我们将我们调用的动画函数进行一个修改，我们刚才用的是animation1现在我们把1给它注掉 我们使用2然后再刷新测试一下，然后开始录制，这个动画效果跟刚才小有差别，当然主体的动画效果是类似的，然后停止，停止以后我们可以看它的一个执行的情况，继续放大，放大之后可以看它的一个执行 大概是1.52ms ，这个时间是非常短的，所以它在这个地方 在视图上看起来非常小。然后它还没 我们这个地方可以看到，它已经没有刚才看到的红三角了，对吧。因为红三角一般指示着这个任务它执行是比较慢 比较卡顿的对吧，这个地方我们可以看到我们的方法animation2。我们看到它执行时间大概是9.35ms，它所在的任务大概花了是10.93ms，这个还是可以的。就是我们整个的一个动画它所要执行所花费的时间大概是11毫秒花费的时间性能还是可以的，从Performanc面板的一个测试结果我们可以看出来这两种动画一个是animation1，一个是animation2，前面这个是CSS动画，后面这个是关键帧动画，这两个动画它的执行效率是不一样的。第二个相比来说比第一种它效率要更高一些。