JS时间轴动画
BEFE团队 人气:0css动画
在前端开发中，一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ，如：
.div1 {
width: 100px;
height: 100px;
background: red;
animation: changeColor 2s;
}
@keyframes changeColor {
0% {background: red;}
50% {background: yellow;}
100% {background: blue;}
}
假如设定的时间是2s，那么 这段动画的描述是这样的：在2秒内，某元素的背景色由红色变为黄色，又变为蓝色了。
假定有这样一个需求：
一个动画共持续4秒，在0-2秒内 div1 从红色变为黄色再变为蓝色，div2 在2-4秒内宽度由100px变为200px。
.div1 {
width: 100px;
height: 100px;
background: red;
animation: changeColor 2s forwards;
}
@keyframes changeColor {
0% {background: red;}
50% {background: yellow;}
100% {background: blue;}
}
.div2 {
width: 100px;
height: 100px;
background: pink;
animation: changeWidth 4s forwards;
}
@keyframes changeWidth {
0% {width: 100px}
50% {width: 100px}
100% {width: 200px}
}
看起来好像也还行，那么 div1 在第1秒变色， div2 在2-5秒内变形， div3 在3-7秒内变色变形，div4在4-10秒内旋转...，然后这些一起构成了需求想要的动画效果。
这样的话我们要找出整个动画的总时长，然后每个div的运动时间算出相对总时间的百分比区域，然后设定 keyframe 动画。
到这里 keyframes 貌似就有些复杂度了，我们平时一直在用 keyframes，那么 keyframes 或者说动画的本质是什么？
由于人类视觉停留的原理，这样一张张图片连续展示就看起来像动画了，翻书动画或者显示器逐帧刷新显示都是利用了这个原理。在动画创作时，除了像素、2d动画还在逐帧绘制，大多数类型的动画都已在编辑时方便将帧转换为时间进行计算。
keyframes 作为一个高度定制化的产物，只是在名称上对“帧”这个概念进行了保留，它对单个元素的动画编辑是简单方便的。
但通过示例二就可以看出，它没有对多元素组合动画进行针对性的设计，代码上 div1 和 div2 是没有逻辑关系表现的 （虽然在最终运行时会进行组合，即页面上的多数动画是维护在一个计时器里执行的。），它们没有统一的时间轴，没有父级包裹，要实现这些，需要编码者自己维护。
什么是时间轴动画？
对有过视频剪辑经验的人来说，视频剪辑的核心工具：基于时间轴的多轨视频编辑器是极为高效和方便的，它实现了对多个动画/特效片段的整合，称为时间轴动画。我们可以基于此实现一个简易的js版本来针对多元素长时间的动画需求。
如图所示，整个视频由多段小动画交错拼合而成，公用一个时间轴，由此构成了整个视频。
类比到前端，我们也可以用类似的方法，以时间轴为基准，整合多个动画片段。
我们可以有以下思路：
先创建一个obj对象作为参数，我们称作 “动画对象”，它是整个动画过程的描述。
再创建一个执行动画的函数，我们称作 ”动画函数“，它接受”动画对象“和一个回调函数（动画结束时执行）作为参数。
接下来就进入代码实现：
动画对象
我们首先看以下代码：
var anim = [
{ // 动画对象，可以多个
dom: document.getElementById('a1'), // dom对象
anim: [ // 动画数组，里面可为多个对象
{
style: 'height',
// 要改变的样式名称如width,height
from: '10rem', // 样式的起始值要和to保持一致
to: '20rem', // 样式的目标值要和from保持一致
start: 0, // 开始时间 毫秒
end: 100, // 结束时间 毫秒
},
{
style: 'width',
from: '10rem',
to: '20rem',
start: 100,
end: 200,
},
{
style: 'transform',
from: 'rotate(20deg)',
to: 'rotate(40deg)',
start: 0,
end: 2000,
}
]
},
{
dom: document.getElementById('a2'),
anim: [
{
style: 'background',
from: 'rgba(0.0, 0.0, 0.0, 1)',
to: 'rgba(255, 0, 100, 0.5)',
start: 0,
end: 3000,
}
]
},
];
timeLineAnim(anim, function () {
console.log('animation finished');
});
anim 对象里清晰的描述了每个对象有几个动画，每个动画是怎么进行的。
然后 anim 对象作为一个参数传入了 timeLineAnim 中，在实际执行中它会进行如下操作：
div1在0.1秒内高度从 10rem 变为了 20rem，接着变宽，同时前2秒内还在旋转。
div2在0-3秒内颜色由rgba(0, 0, 0, 1) 变为rgba(255, 0, 100, 0.5)。
在3秒后，动画结束，控制台打出了 animation finished。
它的效果如下图所示：
动画函数
实现这个动画函数，首先简单构思下思路：1：将参数 anim 中的 from、to 的数字提取出来，便于计算。
2：开启 requestAnimationFrame，根据时间间隔和动画参数 anim 计算出当前帧的 css，并赋到对应的 dom 元素上。
3：在最后一个动画结束后，关闭requestAnimationFrame，并执行回调函数。
现在就进入编码阶段：在以上思路的基础上，我们在具体实现的过程中，通过 timeCount 来判断动画是否结束，使用 cssText 进行样式的赋值。
function timeLineAnim(arr, cb) {
/*
initData: 对数据进行初始化，将from、to中的信息转为数字，计算出动画的个数
setCss: 逐帧执行，根据传入的单个动画对象和每帧的时间间隔，计算出当前帧的样式，并修改元素的style值
*/
function initData(obj) {
var reg = /[\d\.]+/g;
var numArrFrom = obj.from.match(reg);
var numArrTo = obj.to.match(reg);
if (!numArrFrom || !numArrTo || numArrFrom.length == 0 || numArrTo.length == 0 || numArrFrom.length != numArrTo.length) {
console.warn('数据输入错误');
}
for (var i = 0; i < numArrFrom.length; i++) {
numArrFrom[i] = parseFloat(numArrFrom[i]);
numArrTo[i] = parseFloat(numArrTo[i]);
}
var strArr = obj.from.split(reg);
if (numArrFrom.length <= 0) { return; };
animCount++;
return {
strArr: strArr,
numArrFrom: numArrFrom,
numArrTo: numArrTo,
totalLength: strArr.length + numArrFrom.length,
isEnd: false,
}
}
function setCss(obj, timeCount) {
var styleStr = '';
var tempCount = animCount;
// 将对象的多个动画，根据时间计算出样式，并合并
for (var i = 0; i < obj.anim.length; i++) {
var target = obj.anim[i];
if (timeCount > target.start && !target.initData.isEnd) {
// 根据起止时间 计算出当前动画进度
var percent = (timeCount - target.start) / (target.end - target.start);
if (percent >= 1) {
percent = 1;
target.initData.isEnd = true;
tempCount--;
}
styleStr += getValue(percent);
}
}
obj.dom.style.cssText += ';' + styleStr;
animCount = tempCount;
// 这里进行单个动画每帧样式的生成，这里是匀速运动
function getValue(percent) {
var numFrom = target.initData.numArrFrom;
var numTo = target.initData.numArrTo;
var arr = [];
for (var i = 0; i < numFrom.length; i++) {
arr.push(numFrom[i] + (numTo[i] - numFrom[i]) * percent);
}
var numIndex = 0;
var strIndex = 0;
var turnForNum = false;
var str = target.style + ':';
for (var i = 0; i < target.initData.totalLength; i++) {
if (turnForNum) {
str += arr[numIndex];
numIndex++;
turnForNum = false;
}
else {
str += target.initData.strArr[strIndex];
strIndex++;
turnForNum = true;
}
}
return str + ';';
}
}
// 主体逻辑: 初始化数据、帧动画、动画结束执行回调
var animCount = 0;
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[i].anim.length; j++) {
arr[i].anim[j].initData = initData(arr[i].anim[j]);
}
}
this.timer && cancelAnimationFrame(this.timer);
var _this = this;
(function animate(timeCount) {
if (animCount > 0) {
for (var i = 0; i < arr.length; i++) {
setCss(arr[i], timeCount);
}
_this.timer = requestAnimationFrame(animate);
}
else {
cancelAnimationFrame(_this.timer);
cb && cb();
}
})();
}
伸手党可直接复制运行。至此，一个基于时间轴的简易动画函数就完成了，不到100行的代码就可以使你愉快的使用声明式的方式编辑时间轴动画。
此外，在getValue阶段，你还可以根据自己的需求搭配不同的运动曲线函数，丰富动画的功能。
由于参数是类json的，因此如果需要更进一步的话，你完全可以制作一个UI界面来可视化的生成动画参数，从而方便非程序员从业者使用。
思考
开头的部分讲述了市面上少部分动画如2d像素类，2d动画的制作仍然是以帧来进行的。
而无论在 keyframes 里 还是 本文给出的 timeLineAnim 函数 都是以 时间来进行设计的。
那么：如果我们改成用帧来进行计算和制作会如何呢？有什么优缺点吗？欢迎评论区讨论。
总结
加载全部内容