javascript动画_JavaScript动画简介

javascript动画

Despite what many developers believe, CSS-based animation is not the only performant way to animate on the web. There's also JavaScript—and JS has some incredible advantages.

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

By abandoning JavaScript for CSS, like many developers do, we are bloating our stylesheets, sacrificing animation timing control, and forgoing physics-based motion.

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

Don't get me wrong. CSS animations play an important role on the web -- both in isolation and in combination with JavaScript animations. In particular, CSS is perfect for simple animations pertaining to basic user interactions, such as hover and focus states.

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

JavaScript, however, is usually the better option for almost everything else since it's much more versatile.

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

You might not believe me that JavaScript animations are as fast as CSS animations. You've probably tried animating with jQuery and had your animations jitter and jump, and assumed it was a problem inherent to JavaScript as a language.

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

It's not. Don't confuse the two, JavaScript and jQuery are separate beasts.

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

jQuery is a library consisting of functions that essentially layer on top of plain JavaScript. jQuery wasn't designed to be a high-performance animation engine. Instead, it was designed to ease the headaches of DOM manipulation—a job it does amazingly well.

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

Luckily, there are open-source animation libraries that allow you to bypass jQuery to harness more of the raw power of plain JS. With these animation libraries, you can establish a manageable animation workflow and layer on features that drastically improve the motion design on your sites.

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

I'm going to get you up to speed with the Velocity.js JavaScript animation engine so that your site's animations can be punchy, smooth, and easy to implement.

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

什么是Velocity.js？ (What is Velocity.js?)

Velocity is a dedicated animation library. It's simple to use, it's incredibly powerful, it's widely adopted by major companies (including Tumblr, Microsoft and WhatsApp), and it's free under the MIT license.

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

Velocity mimics the syntax of jQuery—and combines perfectly with it (although it can be used without jQuery as well), so learning it should be no problem for you. Because of jQuery's ubiquity, I'll be showing you Velocity as it's used in combination with jQuery.

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

Note: For a quick 80/20 of speeding up all your animations, you could simply replace all your current jQuery "animate()" function calls with "velocity()" function calls, since Velocity mirrors the syntax and the basic functionality of jQuery's animate function (while expanding on it). Even with just that quick change, your site can receive a significant performance boost.

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

But there's also so much more to learn with Velocity. Before we dive into how to specifically use Velocity, let's quickly learn what's possible with it so that you can grasp its value.

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

Below are the things you can do with JavaScript animation that simply cannot be achieved with CSS-based animation.

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

页面滚动 (Page Scrolling)

A recent trend in web design is to have long, single-page sites where links cause the page to smoothly scroll down to the appropriate page section, rather than navigate to a different page entirely. This is one of the most popular uses for JS animations, as CSS cannot perform scrolling.

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

In Velocity, you simply run the velocity function with the scroll command on the element you wish to scroll to:

在速度，你只需运行velocity与功能scroll要滚动的元素命令：

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

This function causes the browser to scroll down to the selected element (jQuery object, $element) using a duration of 1000ms. With jQuery alone, this would be a much more complicated, multi-line function.

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

Don't let this code overwhelm you if you don't understand what it means; we're going to walk through it slowly after we run through a couple more neat features.

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

动画反转 (Animation Reversal)

In jQuery, to revert back to the original state before the animation started, you have to manually animate the properties back to their original values. For example:

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

使用jQuery (With 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);

In contrast, with Velocity, it's a simple matter of running the reverse command:

相比之下，使用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");

This will reverse the animation to the selected element's original state prior to the animation—no need to specify the values manually.

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

基于物理的运动 (Physics-Based Motion)

Real world motion is neither linear, nor is it smooth. It has fast parts, slow parts, friction, and even the concept of weight. With JavaScript based animations, you can mimic real-world physics in your animations, making things seem more natural. Linear motion looks robotic (lifeless) and slightly uncomfortable to watch.

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

To mimic real-world motion, Velocity offers an easing type based on spring physics, taking a tension value (default: 500) and a friction value (default: 20) as its parameters (see Velocity documentation for more information).

为了模拟现实世界的运动，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 ]);

