velocity序列动画

      结合上次提到的velocity的UI Pack存在一下问题：

• 动画名称过长，语意性差
• 使用UI Pack的动画，loop属性会失效
• 无法监听动画完成时机

 

     我这里想到了一种解决思路：

• 动画名称过长，语意性差？这个问题很好解决，生成一些简单、易懂，并且大家都在用的动画名称，我这里主要参考了animation.css和magic.css的动画名称，因为这两个库，大家使用的比较多，并且语义化强。
• 使用UI Pack的动画，loop属性会失效？我不太清楚为什么不支持循环设置，我这里想到的一种方案是，如果设置成无限循环，我会将循环次数设置成1000次。这个次数比较随性，没有进行过任何测试，这里只是提供一种思路，有这么一个参考，我的项目中，页面的平均停留时间是2分钟左右，这样就是120秒，所以我设置成为1000次，既不影响体验，对性能又有一些帮助。
• 无法监听动画完成时机？我这里在最后一个动画的参数中，增加了一个回调函数，这样在最后一次动画执行完毕就会执行这个回调。同样的，如果你有需要在每个动画执行完毕都进行监听的话，可以尝试按照上面的思路进行实现。

 

     结合上述解决思路，又结合animation.css和magic.css两大css动画库，产出了velocity-ui-pack-extra（velocity动画库加强包），他主要解决的问题：

• velocity现在使用不便的地方
• 大幅度的丰富了动画库，使用起来更加方便和快捷。
• 支持动画序列，根据动画的丰富程度，可以实现于flash相同的动画效果
• 动画包增加了一些其他信息：动画类型（出现动画、特效动画、消失动画）、动画描述（动画效果的中文描述，便于业务使用）
• Velocity没有一个很好的清除动画的方式，只是提供了stop和finish动画，不能完全解决问题，这里提供了一种思路，目前感觉还不是很完美，如果有新的思路希望可以帮我解惑。

 

     这里主要使用了Velocity底层提供的两个方法：RegisterEffect和RunSequence

 

     实现过程如下：

        //避免污染Velocity
	window.MsAnimation = {
		$: global,
		/**
		 * 清除动画，恢复元素初始状态
		 * @param {String|Object} 元素选择器
		 */
		resetAnimation: function(selector) {
			var  $ = this.$;

		    $(selector).velocity('stop', true)
			    .velocity('finish')
			    .velocity({
				    translate:0,
					translateX: 0,
					translateY: 0,
					translateZ: 0,
				    rotate: 0,
				    rotateX: 0,
				    rotateY: 0,
				    rotateZ: 0,
				    scale: 1,
				    scaleX: 1,
				    scaleY: 1,
				    scaleZ: 1,
				    skew: 0,
				    skewX: 0,
				    skewY: 0
			    }, {
				    duration: 10
			    });
		},
		/**
		 * 播放动画序列
		 * @param selector 选择器或者dom
		 * @param quene 动画数组或者单动画
		 * @param callback 队列完成回调
		 */
		runAnimation: function(selector, quene, callback) {
			var self = this;

			var _quene = self._format2velocity(selector, quene);

			if(_quene.length == 0) return;

			//动画队列执行完毕回调
			_quene[_quene.length-1].o['complete'] = callback ? callback : null;

		    Velocity.RunSequence(_quene);
		},
		/**
		 * 处理循环设置
		 * @param {Object} animation
		 * {
		 *	name: 'bounce',
		 *	duration: 1,
		 *	delay: 1,
		 * 	loop: 1
		 * }
		 * @param {Number} loop 循环次数，0代表无限循环
		 */
		_dealLoop: function (animation, loop) {
			var  $ = this.$;
			var _newQuene = [];

			if(loop == 1) {
				return [animation];
			}
			for(var i=0; i<loop; i++) {
				var _animation = $.extend(true, {}, animation);
				//解决循环的重复delay问题
				if(i != 0) {
					delete _animation.o.delay;
				}
				_newQuene.push(_animation);
			}
			return _newQuene;
		},
		/**
		 * 格式化动画格式
		 * @param {String|Object} 元素选择器
		 * @param {Object} animation
		 * {
		 *	name: 'bounce',
		 *	duration: 1,
		 *	delay: 1,
		 * 	loop: 1
		 * }
		 */
		_animationStyleFormat: function (selector, animationStyle) {
			var  $ = this.$;
			var self = this;
			var __quene = [];

			var animation = {
				e: $(selector)[0],
				p: '',
				o: {}
			};
			var duration = parseFloat(animationStyle.duration) * 1000;
			var delay = parseFloat(animationStyle.delay) * 1000;
			var interationCount = parseInt(animationStyle.loop);
			var loop = animationStyle.loop === true ? 1000 : (interationCount ? interationCount : 1); //1000认为是无限循环
			animation.o.duration = duration;
			animation.o.delay = delay;
			animation.p = animationStyle.name;
			__quene = self._dealLoop(animation, loop);
			return __quene;
		},
		/**
		 * 动画队列格式化
		 * @param {String|Object} 元素选择器
		 * @param {Array|Object} 动画队列
		 */
		_format2velocity: function (selector, quene) {
			var  $ = this.$;
			var self = this;
			var _newQuene = [];

			if($.isPlainObject(quene)) {
				return self._animationStyleFormat(selector, quene);
			}

			$.each(quene, function(i, animationStyle) {
				var __quene = self._animationStyleFormat(selector, animationStyle);
				_newQuene = _newQuene.concat(__quene);
			});

			return _newQuene;
		}
	};

 

     目前这种方式存在的问题：如果同时操作多元素执行多种动画，在移动端性能可能较差，目前正考虑如何解决。能想到的思路是：

     1.开启硬件加速，避免多次重排、重绘

     2.改进多元素执行的动画方式

     3.待深入研究，算是抛出一个问题吧

 

     目前使用上述方式在移动端和PC端有一些例子，感兴趣的可以了解一下。后续会继续解决性能问题。

　　PC例子

　　移动版例子（建议使用手机模式访问）

    

注：更多例子可以看这里。