kute.js_使用KUTE.js进行有趣的Web动画效果

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.