const TICK = Symbol('tick'); const TICK_HANDLER = Symbol('tick-handler'); export class Timeline { constructor() { this[TICK] = () => { console.log('tick'); requestAnimationFrame(this[TICK]); }; } start() { this[TICK](); } pause() {} resume() {} reset() {} }
完成到这一部门，我们就可以把这个 Timeline 类引入我们的 main.js 内里试试。
import { Timeline } from './animation.js'; let tl = new Timeline(); tl.start();
Build 一下我们的代码，然后在欣赏器运行，这时候就可以看到在 console 中，我们的 tick 是正常在运行了。这说明我们 Timeline 今朝的逻辑是写对了。
到这里，我们实现了一个很是根基的时间线的操纵。接下来我们来实现一个简朴的 Animation（动画）类来测试我们的时间轴。
实现 Animation 类接下来我们给 Tick 添加一个 animation（动画），而且执行这个动画。
我们做的这个时间轴，最终是需要用在我们的 Carousel（轮播图）的动画上的。而轮播图上的动画，我们称它为 “属性动画”。
因为我们是把一个工具的某一个属性，从一个值酿成量外一个值。
与属性动画相对的尚有帧动画，也就是每一秒都来一张图片。讲到帧动画，我们应该都知道 “宫崎骏” 老师的动画，好比，经典的《龙猫》、《天空之城》等等。这些动画都是 “宫崎骏” 老师一张一张图画出来的，然后每一帧播放一张图片，在一个快速播放的进程，就会让我们看到图中的人和物在动了。比动漫时代更早的时候也已经有动画了，也就是我们昔人所说的走马灯。
上面说到的动画，都不是通过属性来做的。可是我们在欣赏器内里做的，大部门都是属性的动画。每个动画城市有一个初始属性值和终止属性值。
相识完动画的理论后，我们就可以开始实现这部门的逻辑。首先我们 Animation（动画）这部门的逻辑和 Timeline 也是相对独立的，所以这里我们可以把 Animation 单独封装成一个类。（我们后头的前端组件化的文章中还会再次强化动画库的成果。）
export class Animation { constructor() {} }
首先建设一个 Animation（动画）我们需要以下参数：
object：被赋予动画的元素工具
property：被赋予动画变换的属性
startValue：动画起始值
endValue：动画终止值
duration：动画时长
timingFunction：动画与时间的曲线
这里我们需要留意的是，传入的 property（属性）一般来说都是带有一个单元的，好比：px（像素）。因为我们的 startValue 和 endValue 必然是一个 JavaScript 内里的一个数值。那么假如我们想要一个完整的 Animation，我们还需要传入更多的参数。
可是这里我们就先不往后加，先实现一个简朴的 Animation 。
初始化我们的 Animation 工具时，我们是需要把所有传入的参数都存储到这个工具的属性中，所以在 constructor 这里我们就要把所有传入的参数的原封不动的誊录一遍。
export class Animation { constructor(object, property, startValue, endValue, duration, timingFunction) { this.object = object; this.property = property; this.startValue = startValue; this.endValue = endValue; this.duration = duration; this.timingFunction = timingFunction; } }
接下来我们需要一个执行 animation（动画）的函数，我们叫它为 exec、go 都是可以的，这里我们就用 run（运行）这个单词。小我私家以为越发贴切这个函数的浸染。
这个函数是需要吸收一个 time（时间）参数，而这个是一个虚拟时间。假如我们用真实的时间其实我们基础不需要做一个 Timeline（时间轴）了。
有了这个时间，我们就可以按照这个时间计较当前动画的属性应该变革几多。要计较这个属性的变革，我们首先需要知道动画初始值到终止值的总变革区间。
公式：变革区间(range) = 终止值(endValue) - 初始值(startValue)
获得了 调动区间 后，我们就可以计较出每一帧这个动画要变革几多，这个公式就是这样的：
变革值 = 变革区间值(range) * 时间(time) / 动画时长(duration)
这里获得的变革值，会按照当前已经执行的时间与动画的总时长算出一个 progression（进度 %），然后用这个进度的百分比与变革区间，算出我们初始值达到当前进度的值的差值。这个差值就是我们的 变革值。