JavaScript动画简介

尽管许多开发人员相信，基于CSS的动画并不是在网络上进行动画制作的唯一高效方式。还有JavaScript，而JS具有不可思议的优势。

与许多开发人员一样，通过放弃 CSSJavaScript，我们在膨胀样式表，牺牲动画定时控制和放弃基于物理的运动。

不要误会我的意思。 CSS动画在网络上扮演着重要角色-既独立又与JavaScript动画结合在一起。特别是，CSS非常适合与基本用户交互（例如悬停和焦点状态）有关的简单动画。

但是，JavaScript通常对于几乎所有其他内容都是更好的选择，因为它的用途更加广泛。

您可能不相信我，JavaScript动画与CSS动画一样快。您可能已经尝试使用jQuery进行动画处理，并使动画抖动和跳跃，并认为这是JavaScript作为一种语言固有的问题。

不是。 不要混淆两者，JavaScript和jQuery是独立的野兽。

jQuery是一个由功能组成的库，这些功能本质上位于纯JavaScript之上。 jQuery并非旨在成为高性能动画引擎。取而代之的是，它旨在减轻DOM操作的麻烦-这项工作做得非常好。

幸运的是，有开放源代码的动画库，使您可以绕过jQuery来利用普通JS的更多原始功能。使用这些动画库，您可以建立可管理的动画工作流，并在功能上分层，从而大大改善网站上的运动设计。

我将使用Velocity.js JavaScript动画引擎来使您快速入门，以便您网站的动画可以轻松，流畅且易于实现。

什么是Velocity.js？

Velocity是专用的动画库。它简单易用，功能强大，并且已被主要公司（包括Tumblr ， Microsoft和WhatsApp ）广泛采用，并且根据MIT许可证免费提供。

Velocity模仿jQuery的语法，并且与jQuery完美结合（尽管也可以在不使用jQuery的情况下使用它），因此学习它对您来说应该没有问题。由于jQuery无处不在，我将向您展示Velocity，因为它与jQuery结合使用。

注意：为了快速加快所有动画的80/20速度，您可以将所有当前的jQuery“ animate（）”函数调用替换为“ velocity（）”函数调用，因为Velocity反映了jQuery的语法和基本功能。动画功能（同时对其进行扩展）。即使进行了如此快速的更改，您的站点也可以显着提高性能。

但是使用Velocity还有很多要学习的东西。在深入研究如何专门使用Velocity之前，让我们快速了解一下它的可能用途，以便您掌握其价值。

以下是您可以使用JavaScript动画执行的操作，而这些操作根本无法通过基于CSS的动画实现。

页面滚动

Web设计的最新趋势是拥有较长的单页面站点，这些站点中的链接使页面平滑地向下滚动到适当的页面部分，而不是完全导航到其他页面。这是JS动画最流行的用途之一，因为CSS无法执行滚动。

在Velocity中，您只需在想要滚动到的元素上使用scroll命令运行一下velocity函数：

$element.velocity("scroll", 1000);

此函数使浏览器使用1000ms的持续时间向下滚动到选定的元素（ jQuery对象， $element ）。仅使用jQuery，这将是一个更加复杂的多行函数。

如果您不了解它的含义，请不要让此代码使您不知所措。在我们完成了几个更简洁的功能之后，我们将逐步进行介绍。

动画反转

在jQuery中，要恢复到动画开始之前的原始状态，必须手动将属性设置为原始值。例如：

使用jQuery

// Animate a 50px wide element to a width of 100px over 400ms
$element.animate({ width: "100px" }, 400);

// Animate it back to its original width value of 50px over 400ms
$element.animate({ width: "50px" }, 400);

相比之下，使用Velocity，只需执行相反的命令即可：

// Animate a 50px wide element to a width of 100px over 400ms
$element.velocity({ width: "100px" }, 400);
// Reverse previous animation - animate back to a width of 50px over 400ms
$element.velocity("reverse");

这将使动画恢复为动画之前所选元素的原始状态-无需手动指定值。

基于物理的运动

现实世界的运动既不是线性的，也不是平滑的。它具有快速零件，慢速零件，摩擦力甚至重量的概念。使用基于JavaScript的动画，您可以在动画中模拟真实世界的物理效果，使事情看起来更自然。线性运动看上去很机器人化（毫无生气），观看起来有点不舒服。

为了模拟现实世界的运动，Velocity提供了一种基于弹簧物理特性的缓动类型，将张力值（ default: 500 ）和摩擦值（ default: 20 ）作为其参数（有关更多信息，请参见Velocity文档）。

