1、简介

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用。

2、兼容性

可兼容到 IE8 和 Android 2.3。

若需要兼容 IE8,就必须引入 jQuery 1.x

3、示例代码(注意文件引用路径)

(1)index.html

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>velocity.js使用</title>
</head> <body>
<div class="box" id="div1"> </div>
<div class="box" id="div2"> </div>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script>
<!--velocity.ui 在 velocity 之后加载-->
<script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body> </html>

(2)style.css

.box{
width: 100px;
height: 100px;
background-color: pink;
}

(3)index.js

(function($) {
// $('#div1').velocity({
// width: '300px'
// }, {
// //动画时长
// duration: 3000,
// //动画执行完后执行的回调
// complete: function() {
// $('#div2').velocity({
// width: '300px'
// }, {
// duration: 3000
// })
// }
// });
//动画序列
// var seq = [{
// elements: $('#div1'),
// properties: {
// width: '300px'
// },
// options: {
// durations: 1000
// }
// },
// {
// elements: $('#div2'),
// properties: {
// width: '300px'
// },
// options: {
// durations: 1000
// }
// }
// ];
// $.Velocity.RunSequence(seq); //预定义动画
$('#div1').on('mouseover',function(){
$(this).velocity('callout.shake')
});
})(jQuery);

4、使用

(1)参数配置:

$element.velocity({
properties: { opacity: 1 },
options: { duration: 500 }
}); // 或者:
$element.velocity({
p: { opacity: 1 }, // 可以将 properties 简写成 p
o: { duration: 500 }
});

基础配置

$element.velocity({
width: "500px", // 动画属性 宽度到 "500px" 的动画
properties: value2 // 属性示例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400, // 动画执行时间
easing: "swing", // 缓动效果
queue: "", // 队列
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数(该函数会随着动画执行被不断触发)
complete: undefined, // 动画结束时的回调函数
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环
delay: false, // 延迟
mobileHA: true // 移动端硬件加速(默认开启)
});

(2)Complete属性

complete为动画结束时的回调函数,在无限循环模式下(设置loop: true) 该回调函数将不会执行,但是有规定次数的循环模式下(比如设置设置loop: 3) 该回调函数 将只会在最后一次循环结束后 执行一次。

(3)delay属性

和 jQuery 的$.delay()方法一样,动画将会延迟所设定的毫秒后执行。

(4)支持SVG动画

(5)velocity.ui.js 

velocity.ui.js 是 velocity.js 的 动画插件(1.8 KB ZIP’ed) 我们可以用它快速创建炫酷的动画特效,它依赖于 velocity.js。

elocity.ui 有2个重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允许你将多个 Velocity 动画合并存储到一个自定义数组里,你可以通过引用该数组的名称 在项目中复用, 后者能帮你改进嵌套的动画序列 使得更易于管理。

Velocity.ui.js 内置了很多常用的动画特效,分为 callout.* 和 transition.* 两类。

Velocity.js动画库使用的更多相关文章

  1. 聊聊JS动画库:Velocity.js

    前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...

  2. 推荐 11 个好用的 JS 动画库

    为了保证的可读性,本文采用意译而非直译. 1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了<canvas>. ...

  3. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  4. Jwalk发布——一个比较小的Js动画库

    断断续续折腾了几个晚上终于于周日把Jwalk发布了,顺便用了下yahoo的前端框架-pure css ,很简洁,非常帅.推荐使用以下. 下面说下Jwalk是做什么的: 前端开发过程中经常会用到一些动画 ...

  5. TweenJS----前端常用的js动画库,缓动画和复制动画的制作,效果非常好。

    TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://ww ...

  6. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  7. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  8. Velocity.js的使用

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

  9. vue里面使用Velocity.js

    英文文档:http://velocityjs.org/ https://github.com/julianshapiro/velocity 中文手册(教程):http://www.mrfront.co ...

随机推荐

  1. 使用 padding-bottom 设置高度基于宽度的自适应

    我们在做移动端列表,通常会做到图文列表,列表是自适应的.当列表中有图片,图片的宽度是随着列表宽的变化而变化,我们为了在图片宽度变化的时候做到图片的不变形,所有采用以下办法. 本文章只讲语法 html ...

  2. 三、第一个cocos2d程序的代码分析

    http://blog.csdn.net/q199109106q/article/details/8591706 在第一讲中已经新建了第一个cocos2d程序,运行效果如下: 在这讲中我们来分析下里面 ...

  3. kvm qemu内幕介绍

    转自:http://blog.csdn.net/wj_j2ee/article/details/7978259目录 1 硬件虚拟化技术背景 2 KVM的内部实现概述 2.1 KVM的抽象对象 2.2 ...

  4. JQuery实现多个菜单的显示隐藏

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 点击各个菜单显示/隐藏,以及点击灰色部分隐藏. 比如点击了第一个菜单,然后点击第二个菜单,第一个菜单会隐藏,再显示第二个菜单,不会叠加. ...

  5. Python学习杂记_12_函数(三)

    内置函数 Python有很多内置函数,以下这些是常用且必须要掌握的: 强制类型转换: bool() # 把一个对象转换成布尔类型 int() # 整形 float() # 小数 str() # 字符 ...

  6. XXXX公司微课大赛技术储备

    XXXX公司微课大赛技术储备 发短信验证 http://www.yunpian.com/ 发邮件 http://sendcloud.sohu.com/ flash头像上传组件 http://www.h ...

  7. C#集合类:动态数组、队列、栈、哈希表、字典(转)

    1.动态数组:ArrayList 主要方法:Add.AddRange.RemoveAt.Remove 2.队列:Queue 主要方法:Enqueue入队列.Dequeue出队列.Peek返回Queue ...

  8. Codeforces 938D Buy a Ticket (转化建图 + 最短路)

    题目链接  Buy a Ticket 题意   给定一个无向图.对于每个$i$ $\in$ $[1, n]$, 求$min\left\{2d(i,j) + a_{j}\right\}$ 建立超级源点$ ...

  9. Spring Cloud底层原理(转载 石杉的架构笔记)

    拜托!面试请不要再问我Spring Cloud底层原理 原创: 中华石杉 石杉的架构笔记   目录 一.业务场景介绍 二.Spring Cloud核心组件:Eureka 三.Spring Cloud核 ...

  10. java中split任意数量的空白字符

    java程序中经常通过split截取字符串来取得其中的关键字.但是由于其中不同操作系统或者不同作者的习惯,经常会出现不同数量的空格,例如"   "(3个空格):或者出现制表符.Ta ...