kute.js

kute.js

My aim in this article is to introduce KUTE.js, an open-source, free and feature-rich JavaScript animation engine by thednp and dalisoft.

本文的目的是介绍KUTE.js ，这是thednp和dalisoft提供的开源，免费且功能丰富JavaScript动画引擎。

This is the second article in the series Beyond CSS: Dynamic DOM Animation Libraries. If you’d like to read more about how best to use animation on the web or when you could consider using a JavaScript animation library instead of CSS-only animation, the first article in the series, Animating the DOM with Anime.js, contains some useful tips and resources.

这是“ 超越CSS：动态DOM动画库 ”系列中的第二篇文章。 如果您想了解更多有关如何最好地在网络上使用动画的信息，或者何时可以考虑使用JavaScript动画库而不是仅CSS动画，请参阅本系列的第一篇文章， 使用Anime.js为DOM动画。一些有用的技巧和资源。

KUTE.js可以做什么？ (What Can You Do with KUTE.js?)

KUTE.js makes available a core animation engine and a number of plugins to animate specific kinds of properties. This modular architecture helps to keep this library performant and highly flexible.

KUTE.js提供了一个核心动画引擎和许多插件来对特定种类的属性进行动画处理。 这种模块化体系结构有助于保持该库的性能和高度灵活性。

您可以使用KUTE.js Core Engine进行动画处理的内容 (What You can Animate with the KUTE.js Core Engine)

Just using the core engine alone, you can animate:

仅使用核心引擎 ，就可以制作动画：

Opacity property

不透明度属性

All 2D transform properties, except for matrix, double axis skew and double axis scale

所有2D变换属性， matrix ，双轴skew和双轴scale除外

All 3D transform properties except for matrix3d and rotate3d

除matrix3d和rotate3d之外的所有3D变换属性

The following box model properties: width, height, top and left

以下框模型属性： width ， height ， top和left

The color and backgroundColor properties

color和backgroundColor属性

Scrolling animation, both on the window object and on any scrollable DOM element

在window对象和任何可滚动DOM元素上的滚动动画

您可以使用KUTE.js CSS插件制作动画的内容 (What You Can Animate with the KUTE.js CSS Plugin)

Using the CSS plugin the number of possibilities for animation go up. Here’s what you can do:

使用CSS插件 ，增加动画制作的可能性。 您可以执行以下操作：

Animate all box model properties like margin, padding, borderWidth, etc.

对所有框模型属性进行动画处理，例如margin ， padding ， borderWidth等。

Animate the borderRadius property

设置borderRadius属性的动画

Animate text properties like fontSize, lineHeight, letterSpacing, wordSpacing, etc.

对文本属性进行动画lineHeight ，例如fontSize ， lineHeight ， letterSpacing ， wordSpacing等。

Animate color properties like borderColor and outlineColor

动画颜色属性，例如borderColor和outlineColor

Animate the clip property, now deprecated in CSS.

设置clip属性的动画，现在CSS中已弃用该属性。

Animate the backgroundPosition property.

设置backgroundPosition属性的动画。

您可以使用KUTE.js SVG插件制作的动画 (What You Can Animate with the KUTE.js SVG Plugin)

SVG (Scalable Vector Graphics) illustrations and icons are all over the web. This is not by chance. SVG graphics look great whatever the screen resolution, being written in a markup language makes them more accessible, and when properly optimized, can have a small filesize.

SVG(可缩放矢量图形)插图和图标遍布网络。 这不是偶然的。 不管屏幕分辨率如何，以标记语言编写的SVG图形都看起来不错，并且可以更方便地访问它们，并且经过适当优化后，它们的文件大小也可以很小。

One awesome thing you can do with an SVG graphic is animating different parts of it, and KUTE.js offers a great plugin that lets you achieve sophisticated animations without much effort.

您可以对SVG图形执行的一件令人敬畏的事情是对它的不同部分进行动画处理，而KUTE.js提供了一个出色的插件，可让您轻松完成复杂的动画。

