JavaScript 动画剖析

最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中,回过头来发现以前写的代码确实还有很多可以改进的地方,这也证明自己还是有点进步的。趁有点时间,将javascript动画运行的机制和实现的思路整理了一下,算是做个小总结,也希望对有兴趣的人有点帮助。篇幅稍长,看之前请自备瓜子啤酒。

当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画,HTML5和CSS3的发展让WEB中的动画有了更多的可能,但这些看起来比较高级的东西还需要浏览器给力点才行。

解析CSS属性值

理论上,只要CSS的属性值包含了数值,就可以进行动画,事实上,包含了数值的CSS属性值有很多很多,拿最常见的属性来说:

div{ left:100px; }

上面的位置值就包含了数值“100”,要想实现该元素从100px的位置到600px的位置,只要不断的修改该元素的位置值,达到一定的速度就实现了动画,据国外的统计,每25毫秒切换一次画面,就可以实现“动”的效果。

CSS属性值都是字符串,为了方便进行计算,需先将字符串转换成数值,并且很多属性值都包含了单位,所以最好解析成下面这种格式:

'100px' ==> { val : 100, unit : 'px' }

100px是元素开始动画的位置,600px是元素结束动画时的位置,同样的方法解析结束的位置值:

'600px' ==> { val : 600, unit : 'px' }

动画的运行原理

结束值和开始值之差500px就是动画的总距离,通常动画的时间都是固定的,假定动画时间为1000毫秒,那么速度=总距离/总时间为0.5px/毫秒。

总距离S = 总时间T * 速度V ==> V = S/T

当前距离s = S/T * 已耗时t ==> s = S * (t/T)

即:当前距离 = 总距离 * (已耗时/总时间)

有了上面的公式就可以计算出在固定了总距离和总时间的动画中,某个时间点的元素应该出现的精确位置了。仅仅有这些还不够,元素的一系列连贯性的变化才能形成动画,这里就有必要引入帧这个比较通用的概念。

从动画开始运行到动画结束,总距离和总时间都是固定的,根据上面提到的每25毫秒切换一次画面,那么可以计算出每秒的传输帧数为40帧/秒,也就是40fps。这个动画的总时间为1000毫秒,恰好是运行40帧完成动画。

那么javascript如何表示一帧呢?javascript跟时间有关系的肯定是定时器setTimeout和setInterval,动画需要重复运行,所以这里使用setInterval,每25毫秒执行一次就是一帧,用代码表示就是:

window.setInterval( tick, 25 );

每秒钟帧数 (fps) 愈多,所显示的动作就会愈流畅。通常,要避免动作不流畅的最低fps是30。事实上,在浏览器中,30fps还是会显得不太流畅,各大javascript框架都有默认的fps数,一般为50-80之间,各框架的fps和interval的设置在这里有简短的介绍。jQuery的默认的interval是13毫秒,fps在75左右,在各框架中算是很高的了。是不是fps越高越好?浏览器能使用的系统资源是有限的,fps越高也就越耗性能,也有可能出现丢帧的现象,在肉眼觉得可以接受的动画流畅的范围内,应适当的设置interval,所以我的动画框架的interval设置成了16毫秒,fps在60左右。

running

有了上面这些信息,就可以开始动画了,在定时器开始运行的那一刹那,要获取动画开始的时间,然后每一帧动画都要获取一次当前时间。动画开始时的属性值为sv,结束时的属性值是tv,结束时的单位是tu,当前时间减去开始的时间即为已耗时,已耗时/总时间的时间比为t,那么最终的运算公式为:

( sv + (tv - sv) * t ).toFixed(7) + tu;

这里的toFixed的参数也是有讲究的,CSS属性值大多数都允许小数点的数值,所以精度越高,动画的效果看起来就会显得越流畅,toFixed(0)和toFixed(7)的效果会有明显的差异。

当已耗时大于或等于总时间,就该结束动画了,结束动画就是清除定时器,因为动画的运行的结果不太可能刚好等于结束属性值,所以结束动画时应该将CSS属性值还原,既是最后的关键帧。

tween

tween翻译成中文是缓动,要想动画有特殊的效果,比如加速或者减速效果,就需要引入tween函数。下面是我从司徒正美的博客节选出来的一些内容,原文在这里

javascript的tween函数的由于计算方法不同,基本可以分成flash流派和prototype流派,动画的效果都差不多。flash流派的缓动函数通常都有4个参数,分别是:

  • t: timestamp,指缓动效果开始执行到当前帧开始执行时经过的时间段,单位ms
  • b: beginning position,起始位置
  • c: change,要移动的距离,就是终点位置减去起始位置
  • d: duration ,缓和效果持续的时间

flash流派的匀速运动的函数是这样的:

var linear = function( t,b,c,d ){ 
	return c*t/d + b; 
};

prototype流派的计算公式更简单,封装得更好,只有一个参数–时间比,就是我上面说到的已耗时/总时间,匀速运动的函数是这样的:

var linear = function( t ){
    return t;
};

显然只需传一个参数的计算方法更简洁,我的动画框架就采用了这类tween函数,早期的jQuery以及现在的YUI3采用的是flash流派,现在的1.7版也改成了prototype流派。有了tween,那么上面的运算公式可以改成这样:

( sv + (tv - sv) * linear(t) ).toFixed(7) + tu;

tween函数有很多,有兴趣的同志可以自己一一尝试,这里就不多说了。

队列

很多复杂的动画效果都是很多单个的动画按顺序执行组合而成的,所以队列的控制尤为重要。动画的队列设计只要弄明白了就比较简单,这里简单的说说设计思路。将单个的动画都添加到一个队列数组中,始终取0索引的队列函数来执行,执行的时候给该队列数组添加一个’running’标志在数组的0索引位置,无该标志就是第一次运行该队列,有该标志就表示该队列正在运行,这样可以保证在队列运行的状态也可以添加新的队列成员,下面贴一段伪代码,这里用到了缓存系统:

// 将数据添加到队列中
queue : function( elem, data ){
    // 取出该元素的队列缓存
	var animQueue = this.data( elem, 'animQueue', [] );
    // 添加队列
	if( data ){
		animQueue.push( data );
	}
   // 根据running标志来判断是否执行队列
	if( animQueue[0] !== 'runing' ){
		this.dequeue( elem );
	}		
},

// 取出队列中的数据并执行
dequeue : function( elem ){
	var animQueue = this.data( elem, 'animQueue', [] ),
		fn = animQueue.shift(),
		delay;		
		
	if( fn === 'running' ){
		fn = animQueue.shift();
	}

	if( fn ){
		animQueue.unshift( 'running' );
        // 递归调用依次执行队列函数
		fn.call( elem, function(){
			easyAnim.dequeue( elem );
		});
	}
	
	// 无队列时清除相关的缓存
	if( !animQueue.length ){
		this.removeData( elem, 'animQueue' );
	}
}

结束语

明白了上面的东西,很多类型的动画都只是套用公式就行了。任何包含了数值的CSS属性值都可以先解析,然后进行动画,比如颜色值的动画可以先将16进制的颜色值转换成rgb格式再进行动画,还有其他的一些CSS属性值如:backgroundPosition、textShadow等只要分别计算各个值照样可以实现动画。

源码阅读:https://github.com/chenmnkken/easyjs/blob/master/core/src/anim.js

原载于:雨夜带刀's Blog
本文链接:https://blog.yiguochen.com/javascript-animate.html
如需转载请以链接形式注明原载或原文地址。

“JavaScript 动画剖析”目前已有 12 条评论