前方的语

  Velocity是均等放缓好之JS动画库,完全好用作jQuery的animate的替代品。需要动画效果时,使用Velocity是一个好选。本文将详细介绍Velocity.js的使用

 

概述

  Velocity是一个简易容易用、高性能、功能丰富的轻量级JS动画库。它同jQuery的animate()发生相同之API,
但它不依赖
jQuery,可单独行使。Velocity不仅含有了$.animate()的万事功能,还拥有:颜色动画、转换动画(transforms)、循环、缓动、SVG动画和滚动动画等特点功能。它于$.animate()更快又通畅,性能还是凌驾CSS3
animation,是jQuery和CSS3
transition的最佳结合,它支持所有现代浏览器,最低可匹配到IE8和Android 2.3

【下载】

  可以经过官网直接生充斥Velocity.js,下载地址

  也得使npm安装

npm install velocity-animate

 

核心用法

  当以jQuery时,Velocity和jQuery的animate()用法类似

$("#test").velocity({
    left: "200px"
}, {
    duration: 450,
    delay: 300
});

  不动jQuery时,写法如下

  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  }); 

  下面是一个实例

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  var oBox = document.getElementById('test');
  Velocity(oBox,{
      left: "200px"
  }, {
      duration: 450,
      delay: 300
  }); 
}
</script> 

 

参数设置

  Velocity 接收一组 css 属性键值对 (css map)
作为其的首先个参数,该参数作为动画效果的最后属性。第二单参数是可选参数
为动画的附加安排起。下面为参数的写法:

$element.velocity({
    width: "500px",        // 动画属性 宽度到 "500px" 的动画
    property2: 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         // 移动端硬件加速(默认开启)
});

【单一对象参数写法】

  Velocity 也支持 single-argument 的语法

$element.velocity({
    properties: { opacity: 1 },
    options: { duration: 500 }
});

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

【逗号分割的参数写法】

$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

【单位】

  如果无写属性值的单位, Velocity 会将像素(px)作为默认单位

// 等同 padding: 1px
$element.velocity({ padding: 1 });

// 等同 padding-left: 1px, padding-right: 1px
$element.velocity({
    paddingLeft: 1,
    paddingRight: 1
});

// 不能这样写!因为这样相当于为 padding 赋了多个值
$element.velocity({ padding: "1 1 1 1" }); // error

  Velocity 在 1.2.0+ 版本里增加了对 “px, em, rem, %, deg, vw/vh”
这些单位之支撑。如果非填属性单位,默认单位还是”px”,但 “deg” 用于
rotateZ 属性时方可简单不写

【计算属性】

  Velocity 还支持动态计算属性值,包括
“+, -, *, /”,还可设置元素于动画执行前之初始值

  [注意]”rem” 只支持 IE9+,”vh/vw” 只支持 IE9+ 和
Android 4.4+ 

$element.velocity({
    top: 50,                // 等同于 "50px"
    left: "50%",
    width: "+=5rem",        // 每次在当前值上叠加 5rem
    height: "*=2"           // 每次在当前值上叠乘 2
    color: ["#888", "#000"] // 每次动画执行前,color 的初始值都为"#000"(从"#000"过渡成"#888")
});

【链式动画】

  当一个素连续用多单velocity()时,动画将以行的道履行

$element
    /* 先执行宽度变为75px的动画 */
    .velocity({ width: 75 })
    /* 等前面的宽度动画结束后,再执行高度变为0的动画 */
    .velocity({ height: 0 });

  下面是一个例子

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:150px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
reset.onclick = function(){history.go();}
btn.onclick = function(){
  $('#test').velocity({left:200}, {duration:500,complete:function(el){
    el[0].style.backgroundColor = 'lightblue';
    el[0].innerHTML = '小火柴的蓝色理想';
  }}).velocity({width:300})
}
</script> 

 

配置项

  Velocity
提供了增长的可选配置起,可以重新好之控制动画,也得以利用这些安排做出炫酷复杂的卡通片特效

【执行时】

  Velocity 的卡通执行时以毫秒为单位,并支持 jQuery
中之卡通片速度要字: “slow”,”normal”,”fast”

$element.velocity({ opacity: 1 }, { duration: 1000 });

// 支持 jQuery 中的动画速度关键字:
$element.velocity({ opacity: 1 }, { duration: "slow" });

