既然说到了动画，说到了过渡效果或者说大家喜欢讲的——网页特效，那就索性把它们讲完全。前面讲了使用 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。有兴趣的可以自己动手试一下，也可以去查阅文档，深入了解，他们本身包含的功能都要比我所讲述的这些强大得多。
但归根结底，动画就是这么回事，间隔极短的时间，不断的去修改对应元素的属性。
可是它也很复杂，我们应该以怎样的规律去进行修改，才能够让这个动画看起来更舒适？又如何保证不过分的消耗性能呢？这些都是值得长期去思考的问题。
暂无评论内容