第一百三十五章 JS 动画的另一种实现

如果你对上一章的内容进行了深入的练习，会发现这里面有一些问题。我希望让动画变得更加细腻，所以缩短了时间间隔。但是受限于程序的计算性能，并不能够达到我的预期。说直白点，我希望它以极高的频率去执行我给定的任务，结果把它累傻了，忙不过来了，动画没有变得更细腻，反倒出现了卡顿。

还有一些同学说，哇，你们好厉害，你们讲的道理我都懂，但是一写那个定时器就迷糊……

上一章的方法在道理上讲是没有问题的，只是在实际应用中，可能会受到各种限制。所以这一章我们再使用另一种方法去实现一下。

原理上都是一样的，但是我们这次要借助一些 API 了，就是接口，Emmm，是不是还有人不明白？就是我去找一些专门来做这件事情的人帮忙。

window​.request​Animation​Frame，这个东西真长，长的我都背不下来。就这么几个单词，就算不认识简单查一下字典，差不多也能够明白。首先它是 window 对象上的一个方法，这里先不解释 window 对象，以后会去讲解。反正这次的是一个方法。

这个方法是用来干什么的呢？后面三个单词解释的很清楚，请求，动画的，下一帧。

我们用这个方法去告诉浏览器，我们要执行一个动画。浏览器说好呀，那我们就开始动画吧，你下一帧想要显示什么呢？

对，我们只要告诉他每一帧该显示什么就可以了，其他的让他自己去控制。

function step() {const newWidth = $('#miao').width()+1;$('#miao').width( newWidth );}window.requestAnimationFrame(step);

上面的代码简单吧？这次能看懂了吧？这个方法就是这么方便。

但是你用上面的代码去执行，好像没有什么作用。因为这个方法是请求下一帧，所以上面虽然执行了，但是只显示了一帧，我们应该很难看出他的变化来。动画是需要多帧的，所以我们还要让它继续的请求下一帧。

function step() {const newWidth = $('#miao').width()+1;$('#miao').width( newWidth );if( newWidth<800 ){window.requestAnimationFrame(step);}}window.requestAnimationFrame(step);

这样就可以实现一个完整的动画了。这个方法也会返回一个 ID，作为它的标识。我们可以使用 window​.cancel​Animation​Frame(ID) 进行结束。

然后这个方法会主动的，给它所调用的那个函数，传入一个参数。这个参数就是一个时间戳，单位是毫秒，我们可以根据这个时间去计算这一帧应该显示的效果。这样我们显示的效果就是准确的时间相关。

---

现在我们差不多把基础的特效相关的东西都讲了，利用这些方法已经可以去完成大部分的特效了。你要思考的只是如何去设置和排列组合它们。

它们还具有很多的高级用法，值得我们深入去学习，使我们可以更细致的去调节动画，做出更细腻感人的效果，或者更好的提升执行效率，获得更好的性能。

但是从页面元素开始动起来的那一刻，就已经十分激动人心了。难道不是吗？我们用羡慕的眼神看着其他人的页面特效，却从没想过，实现它们也许只是几行简单的代码。

也许效果很粗糙，也许代码很稚嫩，但，它们动起来了，它们真的动起来了，而且是在我的指挥下，按照我的意愿去运动！这，让我忍不住欢呼~

有了这第一步，后面的万里长征，也许都不算遥远了吧？

我学会了基础的，就拥有了向更高技术迈进的资本，那，只是下一步吧。