【easing缓动效果】

  Velocity默认包含5种缓动效果

  1、jQuery UI的缓动关键字

"linear"
"swing"
"spring"
"easeInSine"
"easeOutSine"
"easeInOutSine"
"easeInQuad"
"easeOutQuad"
"easeInOutQuad"
"easeInCubic"
"easeOutCubic"
"easeInOutCubic"
"easeInQuart"
"easeOutQuart"
"easeInOutQuart"
"easeInQuint"
"easeOutQuint"
"easeInOutQuint"
"easeInExpo"
"easeOutExpo"
"easeInOutExpo"
"easeInCirc"
"easeOutCirc"
"easeInOutCirc"

  2、CSS3休息动关键字

"ease"
"ease-in"
"ease-out"
"ease-in-out"

  3、CSS3 贝塞尔曲线

[ 0.17, 0.67, 0.83, 0.67 ]

  4、弹簧物理缓动(spring physics)

   因2个数组的形式 [ tension, friction
],tension最可怜价值吗500,friction 最可怜价值为20

  5、步骤缓动(step easings)

  因1各项数组的款型 使动画通过点名的手续过渡至了值

/* 标准写法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

/* 或 */
$element.velocity({ width: 50 }, "easeInSine");

/* jQuery UI easings */
$element.velocity({ width: 50 }, "easeInSine");

/* CSS3 easings */
$element.velocity({ width: 50 }, "ease-in");

/* 贝塞尔曲线 */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

/* 弹簧物理 */
$element.velocity({ width: 50 }, [ 250, 15 ]);

/* step easing */
$element.velocity({ width: 50 }, [ 8 ]);

  缓动可应用叫单个属性

$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 默认所有属性使用 "easeInSine"
});

  可以透过函数的款型登记于定义之缓动效果,函数将受扩大至$.Velocity.Easings对象及

// p:动画完成的百分比(十进制值)
// opts:传递到触发 .velocity() 调用的选项
// tweenDelta:补间
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

 【动画队列】

  可以透过设置queue:
false 强制并行执行一个初动画

// 执行宽度变为"50px"的动画
$element.velocity({ width: "120px" }, { duration: 3000 });

setTimeout(function() {
    /* 1.5秒后 开始并行执行高度变为"50px"的新动画 */
    $element.velocity({ height: "120px" }, { duration: 1500, queue: false });
}, 1500);

  下面是一个例

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  // 执行宽度变为"50px"的动画
  $("#test").velocity({ width: "200px" }, { duration: 3000 });  
  setTimeout(function() {
    /* 1.5秒后 开始并行执行高度变为"50px"的新动画 */
    $("#test").velocity({ height: "200px" }, { duration: 1500, queue: false });
  }, 1500);  
})
</script> 

  也堪起定义动画队列,但无会见这执行,需要通过dequeue()方法手动执行动画

// 自定义队列,这里并不会立即执行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒后 执行队列"a"的动画
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒后 执行队列"b"的动画
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

  [注意]loop循环选项 和reverse反朝动画指令,不克与排一起以

【回调函数】

begin()

  begin为动画片开始前之回调函数,但于循环模式下(设置loop选项时),该函数就会以第一糟巡回前实行同样赖

$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

complete()

  complete为卡通结束时之回调函数,在绝循环模式下(设置loop: true)
该回调函数将未会见履行,但是来规定次数的循环模式下(比如安loop: 3)
该回调函数将只是见面当末一不成巡回结束晚行同一次于

$element.velocity({
    opacity: 0
}, {
    complete: function(elements) { console.log(elements); }
});

$element.velocity({
    opacity: 0
}, {
    // 动画循环执行3次
    loop: 3,
    // 回调函数将在第3次循环结束后 执行一次
    complete: function(elements) {
        alert("I am hungry!");
    }
});

progress()

  progress为卡通执行过程遭到调用的函数,
有elements、complete、remaining、start、tweenValue5个参数

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

