Begin

begin为动画开始前的回调函数,但在循环模式下(设置了loop选项时),该函数只会在第一次循环前执行一次。

Complete

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

Progress

progress为动画执行过程中调用的函数, 有elements、complete、remaining、start、tweenValue5个参数:

  1. elements:当前执行动画的元素,可以用$(elements)来获取
  2. complete:整个动画过程执行到百分之多少,该值是递增的,注意:该值为一个十进制数值 并不带单位 (%)
  3. remaining:整个动画过程还剩下多少毫秒,该值是递减的
  4. start:动画开始时的绝对时间 (Unix time)
  5. tweenValue:动画执行过程中 两个动画属性之间的补间值

请在浏览器控制台中查看(F12-Console):

mobileHA 移动端硬件加速

mobileHA可以设置是否开始移动端硬件加速, 默认值为true,你也可以通过设置 mobileHA: false关闭硬件加速

 Loop 动画循环执行

用法1:设置loop为一个正整数,比如如设置loop: 2,就可以让动画循环执行2次:

如果设置loop: true,可以让动画无限循环执行:

Delay 动画延迟执行

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

Display & Visibility

可以在动画执行结束后 动态设置元素的 css 属性:displayvisibility

也可以自定义动画队列,但不会立即执行,需要通过dequeue()方法手动执行动画,这有个 Demo 演示了这个过程

注意:loop循环选项 和reverse反向动画指令,不能和队列一起使用。

Velocity 提供了丰富的可选配置项,可以更好的控制动画,你也可以利用这些配置做出炫酷复杂的动画特效。

1. Duration 动画执行时间

Velocity 的动画执行时间以毫秒为单位,并支持 jQuery 中的动画速度关键字: “slow”,“normal”,“fast”

2. Easing 缓动效果

2-1. 默认 5 种缓动方式

  1. jQuery UI 的缓动关键字(预定义在 Velocity 源码中)
  2. CSS3 的缓动关键字
  3. CSS3 贝塞尔曲线
  4. 弹簧物理缓动(spring physics)
  5. 步骤缓动(step easings)

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画转换动画(transforms)循环、 缓动SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅,性能甚至高于 CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被数以千计的公司使用在自己的项目中,包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等,这里 Libscore.com 统计了哪些站点正使用 velocity.js。

英文官网:http://velocityjs.org/

先来看第一个 Velocity 的例子: