1回答

好帮手慕夭夭

2020-12-16

同学你好，老师拿第一个动画“位移”举例子（其他动画同理），同学可以下载源码，结合代码理解一下。如下：

1、调用动画translate方法，传入一个实参：

2、如下图，执行translate方法，参数value就接收了实参，即value='200px, 200px'。而上面调用translate方法时，没有传递第二个参数，所以time为undefined。translate中调用了_add方法，并传入参数，如下：

3、执行_add方法，接收参数。这些参数通过push方法添加到了数组_queue中。如下图：

注意，前面说time的值为undefined，所以当参数值为undefined时，默认值会生效。

所以数组_queue中保存的动画是如下形式：

4、以上就是translate方法之后，执行的所有代码，最终在数组中添加了动画。然后后面调用了done方法，所以执行完translate方法之后，继续执行done方法。

5、done方法中是调用了_start方法，所以执行_start方法。

6、_start方法中就是给元素添加动画效果了，如下：

前面讲了，在_add方法中，给数组_queue添加了动画，所以这里判断，如果_queue没有动画，就直接返回，后面的不执行了。如果有动画，那么取出第一个，通过this.el.style.transition和this.el.style.transform给元素添加了过渡和动画效果。

当第一个动画添加完之后，就会再次调用_start，重复上面的操作了哦。

7、另外，如果同学觉得视频讲的太快，可以调整倍速。或者倒回去多看几遍哦。或者下载源码，结合源码去理解。在学习的过程中，建议多练习，这样可以帮助自己更快的熟悉代码。

祝学习愉快~

0