$element.velocity({
    opacity: 0,
    tween: 1000 // 可选的
}, {
    duration: 2000,
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

// 可以简写这些参数:
$element.velocity({
    tween: [ 0, 1000 ]
}, {
    easing: "spring",
    progress: function(elements, c, r, s, t) {
        console.log("The current tween value is " + t)
    }
});

【移动端加速】

  mobileHA可以安装是否开始移动端硬件加速,
默认值为true,也得以由此设置 mobileHA: false关闭硬件加速

// 关闭移动端硬件加速
$element.velocity(propertiesMap, { mobileHA: false });

【Loop动画循环执行】

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

// 循环执行2次(注意:元素height值变化到10em 再从10em变化到初始值 是一次循环)
$element.velocity({ height: "10em" }, { loop: 2 });

  如果设置loop:
true,可以吃动画最循环执行

$element.velocity({ height: "10em" }, { loop: true });

【Delay动画延迟执行】

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

// 动画将延迟1500毫秒后执行
$element.velocity({ height: "+=10em" }, { delay: 1500 });

【display 和 visibility】

  可以在动画执行了晚 动态设置元素的 css 属性display或visibility

/* 动画结束后 元素 display 属性设为 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

/* 动画结束后 元素的 visibility 属性设为 hidden */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });

  display 或 visibility 的价值好假设为 css 中确定之另价值,比如 display: “inline-block”

  [注意]当使用reverse方向动画指令时,display 和 visibility
选项还以吃忽视。

 

动画指令

  Velocity 中预定义了几乎独常因此之快速动画指令

【fade】

  Fade对许为”fadeIn”(淡入) 和”fadeOut”(淡出) 两个卡通指令, 和 jQuery 的$.fadeIn()和$.fadeOut()相似

  Fade 和 Slide 动画指令都见面动态设置元素的display属性显示或躲藏。
默认情况下,当元素让出示,如果是块级元素(如<div>),就见面叫装置成display: block,如果是行级元素(如<span>),就会为设为display:
inline。Velocity会根据元素的签类型设置极端适合之价

  如果以配置起中安了display选项也某值时, 动画完时该值会覆盖 Fade 和
Slide 所装的display属性值

// 元素会执行平滑淡入的效果
// 当动画结束时 元素的 display 属性会被设置成 "table"
$element.velocity("fadeIn", { display: "table" });

  下面是一个例证

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = true;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("fadeIn"); 
  }else{
    $("#test").velocity("fadeOut"); 
  } 
})
</script> 

【slide】 

  Slide 对许为:”slideUp”(收起) 和”slideDown”(展开)两个卡通指令, 和 jQuery 的$.slideUp(),$.slideDown()方法一般,通过动态调整元素的height属性,让正素 “收起” 或
“下拉”

// 元素会先"收起"隐藏,延迟500毫秒后 再"下拉"显示
$element
    .velocity("slideUp", { duration: 1500 })
    .velocity("slideDown", { delay: 500, duration: 1500 });

  下面是一个例证

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
var OnOff = false;
$("#btn").click(function(){
  if(OnOff = !OnOff){
    $("#test").velocity("slideUp"); 
  }else{
    $("#test").velocity("slideDown"); 
  } 
})
</script> 

【scroll】 

  1、滚动浏览器内容及目标元素的职

  ”scroll”动画指令,比如常用之回顶动画就可以以这个命令

/* 回顶动画,滚动浏览器内容到 <body> 的顶部 */
$("body").velocity("scroll", { duration: 500, easing: "easeOutQuart" });

  下面是一个例

<body style="height:2000px">
<button id="btn" style="position:fixed;right:0;bottom:0">回到顶部</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $(document.documentElement).velocity("scroll", { duration: 500, easing: "easeOutQuart" });
})
</script> 
</body>

  2、滚动元素内容到对象位置

  当一个要素的情节有溢起有滚动条,可以利用”scroll”将内容滚动到指定的职,container选项针对诺为该因素的选择器

/* 让 $("#container") 元素的内容滚动到内部子元素 $("#element3") 所在的位置. */
$("#element3").velocity("scroll", { container: $("#container") });

<div id="box" style="height:100px;width:200px;overflow:auto">
  <p id="element1">1 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element2">2 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
  <p id="element3">3 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element4">4 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element5">5 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
  <p id="element6">6 element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p> 
</div>
<button id="btn">到第四段</button>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#btn").click(function(){
  $("#element4").velocity("scroll", { container: $("#box"), easing: "easeOutQuart" });
})
</script> 

  3、 设置滚动相对偏移量

  可以设置相对偏移量,单位默认为px

$element
    /* 滚动到相对 $element 向下偏移250px的地方 */
    .velocity("scroll", { duration: 750, offset: 250 })
    /* 再滚动到相对 $element 向上偏移50px的地方 */
    .velocity("scroll", { duration: 750, offset: -50 });

  另外,当滚动整个浏览器窗口时,如果目标元素也<html>, 可以关闭硬件加速,设置mobileHA: false来避免 iOS
