Velocity.js 动画库使用指南与核心参数详解

Velocity.js 动画库使用指南与核心参数详解

前言

时值七月，久未更新技术文章。上月实习结束并离职后，近期忙于个人项目、考取驾照及送别女友等事务。经过半个月的调整，现已安顿妥当，决定重新静下心来钻研新技术并撰写技术文章，期望能保持这一学习习惯。

JS动画与Velocity.js简介

JS动画

随着互联网内容的日益丰富，网页美化技术与新特性层出不穷。作为网站浏览者，除了关注网站的流畅度外，炫酷的交互动效往往更具吸引力。

网页的交互动效主要可分为CSS动画与JS动画两类。

JS动画的优点

JS动画的优点

了解这两类动画后，我们来分析它们各自的优势。

1. CSS动画基于CSS3属性自定义，无需进行复杂计算或修改DOM结构，因此运行非常流畅。
2. JS动画拥有强大的性能，且在功能实现上优于CSS动画。由于JS直接改变属性值，不受CSS的限制，能实现更多复杂功能。有人可能认为某些JS动画库较慢，但这通常是因为配合jQuery使用时，jQuery本身的功能导致性能下降。实际上，JS动画本质上是快速的。

Velocity.js 使用方法

velocity.js 使用方法

JS动画库众多，各有优劣，例如jQuery自带的animate、WebGL，或利用Canvas、SVG实现的效果。本文将重点介绍Velocity.js这一动画库。

Velocity.js既可单独通过JavaScript使用，也可配合jQuery使用。使用方法如下：请先下载velocity.js并在body标签下引入，随后在新script标签中编写代码。

//jquery方法 
var $div = $('div')
$div.velocity({属性:值,属性:值})
//javascript 方法
var oDiv = document.getElementById('div')
oDiv.velocity({属性:值,属性:值})

使用时需注意以下几点：

1. 属性名不能加引号，若值为字符串则需加引号，若为整数则无需引号，例如 width:100 和 width:"100px"。 2. 属性值不可一次性传入多个值。在CSS中 padding:5px 5px 6px 5px; 可简写，但在Velocity中需分别传入，如 {paddingLeft:5, paddingRight:5...}。 3. 若属性值涉及多个转折，第二个单词首字母需大写，如上例所示。

velocity.js 详细介绍

velocity.js 详细介绍

前文已述，需改变的值作为对象传入Velocity的第一个参数，第二个参数则是指定的动画选项，包含：

+ duration 持续时间 + easing 缓动方式 + delay 延迟执行 + loop 循环次数 + begin 和 complete 回调函数 + display (值与CSS相同，可设置为auto)

在讲解具体动画选项前，先说明Velocity支持的值类型：px、em、rem、%、vm、vh，或利用运算符 *=2 表示当前值的2倍，或 /=2 等运算方式。

下面逐一分析上述指定动画选项：

duration 持续时间

duration 持续时间

这代表动画的持续时间，默认单位为毫秒(ms)。你可以这样使用：

// 表示一秒内将透明度从1到0
$div.velocity({opacity:0},{duration:1000})

也可以简写为：

// 效果相同
$div.velocity({opacity:0},1000)

Velocity还自定义了三种持续时间快捷方式：slow（600ms）、normal（400ms）、fast（200ms），可根据实际需求选用。

easing 缓动方式

easing 缓动方式

这代表动画以何种方式进行变换，包括：ease-in-out（逐加逐减）、ease-in（先加速后匀速）、ease-out（先匀速后减速）。

此外，还可根据三角函数缓动 "easeInOutSine"、CSS贝塞尔曲线 [0.17,0.67,0.83,0.67] 或弹簧物理 [张力，摩擦力] 等值进行实现。

delay 延迟执行

delay 延迟执行

表示动画延迟多少时间后执行，默认单位为毫秒(ms)。

// 五秒后执行此动画
delay：5000

loop 循环次数

loop 循环次数

表示动画需要的循环次数：

// 循环五次
loop:5
// 无限循环
loop:true 

begin和complete回调函数

begin和complete回调函数

这两个参数表示在动画开始前和动画结束后所执行的函数：

begin:function(){ somgthing... },complete:function(){ somgthing... }

其他功能：

Velocity还有一些其他功能，此处暂不展开，例如：reverse（反转）、scrolling（滚动）、color（颜色）、transform（变换，包含scale缩放、rotate旋转、translation平移等）。

结语

结语

总之，前端技术日新月异，作为程序员更应不断学习新技术。既然热爱，便永无止境。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。