A high tension value increases total speed and bounciness of the animation. A lower friction value increases the speed at the tail-end of the animation (high friction causes the animation to decelerate faster). Tweaking these values will make each animation unique, realistic, and interesting.

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

The example above would be very fast and bouncy (high tension), but would decelerate quickly and be slow near the end of the animation (high friction)

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

好的，那我该如何使用呢？ (Okay great, so how do I use it?)

Enough of hearing about what it can do, let's find out how you can start using it today. As I mentioned earlier, Velocity can be used independently, but combining it with jQuery leads to the quickest results, as jQuery makes selecting elements far easier.

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

The first step is to download Velocity.js from here. Then include it in your HTML file in a script tag before the closing body tag of your page. For example:

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

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>

Note: If you're using jQuery, make sure to include jQuery before Velocity, as Velocity will adapt its API based on whether jQuery is present.

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

Once included, you can basically start using it in place of jQuery's "animate" function. However, there's several additions that make Velocity much more powerful than that, such as animation reversals, transforms, spring physics, chaining, and color animations (all of which I'll be covering here). But it doesn't end there, check out the Velocity docs for more info.

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

Let's learn how to actually use Velocity's syntax!

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

争论 (Arguments)

Velocity accepts one or more arguments. The first argument is the only mandatory argument. It can either be the name of a command (as in the example for "scroll" above), or it can be a data object that maps CSS properties to the animation's final values.

速度接受一个或多个参数。 第一个参数是唯一的强制性参数。 它可以是命令的名称(如上面“滚动”的示例所示)，也可以是将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"});

The second argument is a data object of animation options, such as duration, easing, delay, and complete (callback function that executes after the animation completes).

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

数据对象 (Data Object)

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

Alternatively, as a shortcut, you can pass comma-separated values for the duration, easing, and complete function in any order. If, however, you wish to have an additional option, such as delay, you must instead use a data object, and only a data object—you can't mix and match.

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

逗号分隔 (Comma Separated)

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

Note: The second argument is optional because there are default values for the most important properties: duration: 400ms, and easing: "swing". All the other animation options are optional.

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

Also note that you can only pass in a single numeric value per CSS property, so padding: "10px 15px" will not work. Instead, you must set each one separately: { paddingLeft: "10px", paddingTop: "15px" … }. Not only is it more legible and explicit, it also means you can specify easing types for each sub-property, rather than having one global easing type, giving you unparalleled customization of your animations.

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

Note: CSS properties with multiple words (font-size and padding-left) must be written in camelcase (fontSize and paddingLeft), not hyphenated.

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

See the Pen Velocity.js - Basics: Arguments by Julian Shapiro (@julianshapiro) on CodePen.

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

Property values:If a unit type is not provided, one is assumed (ms, px, and deg are generally assumed), but being explicit is better so you can discern the unit types at a glance when reading back through your code. If there's anything other than a numerical value, then quotes must be used. For example, duration: 500; would be allowed, but duration: 500px; would not, quotations would have to be used around 500px.

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

JavaScript animation also allows for four value operators to be used: value operators +, -, *, and /, allowing you to add, subtract, multiply, and divide from the current value of the property:

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

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

Using these shorthand features retains all the animation logic within Velocity's animation engine. This keeps the code concise and legible (removing manual value calculations), and also helps to improve performance by providing Velocity with more information about your animation intentions. The more animation logic contained within Velocity, the better Velocity can optimize the performance of the code.

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

See the Pen Velocity.js - Basics: Values by Julian Shapiro (@julianshapiro) on CodePen.

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

链式 (Chaining)

Chaining Velocity calls one after another on the same element queues the animations to execute one after the other:

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

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

This would cause the element to animate to a width of 500px and height of 300px, and after completing that animation, it would fade to an opacity of 0%. As mentioned previously, this allows you to make complex, multi-stage animations with timing guaranteed to happen exactly as planned—one after another—without any manual calculations.

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

See the Pen Velocity.js - Basics: Chaining by Julian Shapiro (@julianshapiro) on CodePen.

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

缓和 (Easing)

I've mentioned the word easing a few times in this article, and maybe you're wondering what that means. Easing's are mathematical functions that determine the speed of the animation at different stages throughout its duration. For example, an "ease-in-out" easing gradually accelerates at the beginning of the animation, and gradually decelerates near the end of the animation. A "linear" easing has a constant speed throughout the duration, and looks very jarring and robotic.

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

You specify easing with the easing option:

您可以使用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" });

See the Pen Velocity.js - Option: Easing (jQuery UI) by Julian Shapiro (@julianshapiro) on CodePen.

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

Easing is also how you use spring physics as mentioned previously. You can either use the default values (tension of 500, friction of 20) by passing a value of "spring," or you can specify them manually:

如上所述，轻松也是您如何使用弹簧物理的方法。 您可以通过传递“弹簧”值来使用默认值(张力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 ] });