中或者出现的页面闪动问题

/* 滚动整个页面到一个任意值 */
$("html").velocity("scroll", { offset: "750px", mobileHA: false });

【stop】

  ”stop”指令,可以要当前着实施的动画片就停下,类似
jQuery 的$.stop()方法

$element.velocity("stop"); // 停止正在执行的 $element 元素的动画
$element.velocity("stop", "myQueue"); // 停止某自定义队列
$element.velocity({ left: 100 });
// 点击 $("#button"),立即停止当前正在执行的 left 动画
// 并立即反向执行 left 动画 (right 方向运动)
$("#button").on("click", function() {
    $element.velocity("stop").velocity("reverse");
});

  设置stop: true,
可以告一段落并清空当前在实行的尽动画队列

$element
    .velocity({ width: 100 }, 1000)
    .velocity({ height: 200 }, 1000);

// 如果元素正在执行 width 动画,点击 $("#button") 将立即停止当前动画
// 并移除和跳过将要执行的 height 动画队列
$("#button").on("click", function() {
    $element.velocity("stop", true);
});

【finish】

  ”finish”指令会停止当前着履行之卡通片,并直跨越反至动画结束的状态(无连接)

【reverse】

  ”reverse”指令使动画反朝行,就如给同样统影片倒着播放。
Reverse 默认会继承之前动画的部署选(比如duration,easing等),
但也得以重复设置

$element
    .velocity({ left: 200 }, { duration: 500 })
    .velocity("reverse", { duration: 2000 });

  下面是一个事例

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({left:200}).velocity("reverse"); 

})
</script> 

 

特征动画

  Velocity 提供了有特色动画效果

【transform】

  Velocity 支持2D/3D变换动画, 比如translate, scale, rotate, skew等

$element.velocity({
    translateX: "200px",
    rotateZ: "45deg"
});

  以下列举了拥有常用之 transform 相关可用属性:

{
    /* translate */
    translateX: 20,     // 等同于"20px"
    translateY: "1.5em",
    translateZ: "20px", // IE10+

    /* scale */
    scale: 0.5,
    scaleX: 0.5,
    scaleY: 0.5,

    /* rotate */
    rotate: 45,       // 等同于"45deg"
    rotateX: "45deg", // IE10+
    rotateY: "45deg", // IE10+
    rotateZ: "45deg",

    /* skew */
    skewX: "30deg",
    skewY: "30deg",
}

  [注意]浏览器支持:> IE9

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({rotateZ: "45deg"}).velocity("reverse"); 
})
</script> 

【colors】

  Velocity颜色动画支持之水彩属性有:color, backgroundColor, borderColor, outlineColor。 属性值支持:rgb, hsla,
十六进制颜色码,但无支持至关重要词 比如:”green”

$element.velocity({
    backgroundColor: "#ff0000",
    /* 背景色 RGBA 中的 A 透明度到50%  */
    backgroundColorAlpha: 0.5,
    /* 字体颜色 RGB 中的 Red 到 50% (0.5 * 255) */
    colorRed: "50%",
    /* 字体颜色 RGB 中的 Blue 值叠加50 */
    colorBlue: "+=50",
    /* 字体颜色 RGBA 中的 A 透明度到85% */
    colorAlpha: 0.85
});

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({backgroundColor: "#0f0"}).velocity("reverse"); 
})
</script> 

【svg】

  Velocity 支持 SVG 元素动画,包含有常用 SVG 属性, 例如:x, y, rx, fill, stroke-width, opacity 等

$svgRectangle.velocity({
    /* 坐标动画 */
    x: 200,
    r: 25,
    /* 2D 变换动画 */
    translateX: "200px",
    /* 3D 变换动画(非IE浏览器) */
    translateZ: "200px",
    /* 颜色填充动画 "Fill" */
    fill: "#ff0000",
    strokeRed: 255,
    strokeGreen: 0,
    strokeBlue: 0,
    /* 一些标准的 CSS 属性动画 */
    opacity: 1,
    width: "50%"
});

  [注意]浏览器支持:>= IE9 和 >= Android 3.0

【Hook】

  Hook 可以装多个CSS属性中之独一个价,比如 “boxShadow”,
“clip”等,作用与 jQuery 的$.css()方法一般

