下面我们看实践二：使用关键帧动画。

在用户主页页面里面实现了以滚动驱动的响应式动画相关的逻辑，可以在这个页面方法setUpAnimation里面可以看到，本质上响应式动画它也是一个通过animation接口实现的。

重点是在最后一个参数，一个叫做ScrollTimelineObject参数。这个参数它不一样，规定了将动画绑定在哪一个滚动的组件上以及滚动触发的边界值还有对应的时长等等这些信息。主要的JS代码如我们现在屏幕上看到的这些所示设置了两组响应式动画，一组依据scroller这个组件的纵向滚动而变化，另一组根据scroller2的横向滚动而变化。

下面开始实践二使用关键帧动画的一个代码显示。

我们需要在用户主页这个页面里面添加一个方法，先看一下最终的实现的代码，在JS文件里面有一个叫做setUpAnimate这样的方法，这个方法是在哪里调用的？它是在我们的onReady页面的周期函数里面在这个地方进行调用，将这个方法放在我们的项目里边，这个方法相对比较长一些，它主要是设置了两个响应式动画。前面这个地方这是有一个接口创建了SelectorQuery一个查询对象去查询scroller这样的一个组件，这个组件其实在我们的页面里面已经存在了。我们可以看一下它就是我们当前的scroll-view这样的一个组件，上下的滚动的组件，然后下面还有一个在这个地方有查询了一个scroller2 另外的一个组件，这个组件是一个横向滚动的组件，也是一个scroller的组件。

查询到组件以后它要做什么事情？我们看一下设置响应式动画的代码，主要是在这个里面在它查询以后的回调里面然后用animate去设置它这个对象。首先设置动画的一个对象就是这个要对谁起作用然后是它的一个关键帧。设置关键帧中间的一个状态，最后关键就是我们刚才提到的时间线的一个对象、滚动时间线对象，然后在这个里面我们需要去设置它受制于哪一个滚动组件。比如它受制于这个然后滚动的跨度，时间跨度这个范围是2000，开始的偏移量以及结束的偏移量还有滚动的这个方向一共是两个，一个是vertical这个是纵向的，还有一个horizontal是一个横向的。

下面我们看到另外的一个。这个地方，它后面的绑定，它有一个叫做scrollTimeLine的参数对象。然后这个地方它这个方向写的就是横向的一个滚动，这一共是两组动画的一个设定。这里边每一个animation、animate的一个调用，其实就是在实现一个动画 对一个组件这是一个nickname、这是一个search_input。这些其实在我们这个代码里面都有，我们可以拿id可以搜索到它，都是有的，这个代码现在这个地方已经添加了。

另外我们还需要在onReady里面去调用，在这个页面组件创建完成的时候去设置动画。我们需要在onReady这个周期函数里面去设置它，这个周期函数在我们这个里面好像还没有对吧。我们可以加一个onReady然后调用这个方法，这个代码已经准备好了现在我们重新编译，看一下它的一个效果。我们选择用户主页，然后进行测试、滚动，当我们滚动的时候我们可以看到用户的头像在缩小由方块变成一个圆形对吧。当滚动到一定程度的时候，我们可以看到这个昵称会向上滑出这个屏幕，同时input也就是我们搜索框它会从一边慢慢的显示出来对吧，看起来很有互动性这样的一种效果。

这就是我们要实现的一种联动的这样的一种效果，这种效果其实我们是可以通过参数相关的一些改变，去改变它的动画效果的。比如说我们刚才看到的这个地方，它是因它而改变对不对，像这个地方，假如我们要改它的变化的幅度比如这个地方是设置时长的，如果是我们给它改成1000，时间短了但是它动画所要改变的这些内容它其实没有变，相当于动画在更短的时间内完成。我们现在可以看到它这个效果其实就是昵称这个地方已经发生了改变了 。因为这个地方我们可以看到这个是针对avatar，然后头像所示的动画，因为我们这个时间改了，所以它动画的效果也改了，我们把给它恢复一下。

另外一个效果是在这个地方，一个横向滚动，当我们继续往这滚动的时候，这个地方有一个查看更多，但是效果不是特别明显。我们可以看一下它的一个参数，修改一下它的参数，这个是关于横向滚动响应式动画的一个设置。主要的代码是在这个地方，这个时间我们可以改长一点，然后再刷新一下。因为这种效果它本质上没有更好的一种办法，就是你如果想要一个体验更佳的一种用户体验的话，一种效果的话需要不断地去调这个参数，然后去让它呈现一个更好的效果。

现在我们可以看到这个地方当我们往这滑动的时候，它这个地方有一个半圆的弧形，对不对？这个其实就是我们在这个地方通过改变这个width，改变它的width，然后去实现的。transform是我们这个页面里边的一个组件，我们可以去搜索一下 看一下，是这个地方它的一个组件对吧，然后它文字的一个变化。这个地方伴随着一个文字的变化就是释放跳转，有这样的显示，这个变化它是在我们这个代码里边有另外的一个叫做scroll这个方法去判断。我们滚动的宽度以及屏幕的宽度，然后做的一个判断去改变的文本，这个是通过这个地方来改变的。它其实不是通过上面动画去改变的。在这个地方这有一个catchScroll它绑定了这样的一个滚动回调，所以它在我们横向滚动的时候会触发这样的一个函数的执行，这就是关于实践二的一个演示。

下面我们看实践三：使用WXS实现动画。仍然是在用户主页页面里边，当向页面底部滚动时，这上面有这个标签例如推荐 评价 订单这三个标签，它会随着我们用户向下滚动的时候而自动切换选择状态，这是我们要实现的一个效果。

这个效果是没有逻辑层代码参与的，它完全是由my.wxs这个脚本去实现的。在WXML这个代码里面滚动事件绑定在了一个WXS脚本导出的事件句柄函数，也就是一个叫做onScroll这样的一个函数上面了。也就是我们现在在屏幕上看到的这样的一个代码在scroll-view组件里面，我们可以看到它有一个叫做catchscroll它里面的一个值是my.onScroll，这就是绑定在我们WXS模块里面的方法上面 是这样的一种方式，my.wxs模块的代码。我们现在可以看到如屏幕上显示的这就是在WXS模块脚本的内部可以通过selectAllComponents或者是selectComponent这样的一个接口去查询页面上的组件，查询以后再通过setStyle方法设置组件的样式。另外我们还可以通过addCalss removeClass hasClass等方法进行类样式的一个操作，组件动画的一个本质其实就是不断地改变组件的一个样式，然后这个WXS脚本可以在这个视图层改变样式。它原理上就所有的动画其实都是可以由WXS脚本去改写。

现在我们开始实践三，使用WXS实现动画的一个代码演示。

首先我们要创建一个WXS这样的一个脚本模块，这样脚本模块的一个创建一般有两种方式：

第一种是我们直接写在小程序的页面里面， wxml这个页面里面。

另外一种方式就是写在一个独立的页面里边，然后再通过这种模块引入的方法去引用它。

我们接下来采用第二种方式就是为了让这个代码更简单清晰，把它写在一个单独的页面里面去。看一下我们最终的一个源码，这有一个叫做my.wxs 这是我们最终的源码，我们把它拷贝一下。在这个目录下面，创建一个my.wxs这样的一个文件。这个文件之前已经有了，我们可以再覆盖给它拷贝过来，这个文件就是我们要写的WXS的模块的一个代码。在这个里面我们可以看到用了很多var，然后作为声明变量的一个关键字，这里面只能使用ES5的一个语法。ES6的一些语法不能使用，像let 像const还有像箭头函数等等这些都不可以使用，包括在最后这个模块导出的时候，这个地方也不能简写。因为在ES6里边可以这个地方，可以冒号后面以及冒号都可以略写对吧，在ES5里面这个不行，所以我们这个地方还是老老实实的把两个都给它写上。

下面我们再看一下我们这个代码它主要是干了什么事情？主要就是导出了onScroll这样的方法。然后在onScroll里面是查一下我们这个地方有这两个变量的值是不是已经完成了设置，这个主要是取我们这个页面滑动到一定程度，就是滑动到什么程度会触发相应的标签的一个选择，就取它的一个位置。我们大概是取到了从300然后会显示一个，然后800，然后会触发另外一个变化，是这样的结果。为了使这个值更加精准，这个地方我们又做了一次查询，这个查询代码它其实只会执行一次。在这个里面我们用了ownerInstance，ownerInstance它其实是我们小程序的页面在调用我们这个方法的时候给它传进来的，它代表的是我们当前的组件属于哪一个组件。

它的父组件上，它会有一个方法，本质上是两个方法。我们这个地方用的是selectAllComponents，这是查询所有，另外还有一个把All给它去了，查询单个的也是可以的。查询语法跟我们平常所用的createSelectorQuery里面用的查询语法是一样的，其实跟我们在H5里面用的查询节点的语法也是类似的。前面加个点，代表的是以类样式然后进行查找，下面这些代码就是把这个值给它算出来。

算出来以后，接下来我们有一个selectTag。这个是选择指定标签的一个组件，怎么选？这个地方再次用了这个接口，后面语法我们可以看到它中间其实它是可以用两个类样式的。它代表的一个所属关系，前面是一个父对象，然后后面是一个子组件，它是有一个从属关系可以这样去写。

然后下面这个地方是关键，我们这地方要去判断如果是它用hasClass去判断，如果它没有样式，selected其实是一个样式，可以搜索下这个样式。

我们要在这个页面里面去找，这个是有的对吧。我们可以看到它这个地方选中以后 它这个背景色会变成一个红色，也就是它有一个红色的选中状态，也就是我们现在看到的推荐这个标签名它所展示的这样的一种样式。

