上一篇文章《用 JSX 实现 Carousel 轮播组件》中，我们实现了一个 “基本” 的轮播组件。为什么我们叫它 “基本” 呢？因为其实它看起来已经可以满意我们轮播组件的成果，可是其实它尚有许多缺陷我们是没有去完善的。
固然我们已经在内里实现了两个成果，一是可以自动轮播，二是可以手势拖拽。可是其实它离一个真正意义上的可用水平照旧有很远的间隔的。
首先我们的自动轮播和拖拽是无法无缝毗连的，也就是说当我们拖拽竣事后，我们的轮播应该继承自动轮播的。这一点我们是还没有实现的。我们的拖拽自己也是有细节上的问题的，例如说它今朝只支持鼠标的拖拽事件，并不支持触屏的拖拽，这个也是我们在网页研发进程中必需要去面临的问题。
第二我们动画是利用 CSS Animation 实现的，也不具备任何的自界说和相应变革的。
所以接下来我们来一起实现我们的动画库，可是实现动画库之前，我们需要拥有一个动画库中的时间轴库。这篇文章我们先来看看怎么去实现一个时间轴类，和一个基本的动画类来利用这个时间轴。
代码整理首先我们发明之前写的 Carousel 组件的代码已经很巨大了，所以我们需要封装一下它，这里我们就把它独立放入一个 JavaScript 文件中。
在项目根目次，成立一个 carousel.js，然后把我们 main.js 中 carousel 组件相关的代码都移动到 carousel.js 中。
carousel.js 中只需要 import Component 即可，然后给我们的 Carousel 类加上 export。代码布局如下：
import { Component } from './framework.js'; export class Carousel extends Component {/** Carousel 内里的代码 */}
最后我们在 main.js 中从头 import Carousel 组件即可。
import { Component, createElement } from './framework.js'; import { Carousel } from './carousel.js'; let gallery = [ 'https://source.unsplash.com/Y8lCoTRgHPE/1600x900', 'https://source.unsplash.com/v7daTKlZzaw/1600x900', 'https://source.unsplash.com/DlkF4-dbCOU/1600x900', 'https://source.unsplash.com/8SQ6xjkxkCo/1600x900', ]; let a = <Carousel src=https://www.jb51.net/{gallery} />; // document.body.appendChild(a); a.mountTo(document.body);
整理好我们的代码，就可以开始写我们的时间轴库了。这个时间轴是我们动画库中的一部门，所以我们统一放入我们动画库的 JavaScript 文件中： animation.js。
我们是需要用这个时间轴去实现我们后续的动画库的，而动画中就有一个很是要害的观念，就是 “帧”
最基本的动画本领，就是每帧执行了一个事件。
JavaScript 中的 “帧”因为我们需要有“帧”才气实现我们的动画，所以我们需要先去相识 JavaScript 中的几种处理惩罚帧的方案。
人眼可以或许识此外动画的一个最高频率就是 60 帧。
有的同学大概有看过李安导演的影戏。好比，《比利·林恩的中场战事》就是全世界第一个 120 帧拍摄和 120 帧播放的影戏。
也是因为帧率翻倍，所以许多处所就会感想很丝滑。可是一般我们的游戏，包罗我们的显示器，它们支持的都是 60 帧。固然我们看显示器的配置中，大概会有 70、80 帧，可是一般软件城市与 60 帧对其。
假如我们 1000 毫秒（一秒）内里需要 60 帧的话，那是几多毫秒是一帧呢？也就是 1000 / 60 = 16.666 1000 / 60 = 16.666 1000/60=16.666，所以 16 毫秒或许就是一帧的时间。
这个就是为什么我们一般城市用 16 毫秒作为一帧的时长。
实现“帧”的要领接下来我们来阐明一下，有哪些要领可以在 JavaScript 中实现 “帧”。
1. setInterval第一种就是 setInterval，这个其实我们在写轮播图的时候就用过。让一个逻辑在每一帧中执行，就是这样的：
setInterval(() => {/** 一帧要产生的工作 */}, 16)
这里配置的时隔断，就是 16 毫秒，一帧的时长。
2. setTimeout我们也是可以利用 setTimeout 这个去反复处理惩罚一帧中的事件。可是因为 setTimeout 是只执行一次的。所以我们需要给它一个函数名，利便我们后头反复挪用它。
一般这种用来作为动画中的一帧的 setTimeout，城市定名为 tick。因为 tick 在英文中，就是我们时钟秒针走了一秒时发出来的声音，后头也用这个声音作为一个单词，来表达走了一帧/一秒。
我们的利用方法就是界说一个 tick 函数，让它执行一个逻辑/事件。然后利用 setTimeout 来插手一个延迟 16 毫秒后再执行一次本身。
let tick = () => { /** 我们的逻辑/事件 */ setTimout(tick, 16); }
3. requestAnimationFrame最后现代欣赏器支持了一个 requrestAnimationFrame（也叫 RAF）。这是在写动画时较量常用，它不需要去界说一帧的时长。
当我们申请欣赏器执行下一帧的时候，就会执行传入 RAF 的 callback 函数。而且这个函数执行的时间是与欣赏器的帧率是相关的。
所以，假如我们要做一些欣赏器的降帧、降频的操纵时，那么 RAF 就可以随着欣赏的帧率一起下降。
利用也长短常简朴：
let tick = () => { /** 我们的逻辑/事件 */ setTimout(tick, 16); }
所以，一般最常用的就是这三种方案。假如我们的用户大部门都是利用现代欣赏器的话，就推荐利用 requestAnimationFrame。
“为什么不消 setInterval 呢”？因为 setInterval 较量不行控，欣赏器到底会不会凭据我们配置的 16 毫秒去执行呢？这个就欠好说了。