第一百三十四章 JS 动画基础

既然说到了动画,说到了过渡效果或者说大家喜欢讲的——网页特效,那就索性把它们讲完全。前面讲了使用 jQuery 来实现,很方便,一句话语法。用 CSS 实现,也很方便,说清楚谁发生过渡以及时长,或者描述清楚关键帧就好了。

但是动画是一个可以很复杂的东西,这些很死板的方法限制了我们的想象力。好的,我承认:它们也可以给出指定的函数去处理动态效果,但是这些我没讲。

不过,现在我们说到了 JS 的动画基础,就要自己手写一个函数去实现动画了。

可能有同学会说,哎呀,这个好难!

哪里,我都还没开始讲呢,你就开始喊难了,我觉得你这是故意想砸我的场子。

说一说什么是动画吧,每秒钟 24 帧(现在都 30 帧、60 帧、120 帧了吧)不断进行细微变化的画面,通过人类的视觉暂留现象,让人感受到画面是在连贯运动的。我也没去查,反正差不多就是这个意思。

然后呢?一秒钟是 1000 毫秒,如果我每 40 毫秒,对这个元素进行一点细微的改变,是不是就等于让这个元素发生了每秒钟 25 帧的动画?诶,我觉得这个够用的!

这就是自己手写动画的基础,而且我们还可以改变这个时长,希望动画更细腻,可以让这个时长更短,这样每秒的帧数就增加了。希望提高性能,可以延长这个时间间隔,降低每秒钟的帧数。

道理很简单,改变元素的样式我们也学了,那么怎么每隔一定的时间间隔去做一次呢?这里需要介绍两个定时函数,又是系统自带的,基础用法挺简单的:

window.setInterval(这里是一个函数对象, 这里是间隔的时长)

在函数对象那里,我们要给出一个函数,或者已经定义的函数的函数名(不带小括号!!!)。间隔的时长不需要单位,只是数字就行,单位是毫秒。作用就是每隔这个时长就执行一遍这个函数。

很简单,但是我怎么让它停下来?

我们在设置这个定时器的时候,它会返回一个值,我们把这个值储存在变量里,就可以当作这个定时器的名称[1]来使用,用 window.clearInterval(定时器的名字) 来结束它。

演示一下:

const timerID = window.setInterval(function(){const newWidth = $('#miao').width()+1;$('#miao').width( newWidth );if(newWidth > 800){window.clearInterval(timerID)}}, 40)

大家看看是不是很容易读懂呢?如果肯自己动手去写几次,基本也就明白了。关于计时器的方法,还有一个,和上面的方法十分类似,只是它不是周期执行,而是延迟指定的时间之后执行给定函数,然后就结束了,并没有循环。这个方法是 window.setTimeout。有兴趣的可以自己动手试一下,也可以去查阅文档,深入了解,他们本身包含的功能都要比我所讲述的这些强大得多。

但归根结底,动画就是这么回事,间隔极短的时间,不断的去修改对应元素的属性。

可是它也很复杂,我们应该以怎样的规律去进行修改,才能够让这个动画看起来更舒适?又如何保证不过分的消耗性能呢?这些都是值得长期去思考的问题。

原文链接:https://www.ek58.com/archives/3793,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?