velocity.js 基础

最新推荐文章于 2022-10-12 00:17:10 发布

「已注销」

最新推荐文章于 2022-10-12 00:17:10 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： jquery velocity

本文链接：https://blog.csdn.net/duola8789/article/details/78950585

版权

JavaScript 专栏收录该内容

94 篇文章 0 订阅

订阅专栏

概述

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

中文文档在此。

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

Hello Velocity

可以使用script标签引入，也可以通过npm安装

npm install velocity-animate

简单的小例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>velocity.js</title>
  <script src="../lib/velocity.min.js"></script>
  <style>
    #ele {
      position: relative;
      width: 200px;
      left: -200px
    }
  </style>
</head>
<body>
<p id="ele">Hello Velocity</p>
<script>
  'use strict';
  let ele = document.getElementById('ele');
  Velocity(ele,
    {
      left: '0'
    }, {
      duration: 1000
    })
</script>
</body>
</html>

基础用法

Velocity.js 可以在不引入 jQuery 的情况下单独使用。如果你需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×。它也可以和 Zepto 一起使用，写法和 jQuery 一样：

// 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上 (window.velocity)
// ( 第一个参数为原生js的dom选择器 )
Velocity(document.getElementById("dummy"), {
    opacity: 0.5
}, {
    duration: 1000
});

// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});

无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上，第一个参数就是DOM选择器绑定的DOM元素

在Vue中使用的就是这种形式：

leave: function(el, done) {
  var vm = this
  Velocity(el, {
    opacity: 0
  }, {
    duration: this.fadeOutDuration,
    complete: function() {
      done()
      vm.show = true
    }
  })
}

el就是传入的DOM元素

如果要使用 jQuery，应该先引入 jQuery，然后再引入 velocity

参数

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
  }
});

也可以采用类似 $.animate 的逗号分割的参数写法：

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

个人认为第一种写法简洁明了

Properties Map 动画属性

如果不写属性值的单位, 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 还支持动态计算属性值，包括 “+, -, *, /”，还可以设置元素在动画执行前的初始值，看下面示例：

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

通常，在动画执行前动画引擎会先查询 DOM 以确定元素的初始值， Velocity 可以让用户自定义元素初始值这样可以避免 DOM 查询。数组第二项为初始值

backgroundColor : ['#fdf', '#232']

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

属性值可通过传递一个函数来设置动画效果

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

Chaining 链式动画

当一个元素连续应用多个velocity()时，动画将以队列的方式执行：

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

回调函数

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为动画执行过程中调用的函数，有elementscomplete, remaining, start, tweenValue5个参数：

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

mobileHA 移动端硬件加速

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

Loop 动画循环执行

用法1:设置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 });

注意，如果在loop过程中，每次循环都会执行delay

Display & Visibility

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

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

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

效果相当于在completle中执行对应的代码

display 或 visibility 的值可以设为 css 中规定的其他值，比如 display: "inline-block"’

注意：当使reverse方向动画指令时，display 和 visibility 选项都将被忽略。

预设指令

Fade & Slide

“fadeIn” & “fadeOut”
“slideUp” & “slideDown”

Scroll 滚动

滚动浏览器内容到目标元素的位置

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

滚动元素内容到目标位置：当一个元素的内容部分溢出产生滚动条，可以使用"scroll"将内容滚动到指定的位置,container选项对应为该元素的选择器，看下面例子：

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

可以设置相对偏移量，单位默认为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"指令会停止当前正在执行的动画，并直接跳转到动画结束的状态（无过渡）。

$element.velocity("finish");

reverse

"reverse"指令使动画反向执行，就像让一部电影倒着播放。 Reverse 默认会继承之前动画的配置选项（比如duration,easing等），但也可以重新设置：

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

Promises

Velocity 可以使用 ES6 的 Promises 对象的语法方式，但目前只有 Chrome 和 Firefox 支持

/* 使用 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值为 0sm，动画会直接跳转到结束状态，这个方法常用于代码调试。

也可以将$.Velocity.mock设置为一个整数，可以加快或减慢页面上所有的 Velocity 动画速度：

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

UI插件

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

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