In particular, the SVG plugin of KUTE.js lets you :

特别是，KUTE.js的SVG插件使您可以：

Morph SVG paths

变形SVG路径 Animate the SVG stroke attribute

设置SVG笔触属性的动画 Animate SVG transforms in a reliable, cross-browser way

以可靠的跨浏览器方式对SVG动画进行转换

您可以使用KUTE.js属性插件制作的动画 (What You Can Animate with the KUTE.js Attributes Plugin)

With the Attributes plugin, KUTE.js lets you animate any numeric presentation attribute, with or without a unit of measurement like px, em, etc. This plugin, in conjunction with the SVG plugin, makes possible the creation of some cool animations.

借助Attributes插件，KUTE.js允许您对任何数字表示属性进行动画处理，无论是否带有px，em等度量单位。此插件与SVG插件结合使用，可以创建一些很酷的动画。

您可以使用KUTE.js文本插件制作的动画 (What You Can Animate with the KUTE.js Text Plugin)

Extending KUTE.js with the Text plugin will let you animate text elements in two ways:

使用Text插件扩展KUTE.js将使您以两种方式为文本元素设置动画：

Increasing and decreasing the string representation of a number

增加和减少数字的字符串表示形式 Writing a string a character at a time.

一次写一个字符串一个字符。

Visit the dedicated page on the KUTE.js website for full details about its capabilities:

访问KUTE.js网站上的专用页面以获取有关其功能的完整详细信息：

使用KUTE.js (Using KUTE.js)

It’s time to experiment with KUTE.js.

现在该尝试使用KUTE.js。

将KUTE.js包含到您的项目中 (Including KUTE.js into Your Project)

You can download KUTE.js from the Download button on the project’s website, from KUTE.js GitHub page, or even a CDN link.

您可以从项目网站的“ 下载”按钮 ，KUTE.js GitHub页面甚至CDN链接下载KUTE.js。

You then include the kute.min.js file in your HTML document via a regular <script> tag just before the closing </body> tag.

然后，在结束</body>标记之前，通过常规<script>标记将kute.min.js文件包含在HTML文档中。

You can also install KUTE.js using Bower and npm.

您还可以使用Bower和npm安装KUTE.js。

All the details about the installation process are on the KUTE.js installation page.

有关安装过程的所有详细信息都在KUTE.js 安装页面上 。

使用KUTE.js进行简单的单属性动画 (Simple One-property Animation with KUTE.js)

KUTE.js uses two core methods:

KUTE.js使用两种核心方法：

.to() allows you to animate CSS properties on a single element from a given default value or from a computed value to a desired value. This method works best for simple scroll or show/hide animations, or when you don’t know the current value of the property you want to animate

.to()允许您将单个元素上CSS属性从给定的默认值设置为动画，或将计算所得的值设置为所需的值。 此方法最适合简单的滚动或显示/隐藏动画，或者当您不知道要设置动画的属性的当前值时

With .fromTo() you can animate an element by defining starting and ending values. This method performs better than the previous one, mainly because KUTE.js doesn’t have to compute the starting values of your animation.

使用.fromTo() ，可以通过定义起始值和结束值来为元素设置动画。 此方法的性能比上一个方法好，主要是因为KUTE.js不必计算动画的起始值。

The syntax for .to() is:

.to()的语法为：

KUTE.to( element, {propertyName:propertyValue} ).start();

The syntax for .fromTo() is:

.fromTo()的语法为：

KUTE.fromTo( element, {fromPropertyName:fromPropertyValue}, {toPropertyName: toPropertyValue} ).start();

The syntax above creates a tween object, that is, a JavaScript object which stores data about the animation of a DOM element, e.g., definition of CSS properties, animation duration, animation delay, etc.

上面的语法创建一个补间对象 ，即JavaScript对象，该对象存储有关DOM元素的动画的数据，例如CSS属性的定义，动画持续时间，动画延迟等。

It’s important to point out that the animation is not triggered by default. Rather, to get the animation going, you need to call the .start() method on the tween object.

