velocity.js_使用Velocity.js进行柔滑流畅的Web动画

velocity.js

如果精心地应用动画，可以改善网站界面，并最终改善网站的用户体验。 在本教程中，我们将研究VelocityJS ，这是一种用于快速性能动画JavaScript动画引擎。 在网络上处理动画时，VelocityJS已成为我的首选之一，我认为原因是：

• 简直更好。 VelocityJS与CSS一样快，并且比jQuery同类产品具有更好的性能，尤其是在移动设备上。 这种性能要好得多，以至于甚至没有讨论过用VelocityJS替换jQuery的核心动画-不幸的是，这种事情不会发生。 CSS动画虽然速度很快，但是在浏览器支持方面受到限制 。 VelocityJS甚至可以追溯到IE8！
• 运行序列FTW 。 RunSequence是VelocityJS中的一种方法，可用于连续执行动画堆栈。 与链接动画功能（如jQuery中）相比，这是一种更为优雅的方法。 仅使用CSS这样做是不切实际的。
• 精益学习曲线 。 VelocityJS提供了与 jQuery 类似的语法。 这使我们可以从jQuery跳到VelocityJS并快速掌握API。

在本教程中，我们将逐步介绍使用VelocityJS进行动画制作的基本知识。 我们还将重点介绍一些可以改善UI设计的功能。 所以，让我们开始吧！

运行基本动画

使用jQuery，假设我们想向右滑动div ，我们将编写如下内容：

$("div").animate({
	left: "500px",
}, {
	duration: 3000, 
	easing: "linear" 
});

以几乎完全相同的方式，我们可以使用VelocityJS编写如下代码：

$("div").velocity({
	left: "500px",
}, {
	duration: 3000, 
	easing: "linear"
});

两个示例都将通过观察元素的left属性将div向右移动500px 3秒。 语法上的可见差异是用于元素动画的方法，VelocityJS使用.velocity()而不是jQuery的.animate() 。

您可能还会注意到性能差异。 jQuery动画有时会有些不稳定，而VelocityJS从头到尾都像黄油一样运行。 搏一搏：

动画化不同CSS属性

VelocityJS接受许多CSS属性以及它们的长期版本来操纵元素。 我们可以在单个VelocityJS实例中一起使用这些属性来执行复杂的动画。 例如：

$("div").velocity({
  borderRadius: "25px",
  width: "45px",
  paddingLeft: "0",
  paddingRight: "0",
  backgroundColor: "#8CC152",
  color: "#fff",
  borderColor: "#8CC152",
  boxShadowX: "0",
  boxShadowY: "0"
}, {
	duration: 350,
	easing: "easeInQuad"
});

在第二个示例中，我们对div进行了一些CSS属性处理，包括使其变小的width ， background-color ， padding ， box-shadow和border-radius来将其转换为一个圆形。

请注意，按照JavaScript命名约定 ，包含两个或多个单词的属性将以camelCase格式设置格式，因此border-radius变为borderRadius等等。 我们还将持续时间缩短到仅350毫秒，这一次，我们选择了easeInQuad因为VelocityJS内置了jQuery UI缓动功能。

动画快捷方式

jQuery提供了一些执行常见动画的方法，例如.slideUp()和.fadeOut() ，它们使元素逐渐消失。 因此，VelocityJS也这样做并不奇怪。 VelocityJS提供了一些传递给.VelocityJS()实例的快捷方式。

我们将编写以下内容以向上滑动元素以隐藏内容：

$("div").velocity("slideUp", {
	duration: 350
});

为了淡出它，我们可以这样写：

$("div").velocity("fadeOut", {
	duration: 350
});

滚动

VelocityJS还提供了一个称为scroll的快捷方式，该快捷方式可用于创建指向页面上特定部分的链接 。 以下代码假定我们希望链接#go-up在单击时滚动回到页面顶部。

var $up = $("#go-up");

$up.on("click", function() {
  $("body").velocity("scroll", { 
    duration: 2000,
    easing: "easeInBack"
  });
});

可能是这样的：

逆转

包含的另一个方便快捷方式是reverse 。 动画完成后，该快捷方式使我们可以将元素恢复为初始状态。 以上一个滚动示例为例，我们可以应用reverse按钮来增强箭头图标。 为此，我们链接了一个新的VelocityJS实例并添加了reverse ，将loop选项设置为true 。

$(".icon").velocity({
  translateY: "10px"
}, {
  loop: true
}).velocity("reverse");

这会将图标向下移动10px然后立即返回其初始位置。 由于我们还将loop选项设置为true因此动画将无限期执行。

插件：UI Pack

UI Pack中提供了更多动画效果。 UI Pack是作为插件提供的，与VelocityJS核心分开。 包含它之后，您将可以访问除了slideUp ， fadeOut和scroll之外的一系列效果，这为构建生动的界面提供了更大的潜力。

<script src="https://cdnjs.cloudflare.com/ajax/libs/VelocityJS/1.2.2/VelocityJS.ui.js"></script>

UI Pack还带来了两个新选项： stagger和drag 。 stagger使我们可以执行单个效果，将其顺序而不是同时应用于元素数组。 当设置为true时， drag选项提供了对数组中最后一个元素的拖动感。

例如，我创建了一个带有一些菜单的导航栏，其中一个菜单具有子菜单。 为了使子菜单更具吸引力，我在UI Pack中应用了带有stagger选项集的两种效果。

顺序播放多个动画

在某些时候，我们可能需要按顺序对不同的元素执行动画。 为此，我们必须按顺序嵌套每个VelocityJS实例，例如：

$("#offcanvas").velocity({ 
		translateX: 0
	}, {
		duration: 300,
	}, function() {
	$(".widgets").VelocityJS({
		translateX: 0,
		opacity: 0
	}, {
		duration: 300,
	}, function() {
		$("#close").VelocityJS({
			translateY: 0,
    	rotateZ: 0
		}, {
			duration: 150
		});
  });
});

上面的函数将首先执行$body的动画，然后完成$nav的动画，最后执行$menu 。 不幸的是，这不是一个优雅的方法，也不是理想的方法。 如果您有十二个动画，那么代码将难以管理。

但是，除了动画效果外，UI Pack还带有一种称为RunSequence的方法。 这是专门为解决我们的排序问题而设计的； 整齐地堆叠动画并按相关顺序执行它们。 使用上面的代码，我们可以将其重写为JavaScript对象，并将选定的元素定义在e属性中，将p属性中列出CSS属性定义在e属性中，将动画选项设置在o属性中。

var animationSequence = [
	{ e: $("#offcanvas"), p: { translateX: 0 } , o: duration: 300 },
	{ e: $(".widget"), p: { translateX: 0, opacity: 0 } , o: duration: 300 },
	{ e: $("#close"), p: { translateY: 0, rotateZ: 0 } , o: duration: 150 }
];
 $.Velocity.RunSequence(animationSequence);

我已经将上面的代码扩展为一个功能良好的画布之外的布局。 早点给它，然后查看JavaScript选项卡以查看完整的源代码。fffffff

最终思想

我发现VelocityJS是jQuery和CSS动画的首选替代方法，尤其是在构建涉及多个动画的交互式界面时。 VelocityJS易于使用，并带有预构建的动画，最重要的是，它非常快 。 负责任地使用它。 人们常说：功能强大，责任重大。

翻译自: https://webdesign.tutsplus.com/tutorials/silky-smooth-web-animation-with-velocityjs--cms-24266

velocity.js