$.Velocity.hook($element, "translateX", "500px"); // 值必须写上单位
$.Velocity.hook(elementNode, "textShadowBlur", "10px"); // 值必须写上单位

  还好抱单个 CSS 属性的价

$.Velocity.hook($element, "translateX"); // 获取元素的translateX值
$.Velocity.hook(elementNode, "textShadowBlur");

【promises】

  Velocity 可以以 ES6 的 Promises 对象的语法方式

/* 使用 Velocity 的公有方法,$element 为dom选择器 可以用jQuery的 或 原生js的 */
$.Velocity.animate($element, { opacity: 0.5 })
    /* 一旦动画执行完成 执行下面.then()中的回调函数(可以写多个.then())*/
    .then(function(elements) { console.log("Resolved."); })
    /* 捕获错误后的回调函数 */
    .catch(function(error) { console.log("Rejected."); });

【Mock】

  如果安$.Velocity.mock =
true; 会强制页面里有的 Velocity 动画的duration和delay值为0ms,动画会直接跨越反至竣工状态,这个办法常用于代码调试

  也堪以$.Velocity.mock设置为一个整数,可以加速或减速页面及拥有的
Velocity 动画速度

/* 页面里所有 Velocity 动画 将以10为系数减慢 */
$.Velocity.mock = 10;

【Utility Function】

  Velocity 的公有方法

/* 标准的多参数语法 */
var divs = document.getElementsByTagName("div");
$.Velocity(divs, { opacity: 0 }, { duration: 1500 });

  另一样栽写法:

// 可选的单参数语法(idea 来源于 CoffeeScript)
// e:element - 元素,一个dom选择器
// p: properties - 属性map { property1: value1, property2: value2, … }
// o: options - 配置选项
var divs = document.getElementsByTagName("div");
$.Velocity({ e: divs, p: { opacity: 0 }, o: { duration: 1500 });

 

高等用法

【函数】

  属性值可由此传递一个函数来安动画效果

// 使 $element 的透明度随机到一个值 的动画,每次执行后 元素透明度都不同
$element.velocity({
    opacity: function() { return Math.random() }
});

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({opacity: function() {return Math.random()}});
})
</script> 

【初始值】

  通常,在动画执行前,动画引擎会先查询 DOM 以确定因素的发端值,
Velocity 可以为用户从定义元素初开始值,这样好避 DOM 查询

$element.velocity({
    /* translateX 初始值永远为0 动画结束值为500px */
    translateX: [ 500, 0 ],
    /* opacity 初始值永远为0 动画结束值为1 缓动效果为"easeInSine" */
    opacity: [ 0, "easeInSine", 1 ]
});

$element
    /* 对于这个链式动画,在每次动画开始前 元素的 translateX 初始值还是0 */
    .velocity({ translateX: [ 500, 0 ] })
    .velocity({ translateX: 1000 });

  下面是一个例

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $("#test").velocity({ left: [ 500, 100 ] }).velocity("reverse");
  })
</script> 

 

UI插件

  velocity.ui.js 是
velocity.js 的
动画插件,可以就此它们高效创建炫酷的动画片特效,它凭借让velocity.js

  velocity.ui 有2独关键艺术:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()

  前者以大半只
Velocity
动画合并存储到一个自定义数组里,可以通过引用该数组的名称在列面临复用,
后者能改进嵌套的动画片序列使得再易管理

【$.Velocity.RunSequence()】

  如果嵌套动画的嵌套层次多常,会难以管理

$element1.velocity({ translateX: 100 }, 1000, function() {
    $element2.velocity({ translateX: 200 }, 1000, function() {
        $element3.velocity({ translateX: 300 }, 1000);
    });
});

  如何缓解地方的题材?直接用$.Velocity.RunSequence()对点代码进行重写:

e:element - 表示元素
p:properties - 属性集
o:options - 配置选项

