从 0到1，开发一个动画库（1）

作者：jshao

https://segmentfault.com/a/1190000012923589

如今市面上关于动画的开源库多得数不胜数，有关于CSS、js甚至是canvas渲染的，百花齐放，效果炫酷。但你是否曾想过，自己亲手去实现（封装）一个简单的动画库？

本文将从零开始，讲授如何搭建一个简单的动画库，它将具备以下几个特征：

从实际动画中抽象出来，根据给定的动画速度曲线，完成“由帧到值”的计算过程，而实际渲染则交给开发者决定，更具拓展性

支持基本的事件监听，如 、 、 、 ，及相应的回调函数

支持手动式触发动画的各种状态，如 、 、 、

支持自定义路径动画

支持多组动画的链式触发

完整的项目在这里：点赞行为高尚！，欢迎各种吐槽和指正^_^

OK，话不多说，现在正式开始。

作为开篇，本节将介绍的是最基本、最核心的步骤——构建“帧-值”对应的函数关系，完成“由帧到值”的计算过程。

目录结构

首先介绍下我们的项目目录结构：

是本项目的根目录，各文件的作用分别如下：

index.js 项目入口文件

core.js 动画核心文件

easing.js 存放基本缓动函数

引入缓动函数

所谓动画，简单来说，就是在一段时间内不断改变目标某些状态的结果。这些状态值在运动过程中，随着时间不断发生变化，状态值与时间存在一一对应的关系，这就是所谓的“帧-值”对应关系，常说的动画缓动函数也是相同的道理。

有了这种函数关系，给定任意一个时间点，我们都能计算出对应的状态值。OK，那如何在动画中引入缓动函数呢？不说废话，直接上代码。

首先我们在core.js中创建了一个类：

我们在构造函数中对实例调用函数，对其初始化：将传入的参数保存在实例属性中。

当你看到的时候可能不大明白：外界传入的到底是啥？其实是一个数组，它的每一个元素都保存着独立动画的起始与结束两种状态。这样说好像有点乱，举个栗子好了：假设我们要创建一个动画，让页面上的div同时往右、左分别平移300px、500px，此外还同时把自己放大1.5倍。在这个看似复杂的动画过程中，其实可以拆解成三个独立的动画，每一动画都有自己的起始与终止值：

对于往右平移，就是把css属性的 的0px变成了300px

同理，往下平移，就是把 的0px变成500px

放大1.5倍，也就是把 从1变成1.5

因此传入的value应该长成这样：。我们将数组的每一个元素依次保存在实例的value属性中。

此外，是由外界提供的渲染函数，即，它的作用是：动画运动的每一帧，都会调用一次该函数，并把计算好的当前状态值以参数形式传入，有了当前状态值，我们就可以自由地选择渲染动画的方式啦。

接下来我们给Core类添加一个循环函数：

的作用是：倘若当前时间进度还未到终点，则根据当前时间进度计算出目标现在的状态值，并以参数的形式传给即将调用的渲染函数，即，并继续循环。如果大于，则将目标的运动终止值传给，运动结束，将状态设为。

代码中的是从tween.js文件引入的缓动函数，tween.js的代码如下（网上搜搜基本都差不多= =）:

最后，给类增加方法：

core.js的完整代码如下：

在html中引入它后就可以愉快地调用啦^ _ ^

看到这里，本文就差不多结束了，下节将介绍如何在项目中加入各类事件监听及触发方式。

本系列文章将会继续不定期更新，欢迎各位大大指正^_^

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能