接着继续往下看，这个地方主要的一个功能就是切换样式把我们当前要选择的这个给它加上selected的样式。然后同时把其他的样式给它去掉，已经选择了的要给它去掉，这个地方是if判断，通过我们滚动值，这个滚动值其实是从我们这个事件里边。e它代表了一个事件对象，它有一个detail，detail里面会有一个scrollTop这样的一个滚动的数据属性，因为这个onScroll是绑定在滚动的组件上面，所以它会有这样的一个事件属性，然后拿到以后我们就与前面取到的point1、point2进行对比，如果是大于这个，代表是已经滚到下面了，所以要选择这个订单这样一个标签。接着就是选择第二个就是评价这一个，最后默认就选择1 推荐这个标签。这样的一种方式，这个代码我们已经解释完了。

接下来我们怎么样去用它？

首先是要引入脚本模块。看一下我们最终的源码，这个地方是一个引入，这是它的一个名字，这个名字我们可以自定义命名，也不一定叫这个名字，但一般情况下我们将这个名字跟我们当前页面的名称保持一致，我们要给用户主页使用所以这个也叫my就可以了。另外再查一下它在哪个地方使用的，这个地方对吧要有一个catchscroll，然后my.onScroll，这是模块里面导出的方法。这样去使用它，把这个代码拷贝一下，把它放在我们页面的最上方，同时我们要在下面在这个地方要添加catchscroll，这个里边写法跟我们JS代码层的写法有点不太一样。

JS的绑定比如说我们看另外的一个绑定，它这个地方其实是不需要写小胡子语法的，但是我们WXS脚本它其实需要写的，这个地方要给它把这个名字给它写上my.onScroll这样就可以了，代码已经写完了 接下来我们编译一下。看一下它的一个执行结果，然后页面让它向上滚动，滚到这个地方，我们可以看到评价现在已经拥有了一个高亮的样式。因为下面在这个地方评价已经崭露头角了，它的内容已经开始呈现了，然后再往下 订单这个区域开始显现的时候，订单又开始有了高亮的样式，往上滚动其实也是一样的，这是我们实现的。为了查看它效果怎么样，我们可以打开我们的性能面板Performance面板把之前的一个结果给它清空掉，然后我们开始录制。录制的时候，现在我们进行滚动 ，滚动的时候它会触发我们代码的一个变化，代码的执行，然后再停止。

然后我们可以看它触发这个代码它的一个执行的效率怎么样。这有一个Task，Task它执行时间大概是3点多少9.84。9.84毫秒这个时间还是相当短的，这个效率是可以的。我们可以再清空一下，然后接着再重新录制一下，为了让它不受其他的影响，最好我们开始录制的时候到我们录制结束，这个中间我们只需要去执行想要检测的效果。因为我们现在要检测wxs脚本，所以我们只需要在这个地方滚动然后触发它这三个标签的样式的一个变化就可以了，其他的我们可以先不管。然后停止，停止以后它时间轴它跟flash时间轴是一样的，就是在左手边那个位置它是最新的。

前面我们可以看到有很多，这是我们页面加载的时候有很多需要优化的点，所以它有很多的红三角对吧。然后后面这个才是我们最近的一个，如果我们对这个不太确定的话，可以去掉之后，然后不要点中间这个。因为刚才我们误点了，误点以后就相当于是你小程序页面重新加载了，然后重新从开始然后去测试它这个性能，这个测试点就多了。现在我们重新点一下，只需要测这个 让它动画编译一下以后，然后就让它停止。停止以后，因为我们这个测试时间很短，我们就看小山丘，看它这个时间几不可见，基本上看不到，看不到就说明什么，就说明它执行的时间太少了，可以忽略不计了。效率上绝对是没有问题的，这就是我们关于实践三的一个演示。

最后我们总结一下，在小程序中实现动画，如果是单单实现动画的话第一推荐的是关键帧动画，因为它简单方便易操作，接口也比较容易调用。如果动画是滚动事件 响应式的这样的一种动画，我们可以在调用animation方法的时候加上ScrollTimelineObject这样的一个参数，然后规定联动的对象以及它的参数范围这样一种方式去实现响应式动画，对于高频动画我们可以使用WXS脚本改写，它的优点是高效，缺点是目前能力有限，我们看到了它目前只支持ES5的语法，ES6语法目前在里面是无法使用的，现在你在屏幕上看到的是我们本节课涉及到的一些官方文档，这节课我们就讲到这里。

这节课我们主要学习了小程序四种实现动画的方式，其中以wxs脚本动画最高效，以关键帧动画最好用。那下节课我们学习自定义组件的优化技巧。

这里有个问题请你思考一下：将页面上的一部分功能抽离为单独的一个组件，仅是软件在模块化设计思想上的一种体现吗？有没有其他方面的一个好处呢？

这个问题留给你思考一下，我们下节课一起来深入探讨一下这个话题。

点击查看开放文档：

• Animation
• 小程序框架 /视图层 /动画
• WXS响应事件