Easings get much more complicated, but for brevity's sake, I'll stop here. Read Velocity's documentation for more information.

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

See the Pen Velocity.js - Option: Easing (Spring Physics) by Julian Shapiro (@julianshapiro) on CodePen.

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

颜色 (Color)

Velocity allows color animations for the following CSS properties: color, backgroundColor, borderColor, and outlineColor. These color properties only accept hex strings as inputs (#000000 for black, #3b5998 for Facebook blue). You can however tweak the individual red, green, blue values (0 to 255), and even its opacity with the alpha value (0 to 1). Simply append the color CSS properties' names with "Red," "Green," "Blue," or "Alpha."

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

See the Pen Velocity.js - Feature: Colors by Julian Shapiro (@julianshapiro) on CodePen.

请参阅CodePen上的Pen Velocity.js-功能：朱利安·夏皮罗( @julianshapiro )的颜色 。

卷动 (Scrolling)

As mentioned earlier, the scroll command causes the page to scroll to the top edge of the an element. You can pass in the same options as the other animations, as well as chain with other animation calls.

如前所述，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 });

By default, page scrolling occurs on the y-axis. To change to horizontal scrolling, use the axis option:

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

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

A common effect is to have a offset from the top edge when scrolling, so the content isn't at the very top of the browser and hard to read. To achieve this, or the opposite effect in Velocity, use the offset option:

常见的效果是滚动时与顶部边缘有偏移，因此内容不在浏览器的顶部并且很难阅读。 要实现此目的或在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" });

See the Pen Velocity.js - Command: Scroll w/ Container Option by Julian Shapiro (@julianshapiro) on CodePen.

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

变身 (Transforms)

Want to combine the power of CSS animations and JS animations? Layer in some CSS transforms, allowing you to do 2D and 3D visual manipulations like translation, scaling, and rotation. Note that these do not affect the element's location in the site, nor the locations of elements around it.

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

Velocity supports the following transforms:

速度支持以下转换：

• translateX: Move an element along the x-axis (left-right)

  translateX ：沿x轴移动元素(左右)

• translateY: Move an element along the y-axis (up-down)

  translateY ：沿y轴移动元素(上下)

• rotateZ: Rotate an element about the z-axis (clockwise-counterclockwise)

  rotateZ ：绕z轴旋转元素(顺时针-逆时针)

• rotateX: Rotate an element about the x-axis (up-down)

  rotateX ：绕x轴旋转元素(上下)

• rotateY: Rotate an element about the y-axis (left-right)

  rotateY ：绕y轴旋转元素(左右)

• scaleX: Multiply the width dimension of an element

  scaleX ：乘以元素的宽度尺寸

• scaleY: Multiply the height dimension of an element

  scaleY ：乘以元素的高度尺寸

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

See the Pen Velocity.js - Feature: Transforms by Julian Shapiro (@julianshapiro) on CodePen.

请参阅CodePen上的Pen Velocity.js-功能： Julian Shapiro( @julianshapiro )进行的转换 。

向前走 (Going Forward)

Animations breathe life and interactivity into an otherwise static page, and JavaScript-based animations are the best way to add them.

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

With CSS animations, you're limited in functionality to the infrequent updates of the CSS standard. With JavaScript, there are dozens of new libraries, plugins, and updates being added to the open-source world every single day—expanding the possibilities of your animations through the use of new tools.

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

Velocity has more features than those demonstrated here, and I encourage you to check out its documentation. Now go experiment! :)

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

奖金！ (Bonus!)

Final, double bonus: Check out this tutorial on using Velocity's UI pack for improving user interfaces. And check this Velocity demo gallery.

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

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

javascript动画