请务必指出，默认情况下不会触发动画。 相反， .start()动画继续进行，您需要在补间对象上调用.start()方法。

You can also stop, pause and resume animations using .stop(), .pause(), and .play().

您还可以使用.stop() .pause()和.play()停止，暂停和恢复动画。

Before starting, resuming or pausing an animation, you can check if the animation is currently active or not active using .playing and .paused respectively:

在开始，恢复或暂停动画之前，可以分别使用.playing和.paused来检查动画当前是否处于活动状态：

tween.playing; tween.paused;

To get your feet wet, use .to() to animate just the opacity value of a star icon from its initial value, set in the stylesheet, to the value of zero. The element is selected using its class attribute. Here’s the relevant snippet:

要弄湿您的脚，请使用.to()仅将星形图标的opacity值从样式表中设置的其初始值开始设置为零，以进行动画处理。 使用其class属性选择元素。 以下是相关代码段：

KUTE.to('.icon-star-dark', {opacity: 0}).start();

See the Pen KUTE.js Animation of one property with .to() by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )的带有 .to()的Pen KUTE.js动画 。

To recreate the same animation using fromTo(), here’s the snippet you need:

要使用fromTo()重新创建相同的动画，请使用fromTo()代码段：

KUTE.fromTo( '.icon-star-dark', //selector {opacity: 1}, //start value {opacity: 0} //end value ).start();

See the Pen KUTE.js Animation of one property with .fromTo() by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint )的.fromTo()属性的Pen KUTE.js动画 。

使用KUTE.js对同一个对象的多个属性进行动画处理 (Animating More than One Property on the Same Object with KUTE.js)

Here’s how you can animate more than one property on the same object. For this demo I am going to use .fromTo(), but you’re free to adapt the code using .to() by just removing the starting values from the code.

您可以通过以下方法为同一对象设置多个属性。 在该演示中，我将使用.fromTo()但你可以自由地调整使用的代码.to()由刚刚从代码除去起始值。

Here’s the syntax:

语法如下：

KUTE.fromTo( element, { fromPropertyName1:fromPropertyValue1, fromPropertyName2:fromPropertyValue2, fromPropertyName3:fromPropertyValue3 }, { toPropertyName1: toPropertyValue1, toPropertyName2: toPropertyValue2, toPropertyName3: toPropertyValue3 } ).start();

Let’s say you’d like to animate an HTML element’s CSS transform properties together with its opacity. Here’s how you could do this with KUTE.js:

假设您要为HTML元素CSS transform属性及其opacity设置动画。 使用KUTE.js的方法如下：