// Animate to a width of 100px with spring physics over the default 400ms. Spring tension is set to 1000, and friction is set to 50.
$element.velocity({ width: "100px", [ 1000, 40 ]);

高张力值会增加动画的总速度和弹跳度。较低的摩擦值会增加动画尾部的速度（较高的摩擦力会使动画减速更快）。调整这些值将使每个动画独特，逼真的和有趣。

上面的示例非常快且有弹性（高张力），但是在动画快要结束时会Swift减速并且变慢（高摩擦）

好的，那我该如何使用呢？

足够了解它可以做什么之后，让我们了解如何立即开始使用它。如前所述，Velocity可以独立使用，但是将其与jQuery结合使用可以得到最快的结果，因为jQuery使选择元素更加容易。

第一步是从此处下载Velocity.js。然后，将其包含在HTML文件的脚本标签中，该脚本标签位于页面的结束body标签之前。例如：

注意：如果您使用的是jQuery，请确保在Velocity之前包含jQuery，因为Velocity会根据是否存在jQuery调整其API。

一旦包含，您就可以基本上开始使用它来代替jQuery的“动画”功能。但是，还有一些附加功能使Velocity的功能更加强大，例如动画反转，变换，弹簧物理，链接和彩色动画（所有这些我都会在这里进行介绍）。但这还不止于此，请查看Velocity文档以获取更多信息。

让我们学习如何实际使用Velocity的语法！

争论

速度接受一个或多个参数。第一个参数是唯一的强制性参数。它可以是命令的名称（如上面“滚动”的示例所示），也可以是将CSS属性映射到动画最终值的数据对象。

// Data object setting the animation final values of CSS properties opacity, and left to 50%, and 500px respectively.
$element.velocity({ opacity: "50%", left: "500px"});

第二个参数是动画选项的数据对象，例如持续时间，缓动，延迟和完成（在动画完成后执行的回调函数）。

数据对象

// Animates an element to an opacity of 50% over 200ms after a 200ms delay.
$element.velocity({ opacity: "50%" }, { delay: 200, duration 200 });

另外，作为一种捷径，您可以以任何顺序传递持续时间，缓动和完成功能的逗号分隔值。但是，如果您希望有其他选项（例如延迟），则必须改用数据对象，而只能使用数据对象-您不能混合和匹配。

逗号分隔

// Animates an element to a left position of 50px with a 500ms duration, an easing of "ease-in-out", and with an alert message firing at the end of the animation.
$element.velocity({ left: 50px }, 500, "ease-in-out", function () { alert(‘done') } );
// Won't work: mixes data object and comma separated values
$element.velocity({ left: "50px" }, 500, "ease-in-out", function () { alert("done") }, { delay: 200 });

注意：第二个参数是可选的，因为对于最重要的属性有默认值： duration: 400ms和easing: "swing" 。所有其他动画选项都是可选的。

另请注意，每个CSS属性只能传递一个数字值，因此padding: "10px 15px"将不起作用。而是必须分别设置每个： { paddingLeft: "10px", paddingTop: "15px" … } 。它不仅更加清晰明了，而且还意味着您可以为每个子属性指定缓动类型，而不是拥有一个全局缓动类型，从而为您提供了无与伦比的动画自定义。

注意：具有多个单词（ font-size和padding-left ）CSS属性必须用驼峰形式（ fontSize和paddingLeft ）编写，而不要使用连字符。

请参阅CodePen上的Pen Velocity.js-基础知识： Julian Shapiro（ @julianshapiro ）的论点。

属性值：如果未提供单位类型，则假定为单位类型（通常假定为ms ， px和deg ），但显式表示更好，因此您在回读代码时可以一眼就能看出单位类型。如果除数字值外没有其他值，则必须使用引号。例如， duration: 500; 会被允许，但是duration: 500px; 不会，必须在500px左右使用报价。

JavaScript动画还允许使用四个值运算符：值运算符+，-，*和/，允许您从属性的当前值进行加，减，乘和除。

$element.velocity({
	width: "+= 50px", // Adds 50px to the current width value
	height: "/= 2" // divides the current height value by two
});

使用这些速记功能可以将所有动画逻辑保留在Velocity的动画引擎中。这样可以使代码简洁明了（删除手动值计算），还可以通过向Velocity提供有关动画意图的更多信息来帮助提高性能。 Velocity中包含的动画逻辑越多，Velocity越能优化代码的性能。

请参见CodePen上的Julian Shapiro（ @julianshapiro ）撰写的Pen Velocity.js-基础知识：值。

链式

Chaining Velocity在同一元素上一个接一个地调用，使动画排队一个接一个地执行：

$element
	.velocity({ width: "500px", height: "300px"})
	.velocity({ opacity: 0 });

这将使该元素动画为500px的宽度和300px高度，并且在完成该动画之后，它将淡化为0%的不透明度。如前所述，这使您可以制作复杂的多阶段动画，并确保时序完全按计划进行（一次又一次），而无需任何人工计算。

请参阅CodePen上的Pen Velocity.js-基础知识： Julian Shapiro（ @julianshapiro ）的链接。

缓和

我在本文中多次提到“放松”一词，也许您想知道这意味着什么。缓动是确定整个动画过程中不同阶段动画速度的数学函数。例如，“渐入渐出”缓动在动画开始时逐渐加速，并在动画结束时逐渐减速。 “线性”缓动在整个过程中具有恒定的速度，并且看起来非常刺耳且机器人化。

您可以使用easing选项指定easing：

// Animate an element to a top position of 100px with an easing of "ease-in-out"
$element.velocity({ top: 100 }, { easing: "ease-in-out" });

见笔Velocity.js -选项：宽松（jQuery UI的）的朱利安·夏皮罗（ @julianshapiro ）上CodePen 。

轻松也是如前所述使用弹簧物理的方式。您可以通过传递“弹簧”值来使用默认值（张力500，摩擦20），也可以手动指定它们：

// Animates an element to a width of 500px with spring physics with a tension of 250, and a friction of 10 (low tension, low friction).
$element.velocity({ width: 500 }, { easing: [ 250, 10 ] });

缓解变得更加复杂，但是为了简洁起见，我将在这里停止。阅读Velocity的文档以获取更多信息。

见笔Velocity.js -选项：宽松（春物理学）的朱利安·夏皮罗（ @julianshapiro ）上CodePen 。

颜色

Velocity允许为以下CSS属性进行彩色动画处理：color，backgroundColor，borderColor和outlineColor。这些颜色属性仅接受十六进制字符串作为输入（黑色为#000000 ，蓝色为Facebook #3b5998 ）。但是，您可以调整各个红色，绿色，蓝色值（0到255），甚至可以调整其不透明度与alpha值（0到1）。只需将颜色CSS属性的名称附加“红色”，“绿色”，“蓝色”或“ Alpha”即可。

$element.velocity({
	// Animate borderColor to the hex color for "fogdog" (orange)
	borderColor: "#f06d06",
	// Animate the background to an opacity (alpha) of 80%
	backgroundColorAlpha: 0.8,
	// Animate the blue component of the element's text color to 200
	colorBlue: 200
});

请参阅CodePen上的Pen Velocity.js-功能： Julian Shapiro（ @julianshapiro ）的颜色。

卷动

如前所述，scroll命令使页面滚动到a元素的顶部边缘。您可以传递与其他动画相同的选项，以及与其他动画调用链接。

$element
	// scroll to the top edge of the element over 1000ms
	.velocity("scroll", { duration: 1000 })
	// fade in after scroll animation
	.velocity({ opacity: 1 });

默认情况下，页面滚动发生在y轴上。要更改为水平滚动，请使用轴选项：

// Scrolls the browser to the left edge of the element
$element.velocity("scroll", { axis: "x" });

常见的效果是滚动时从顶部边缘偏移，因此内容不在浏览器的顶部并且很难阅读。要实现此目的，或者在Velocity中产生相反的效果，请使用offset选项：

// Scroll to a position 100px above the element's top edge
$element.velocity("scroll", { duration: 1000, offset: "-100px" });

// Scroll to a position 100px below the element's top edge
$element.velocity("scroll", { duration: 1000, offset: "100px" });

见笔Velocity.js -命令：按W /集装箱选项朱利安·夏皮罗（ @julianshapiro ）上CodePen 。

变身

是否想结合CSS动画和JS动画的功能？一些CSS转换中的图层，允许您执行2D和3D视觉操作，例如平移，缩放和旋转。请注意，这些操作不会影响元素在站点中的位置，也不会影响元素在其周围的位置。

速度支持以下转换：

translateX ：沿x轴移动元素（左右）
translateY ：沿y轴移动元素（上下）
rotateZ ：绕z轴旋转元素（顺时针-逆时针）
rotateX ：绕x轴旋转元素（上下）
rotateY ：绕y轴旋转元素（左右）
scaleX ：乘以元素的宽度尺寸
scaleY ：乘以元素的高度尺寸

$element.velocity({
	rotateZ: "90deg", // rotate clockwise 90 degrees
	scaleX: 2.0 // double the width
});

请参阅PenVelocity.js- 功能： Julian Shapiro（ @julianshapiro ）在CodePen上进行的转换。

向前走

动画将生活和交互性带入了其他静态页面，而基于JavaScript的动画是添加它们的最佳方法。

使用CSS动画，您只能在功能上受限于CSS标准的不经常更新。借助JavaScript，每天都有数十个新的库，插件和更新被添加到开源世界中-通过使用新工具来扩展动画的可能性。

Velocity具有比此处演示的功能更多的功能，我鼓励您查看其文档。现在开始实验！ :)

奖金！

最终的双重奖励：查阅本教程，了解如何使用Velocity的UI包来改善用户界面。并检查此Velocity演示库。

翻译自: https://davidwalsh.name/intro-javascript-animation