结合上次提到的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序列动画的更多相关文章

  1. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇01:播放序列动画》

    1.播放序列动画 系列动画播放概述 2D游戏中的动画系统,不同于3D游戏.3D游戏中,角色美术资源不仅包含角色模型的,还包括角色的贴图和动作等,模型本身自带角色的动作动画效果.2D游戏中,角色美术资源 ...

  2. 【跟我一起学Unity3D】代码中分割图片而且载入帧序列动画

    在Cocos2dx中.对大图的处理已经封装好了一套自己的API,可是在Unity3D中貌似没有类似的API(好吧,实际上是有的,并且功能更强大),或者说我没找到. 只是这也在情理之中,毕竟Unity3 ...

  3. velocity自定义动画

         话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录.        废话不多说了,进入今天的正题.不知道大家是否记得之前写过的一篇文章<制作炫酷的专题页面& ...

  4. velocity.js 动画插件

    1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...

  5. u3d 2d序列动画代码

    using UnityEngine; using System.Collections; public class AniSprite : MonoBehaviour { private float ...

  6. cocos2d-js 帧序列动画

    1.resource.js var res = { playerWalk_plist:"res/playerWalk.plist", playerWalk_png:"re ...

  7. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  8. Velocity.js的使用

    前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...

  9. Velocity.js初识

    Velocity.js官网:http://julian.com/research/velocity/ 兼容IE8和Android2.3 Velocity.js基本用法 效果图: CSS .box{ w ...

随机推荐

  1. [Angular 2] A Simple Form in Angular 2

    When you create a Form in Angular 2, you can easily get all the values from the Form using ControlGr ...

  2. vc++上的MFC的对象序列化和反序列化

      注意点: 1. 必须类型序列化声明    DECLARE_SERIAL( Person )  2. 必须写出实现宏 IMPLEMENT_SERIAL(Person, CObject, VERSIO ...

  3. centos redis安装

    对redis不是很了解,先写一个简单的安装过程 系统版本:centos 6.5 redis版本:2.8.23 一.安装依赖 sudo yum install tcl gcc gcc-c++ -y 二. ...

  4. Avast注册以及更新

    昨天无聊在网上看Avast,然后下了玩. Avast有三种版本,免费版,网络版,高级版. 下了个高级版,在贴吧和论坛找激活码,发现大部分都没用,最后找了一个许可文件 关于Avast的注册,有在线和离线 ...

  5. Wpf解决TextBox文件拖入问题、拖放问题

    在WPF中,当我们尝试向TextBox中拖放文件,从而获取其路径时,往往无法成功(拖放文字可以成功).造成这种原因关键是WPF的TextBox对拖放事件处理机制的不同, 解放方法如下: 使用Previ ...

  6. C#判断程序是否以管理员身份运行,否则以管理员身份重新打开

    /// <summary> /// 判断程序是否是以管理员身份运行. /// </summary> public static bool IsRunAsAdmin() { Wi ...

  7. Php OpenID

    也许大家都有这样的经历与烦恼:当你为了使用某个网站的服务时(若你还没在该网站上注册过),你不得不先注册一个帐号.当你在一堆的网站上注册帐号后,你必需面临管理这些帐号的烦恼.也许你会这样考虑,不同网站注 ...

  8. VS专案项目无法生成pdb文件解决办法

    在系统盘里找到该项目对应的dll文件(我的是在C:\Windows\Microsoft.NET\assembly\GAC_MSIL目录下),删除该dll后重新生成项目即可.

  9. mssql 查询全部用户创建表 条数及占用空间大小(KB)

    select b.name as tablename , --表名a.rowcnt as datacount,   --条数rtrim(8*a.dpages) as size  --占用空间单位KBf ...

  10. 在MyEclipse中设置Source folders和output folder

    在一个项目中可能会有多个资源文件,它们共同编译输出到输出文件.那么除了默认的src以外,如何把其他文件设置成资源文件(Source folders)呢?