转载

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例子

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

velocity序列动画