KUTE.fromTo('.icon-star-dark', { scale: 1.5, //start value 1 rotate: 360, //start value 2 opacity: 1 //start value 3 }, { scale: 0.3, //end value 1 rotate: 0, //end value 2 opacity: 0 //end value 3 }).start();

The code above scales the element from a value of 1.5 to a value of 0.3, rotates it from 360 degrees to 0 degrees, and hides it by changing its opacity value from a value of 1 to 0.

上面的代码将元素的值从1.5缩放到0.3，将其从360度旋转到0度，并通过将其opacity值从1更改为0来隐藏它。

向KUTE.js补间对象添加延迟，持续时间和其他选项 (Adding Delay, Duration, and other Options to KUTE.js Tween Object)

Having the ability to control when an animation starts, how long it lasts, how many times it runs, etc., are common requirements we expect from an animation library.

我们希望动画库能够控制动画何时开始，动画持续多长时间，运行多少次等等。

Using the snippet above, here’s how KUTE.js lets you add options to your tweens.

使用上面的代码段，这是KUTE.js允许您向补间添加选项的方式。

KUTE.fromTo('.icon-star-dark', { //from properties ... }, { //to properties ... }, { //options transformOrigin: '30% 50%', duration: 500, easing: 'easeInElastic' }).start();

As you can see, what you need to do is add a bunch of property value pairs inside curly braces. Above, I defined values for the transformOrigin (which by default is 50% on the x-axis and 50% on the y-axis), duration and easing properties on the element.

如您所见，您需要做的是在花括号内添加一堆属性值对。 在上面，我定义了transformOrigin值(默认情况下在x轴上为50％，在y轴上为50％)，元素的duration easing属性。

KUTE.js offers these and plenty more options for fine-tuning your animations.

KUTE.js提供了这些以及更多的选项来微调动画。

Head over to the KUTE library’s website for a complete list of available options.

前往KUTE图书馆的网站以获取可用选项的完整列表 。

See the Pen KUTE.js animation of multiple properties with options by SitePoint (@SitePoint) on CodePen.

见笔的选项多个属性的KUTE.js动画由SitePoint( @SitePoint )上CodePen 。

使用KUTE.js一次将相同的动画应用于多个元素 (Applying the Same Animations to Multiple Elements at Once with KUTE.js)

To animate more than one element in the same way all at one time you can avoid coding loops and let KUTE.js handle the task with its two handy methods: .allTo() and .allFromTo().

要一次以相同的方式为一个以上的元素设置动画，可以避免编码循环，并让KUTE.js使用它的两个便捷方法( .allTo()和.allFromTo()来处理任务。

Here’s how you can make a bunch of HTML elements sparkle using the same animation on all of them in one single tween object:

这是在单个补间对象中对所有HTML元素使用相同动画使它们闪烁的方法：

//define the tween object var sparklingStars = KUTE.allFromTo(stars, { opacity: 0.1, //start value 1 scale: 0.1 //start value 2 }, { opacity: 1, //end value 1 scale: 1.2 //end value 2 }, { //options offset: 200, repeat: 4, yoyo: true }); //start the animation sparklingStars.start();

See the Pen KUTE.js Animation of multiple elements by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint ) 编写的Pen KUTE.js多个元素的动画 。

Regarding the code above, the following two points are worth noting:

关于上面的代码，以下两点值得注意：

When using .allTo() or .allFromTo(), offset allows you to stagger an animation as it applies to all elements in a collection. In other words, instead of having all elements animating at the same time, there will be a number of milliseconds’ delay in-between animations which increases with each element in the collection.

当使用.allTo()或.allFromTo() ， offset可让您交错动画，因为它应用于集合中的所有元素。 换句话说，不是使所有元素同时进行动画处理，动画之间将存在数毫秒的延迟，而延迟随集合中的每个元素而增加。

I’ve stored the tween object into a variable for later use. This technique is helpful when you need to work with a number of tweens for more complex animations. Let’s see this in action in the next section!

我已经将补间对象存储到一个变量中，以备后用。 当您需要使用多个补间来制作更复杂的动画时，此技术很有用。 让我们在下一节中看到这一点！

使用KUTE.js链接多个补间 (Chaining Multiple Tweens with KUTE.js)

Being able to trigger a number of tweens one after the other without too much effort is a great plus of using a good JavaScript library for DOM animation.

能够不费吹灰之力一次接一个地触发多个补间，这是对DOM动画使用良好JavaScript库的一大好处。

KUTE.js lets you do just this with the .chain() method.

KUTE.js允许您使用.chain()方法执行此操作。

Here’s the syntax to chain three tweens:

这是链接三个补间的语法：

tween1.chain(tween2, tween3);

Still using the sparkling stars code from the last demo, this is how you would chain two more tweens to it, i.e., the disappearance of the starred globe and the appearance of some text.

仍然使用上一个演示中的闪闪发光的星星代码，这是将两个补间链接到它的方式，即，已加星号的球形消失和某些文本的外观。

var sparklingStars = KUTE.allFromTo('.icon', { //rest of the code here }); var disappearingBall = KUTE.fromTo('.ball', { //rest of the code here }); var greetingText = KUTE.fromTo('.greeting', { //rest of the code here }); //chaining takes place here sparklingStars.chain(disappearingBall, greetingText).start();

See the Pen KUTE.js: Chaining Tweens by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的Pen KUTE.js：通过SitePoint( @SitePoint ) 链接 补间 。

使用KUTE.js插件 (Working with KUTE.js Plugins)

As you might expect, adding plugins allows you to do more fun stuff with KUTE.js. The demo below uses the SVG, Text and Attributes plugins.

如您所料，添加插件使您可以使用KUTE.js做更多有趣的事情。 下面的演示使用SVG，Text和Attributes插件。

The syntax varies slightly for the Attributes plugin:

Attributes插件的语法略有不同：

var tween = KUTE.to(element, {attr: {property: value}});

Here’s a demo where the circular path of an SVG graphic is morphed into a heart-shaped path on the same graphic. You can either inject the path straight into the tween object as a string (in quotes, e.g., ‘d=”M 360.759 250 …’), or add an id to the SVG path (<path id="ball" d="M 360.759 250 ... />) and refer to the path in the tween object using its id value, which is what I’ve done in the code below.

这是一个演示，其中SVG图形的圆形路径被变形为同一图形上的心形路径。 您可以将路径作为字符串直接插入补间对象中(用引号引起，例如'd =” M 360.759 250…')，也可以在SVG路径中添加一个ID( <path id="ball" d="M 360.759 250 ... /> )，并使用其ID值引用补间对象中的路径，这是我在下面的代码中所做的。

var morphingBall = KUTE.fromTo('#ball', { path: '#ball', attr: { fill: 'rgba(21, 19, 121, 1)' }, opacity: 0.5 }, { path: '#heartpath', attr: { fill: '#7c0e18' }, opacity: 1 }, { easing: 'easingElasticIn', morphIndex: 12, duration: 3000 });

KUTE offers the morphIndex option, which helps determine the least possible distance travelled by the points in the second path during the morph animation. Setting the morphIndex value that best suits your animation takes some fiddling. Experiment with this KUTE utility demo set up by thednp, one of KUTE’s authors, for a better grasp of this option.

KUTE提供morphIndex选项，该选项可帮助确定在变形动画过程中第二条路径中的点经过的最小距离。 设置最适合您的动画的morphIndex值需要花费一些时间。 试用由KUTE的一位作者thednp设置的KUTE实用程序演示 ，以更好地掌握此选项。

See the Pen KUTE.js plugins: SVG and text animation by SitePoint (@SitePoint) on CodePen.

请参阅Pen KUTE.js插件： CodePen上的SitePoint ( @SitePoint )提供的SVG和文本动画 。

The Text plugin works seamlessly with KUTE’s core engine. You can see it in action as the text animates in at the end of the demo. Here’s the skeleton of a tween using KUTE.js Text plugin:

文本插件可与KUTE的核心引擎无缝协作。 您可以在演示结尾处的动画中看到它的运行情况。 这是使用KUTE.js Text插件的补间的骨架：

var greetingText = KUTE.to('.greeting', { opacity: 1, scale: 1, text: 'Happy 2017 Folks!' //more properties }, { easing: 'easingBounceIn', //more options });

This plugin offers a quick way to animate writing text on the web. Use the number property to increment or decrease a number inside a string, and the text property to write a string one character at a time. This article’s demo shows the text property at work.

该插件提供了一种在网上编写文本动画的快速方法。 使用number属性可增加或减少字符串中的数字，而text属性可一次将一个字符串写入一个字符串。 本文的演示演示了工作中的text属性。

结论 (Conclusion)

This article has introduced KUTE.js, a small but versatile and flexible JavaScript library for dynamic DOM animation.

本文介绍了KUTE.js，这是一个小型但通用且灵活JavaScript库，用于动态DOM动画。

KUTE.js offers a wide range of animation possibilities, full documentation, user-friendly syntax and comes to you completely free under the MIT license.

KUTE.js提供了广泛的动画可能性，完整的文档，用户友好的语法，并且根据MIT许可证完全免费提供给您。

Why not have a play with KUTE.js and let me know what you think?

为什么不玩KUTE.js并让我知道您的想法？

翻译自: https://www.sitepoint.com/fun-web-animation-effects-with-kute-js/

kute.js