第一百三十五章 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) 进行结束。

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


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

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

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

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

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

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

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百三十五章 JS 动画的另一种实现

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