// 将嵌套动画序列储存到一个数组里,很清晰的显示了它们的执行顺序
var mySequence = [
    { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
    { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
    { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];

// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);

【内置特效】

  Velocity.ui.js 内置了过多常用的动画片特效,分为 callout.* 和
transition.* 两看似,下面是所有的特效名:

callout.bounce
callout.shake
callout.flash
callout.pulse
callout.swing
callout.tada
transition.fadeIn
transition.fadeOut
transition.flipXIn
transition.flipXOut
transition.flipYIn
transition.flipYOut
transition.flipBounceXIn
transition.flipBounceXOut
transition.flipBounceYIn
transition.flipBounceYOut
transition.swoopIn
transition.swoopOut
transition.whirlIn
transition.whirlOut
transition.shrinkIn
transition.shrinkOut
transition.expandIn
transition.expandOut
transition.bounceIn
transition.bounceUpIn
transition.bounceUpOut
transition.bounceDownIn
transition.bounceDownOut
transition.bounceLeftIn
transition.bounceLeftOut
transition.bounceRightIn
transition.bounceRightOut
transition.slideUpIn
transition.slideUpOut
transition.slideDownIn
transition.slideDownOut
transition.slideLeftIn
transition.slideLeftOut
transition.slideRightIn
transition.slideRightOut
transition.slideUpBigIn
transition.slideUpBigOut
transition.slideDownBigIn
transition.slideDownBigOut
transition.slideLeftBigIn
transition.slideLeftBigOut
transition.slideRightBigIn
transition.slideRightBigOut
transition.perspectiveUpIn
transition.perspectiveUpOut
transition.perspectiveDownIn
transition.perspectiveDownOut
transition.perspectiveLeftIn
transition.perspectiveLeftOut
transition.perspectiveRightIn
transition.perspectiveRightOut

【stagger, drag 和 backwards 选项】 

  velocity.ui 有stagger,drag,backwards 三单可选配置起

  [注意]这些选择才当调用内置动画特效时才自作用

stagger

  华语翻译为”错开”,当遍历一组元素时 (each), 设置
stagger 为一个毫秒数 (ms)
能让每个元素依次延迟该毫秒数执行动画,产生同样种去的活动节奏感

// 默认情况下,三个元素会同时运动
// 这里设置了 stagger 为 300 后,每个元素会依次延迟300ms执行动画
$(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });

  下面是一个例证

<style>
.box-stagger{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div class="box-stagger">1</div>
<div class="box-stagger">2</div>
<div class="box-stagger">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });
})
</script> 

drag

  遍历一组元素时 (each),当装drag: true,
最后一个元素会出同样种恍若缓冲的力量,但它和其余因素的动画片的duration是同一的

// 最后一个元素产生缓冲效果
$(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });

  下面是一个例子

<style>
.box-drag{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div class="box-drag">1</div>
<div class="box-drag">2</div>
<div class="box-drag">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });
})
</script> 

backwards

  中文翻译为”向后的”,这个选项通常与drag一起利用,
元素会由最后一个初步逐延迟执行动画

$('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
});

  下面是一个事例

<style>
.box-backwards{width: 100px;height: 100px;border:1px solid black;background:lightgreen;line-height: 100px;color:white;text-align: center;} 
</style>

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div class="box-backwards">1</div>
<div class="box-backwards">2</div>
<div class="box-backwards">3</div>

<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  $('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
  });
})
</script> 

【 $.Velocity.RegisterEffect()】 

  $.Velocity.RegisterEffect()方法允许登记由定义动画特效,以便在项目被复用

// name:动画特效名称 为字符串类型
// defaultDuration:默认动画执行时间 单位为毫秒(ms)
// calls:动画队列数组,property - 动画属性,durationPercentage - 当前动画所占总时间的百分比 (写成浮点数),option - 选项
// reset:设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

  下面是一个利用$.Velocity.RegisterEffect()的例证

$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ], // 0.50 为 动画总时间的50%
        [ { scaleX: 1 }, 0.50 ]
    ]
});

// 调用
$element.velocity("callout.customPulse");

<div id="test" style="height: 100px;width: 100px;background:lightgreen;border-radius: 50%;"></div>
<script>
$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ],
        [ { scaleX: 1 }, 0.50 ]
    ]
});
$("#test").click(function(){
  $(this).velocity("callout.customPulse");
})
</script> 

  还好下 链式的写法 注册一文山会海由定义动画

$.Velocity
    .RegisterEffect("transition.customFlipXIn", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 1, rotateY: [ 0, -55 ] } ]
        ]
    });
    .RegisterEffect("transition.customFlipXOut", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 0, rotateY: 55 } ]
        ],
        reset: { rotateY: 0 }
    });

// 调用
$element
    .velocity("transition.customFlipXIn")
    .velocity("transition.customFlipXOut", { delay: 1000, display: "none" });

 

相关文章

网站地图xml地图