javascript动画：velocity.js学习

Posted 2020-06-20

第二章：基础知识

一、velocity和jQuery：

Velocity函数是独立于jQuery的，但两者可以结合使用。通常这么做的好处是可以利用jQuery的链式操作：当你先用jQuery选择了一个元素后，就可以用这个元素去调用.velocity()为它添加动画效果。例如：

//将一个变量分配给某个jQuery元素对象。

var $div = $(“div”);

//使用velocity设置该元素的动画

$div.velocity({ opacity : 0 });

//该句语法与jQuery自有的animate函数相同；

//$div.animate({ opatity : 0 });

二、参数：

velocity接受多个参数。第一个参数是一个对象，用于将CSS属性映射到最终的期望数值上。例如：

//设置元素的width属性值变动至“500px”且其opacity属性值变动至1的动画。

$element.velocity({ width:500px , opacity :1 }) ;

★小提示：如果你提供的属性值包含字母，那么要将它们用半角引号括起来。

         可以将一个指定动画的对象作为第二个参数传入。

         还有一种参数简写语法，那就是不将选项对象作为第二个参数传入，而是使用逗号分隔参数语法。这种写法需要列举出动画的持续时间、缓动形式和动画执行完毕后触发的一个毁掉函数。

三、属性

基于CSS的属性动画与基于javascript的属性动画有两点区别：

1.velocity针对每个CSS属性，只接受一个唯一值，这点与css不同。因此可以这样传入动画：

$element.velocity({ padding : 10 }) ;

要传入多个值时必须一一列出来：

$element.velocity({

                  paddingTop : 10,

                  paddingRight : 10,

                  paddingLeft : 20,

                  paddingBottom : 20

         });

2.javascript的属性名称中，单词之间的连接号去掉了，除第一个单词外，其余单词都首字母大写。例如：padding-left变成了paddingLeft。

四、值

velocity支持px、em、rem、%、deg、vw和vh这些单位，如果没有为数值提供单位，那么就会根据CSS属性类型自动指派一个单位给它。对于大多数属性，px是默认单位。

五、链式操作

         当一个元素链式调用多个velocity函数时，它们会自动排成队列，这意味着前一个动画结束后一个动画马上开始。

六、使用velocity：选项

1.duration（持续时间）

       可以以毫秒为单位指定duration选项，该选项指定一个动画调用需要花费多长时间才能完成，或者也可以将duration指定为以下三个简写duration之一：“slow”（相当于600ms），“normal”（相当于400ms）或“fast”（相当于200ms）。以毫秒为单位指定duration值时，请提供一个不带单位的整数值。

2.easing（缓动）

         “ease-in-out”缓动类型就表示动画一开始要逐渐加速最后要逐渐减速。

         “ease-in”缓动类型则使动画在一开始就达到加速的目的，然后一直到动画结束。

         “ease-out”缓动类型使动画以恒定速度开始并持续一段时间，然后在动画结束前逐渐减速。

（1）jQuery UI中的三角函数缓动：

$div.velocity({width:"300px"},"easeInOutSine");

（2）CSS缓动：

“ease-in”、“ease-in-out”、“ease-out”、“ease”（“ease-in-out”的另一个更缓和的版本）

（3）CSS的贝塞尔曲线：通过贝塞尔曲线缓动，可以完全控制一个缓动加速曲线的结构。参数格式是一个含有四个小数的数组。

$div.velocity({width:"300px"},[0.17,0.67,0.83,0.67]);

（4）弹簧物理

         这类缓动类型就是模仿弹簧在拉伸之后被突然释放的弹动行为。参数格式是一个含有两个值的数组[张力、摩擦力]。张力越大（默认：500），整体速度和弹动幅度就越大。摩擦力越小（默认：20），弹簧结尾处的震动速度就越快。

$div.velocity({width : "300px"},[250,15]);

（5）如果不想实验各种张力和摩擦力数值，“spring”缓动就是一种随手可用的弹簧物理缓动的预设。

$div.velocity({width:"500px"},"spring");

3.begin（开始）和complete（完成）

         使用begin和complete选项可以指定要在动画中的特定时间点触发的函数：为begin设置的函数会在动画开始前触发。与之相反，为complete设置的函数会在动画完成时调用。使用这两个选项，每次调用动画时都会调用一次指定函数，即使同时制作多个元素的动画也是如此。

$div.velocity(

                  { opacity:0 ,width:"500px"},

                 

                  {

                          begin : function(){

                                   alert("begin!");

                          },

                          complete : function(){

                                   alert("complete!")

                          }

                  })

4.loop（循环）

         将loop选项设置为一个整数，该整数是几，动画就在调用的属性映射汇总的值与调用之前元素的值之间交替几次。

$div.velocity({height:"10em"},{loop : 2});

         除了可以传入整数以外，还可以将true传给loop，这样会无限触发循环。

         无限循环对于加载指示器大有帮助。（警灯）

$div.velocity({ opacity:0},{loop:true});

5.delay（延迟）

         将delay指定为多少毫秒，在动画开始之前就会暂停多长时间。delay选项的目的是将动画的定时逻辑完全保留在velocity内，而不是在velocity的动画开始时依赖jquery的$.delay()函数来更改。

$div.velocity({opacity:0},{delay:100})；

         可以同时设置delay和loop选项，这样可以在循环交替之间创建一个停顿。

//循环四次，每次循环之间都等待1000毫秒

$div.velocity({height:"+=100px",width:"+=100px"},{loop:4,delay:1000});

6.display（显示）和visibility（可见性）

         velocity中的display和visibility选项与CSS中的同名属性一一对应，接受的值也相同，包括“none”，“inline”，“inline-block”，“block”，“flex”等。

$div.velocity({opacity:0},{display:"block"});

七、其他功能

velocity.js的其他值得一提的功能包括：reverse（反转）、scrolling（滚动）、color（颜色）和transform（变换，包括translation“平移”、rotate“旋转”和“scale”缩放）