文档结构  
翻译进度:已翻译     翻译赏金:5 元 (?)    ¥ 我要打赏

KUTE.js Animation Library

我写这篇文章为的是介绍一个搭载thednp和dalisoft,实现开放源代码、免费的、功能丰富的 JavaScript动画引擎,名字叫作KUTE.js

这是系列连载文章Beyond CSS: Dynamic DOM Animation Libraries 的第二篇。如果你很想阅读更多关于如何在web上使用动画的干货,或者是什么时候你可以使用JavaScript动画图库,而不仅仅只是CSS动画,你可以参考此系列文章的第一篇,里面有很多实用技巧和资源: Animating the DOM with Anime.js

你可以用 KUTE.js 来做什么呢?

KUTE.js提供核心动画引擎,并使用一连串的插件来制作特定类型的动画。这种模块化的架构有助于保持这个图库的性能和高度的灵活性。

第 1 段(可获 1.53 积分)

你可以利用KUTE.js 核心引擎来制作什么动画呢?

单单只是使用核心引擎,你就可以实现以下这些:

  • 不透明属性
  • 所有的2D变换属性,除了矩阵、双轴倾斜和双轴刻度外
  • 所有的3D变换属性, 除了3d矩阵和3d旋转
  • 以下框模型属性:宽度、高度、靠顶部间距定位和靠左边间距定位
  • 主色和背景色属性
  • 滚动动画,针对窗口上的对象和任何可滚动的DOM元素

你可以使用 KUTE.js CSS 插件来制作什么动画呢?

使用 CSS 插件 制作动画的可能性上升。以下是你能实现的:

第 2 段(可获 1.1 积分)
  • 基于所有盒模型属性的 动画,包括 marginpaddingborderWidth 等。
  • 基于 borderRadius 属性的动画。
  • 基于文本属性的动画,包括 fontSizelineHeight, letterSpacingwordSpacing 等。
  • 基于颜色属性的动画,包括 borderColor 和 outlineColor
  • 基于 clip 属性的动画,现在 CSS 已经不用这个属性了。
  • 基于 backgroundPosition 属性的动画。

你可以用 KUTE.js SVG 插件做什么样的动画

SVG (可缩放适量图形) 插图和图标遍布网络。这并非偶然。无论在什么分辨率的屏幕上 SVG 图形都有很好的表现,它们使用标记语言编写,所以写起来比较容易,而且在适当的优化后其文件会占用较小的空间。

第 3 段(可获 1.05 积分)

使用 SVG 图形会非常棒,因为它可以让不同的的部分动起来,KUTE.js 提供了一个伟大的插件让你可以轻松地实现复杂的动画。

尤其要指出的是,KUTE.js 的 SVG 插件 能:

  • 让 SVG 路径变形
  • 让 SVG 的 stroke 属性产生变化
  • 让 SVG 变形动画可靠,而且兼容多种浏览器

使用  KUTE.js 属性插件可以做什么样的动画

使用属性插件后,KUTE.js 能让所有数值属性动起来。像 px、em 这样的计量单位有没有都行。将这个插件与 SVG 插件联合使用就可以创造炫酷的动画。

第 4 段(可获 1.35 积分)

KUTE.js 的 Text 插件可以用来产生怎样的动画

使用 Text 插件扩展 KUTE.js 能让文本动起来,有两个方法:

  • 以字符串显示数字的增减效果
  • 一次写一个字符〔译者注:即打印机效果〕

KUTE.js 网站上有专门的页面详述了其功能:

使用 KUTE.js

是时候试验一下 KUTE.js 了。

在项目中包含 KUTE.js

可以通过项目网站的下载按钮来下载 KUTE.js,或者从 KUTE.js 的 GitHub 页面下载,也可以使用 CDN 链接

然后在 </body> 关闭标签的紧前方使用 <script> 标签将 kute.min.js 文件引入 HTML 文档。

第 5 段(可获 1.46 积分)

也可以使用 Bower 或 npm 来安装 KUTE.js。

KUTE.js 的安装页面详述了其安装过程。

使用 KUTE.js 实现简单的单属性动画

KUTE.js 有两个核心方法:

  • .to() 允许你根据单个元素的 CSS 属性来产生动画,从其默认值或一个计算值,到目标值。这个方法适用于简单的滚动或者显示/隐藏这样的动画,或者在你不知道属性当前值的情况下开始动画。
  • 使用 .fromTo() 可以通过定义起止值来为某个元素产生动画。这个方法的性能比上一个好,这主要是因为不需要 KUTE.js 计算动画的起始值。
第 6 段(可获 1.53 积分)

.to() 的语法:

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

.fromTo() 的语法:

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

上面两种方法创建了一个 渐变对象,是一个 JavaScript 对象,用来存储 DOM 元素的动画数据,比如,CSS 属性的定义,动画持续时间,动画延迟时间等。

很重要的一点是,默认不触发动画。需要调用渐变对象上的 .start() 方法启动动画。

第 7 段(可获 0.89 积分)

你也可以通过 .stop().pause() 和 .play() 来停止、暂停和恢复动画。

如果在开始恢复或暂停一个动画之前,你可以使用 .playing 和 .paused 检查动画当前是否在播放状态:

tween.playing;
tween.paused;

作为热身,我们使用 .to() 来为一个星形图标的 opacity 值制作动画。其初始值是在样式表中设计的,目标值是 0。我们使用元素的 class 属性来选择它。下面是相关的代码:

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

可以看看 SitePoint (@SitePoint) 在 CodePen 上制作的 Pen,KUTE.js 使用 .to() 生成单属性动画

第 8 段(可获 1.11 积分)

要使用fromTo()重新创建相同的动画,这里是你需要的代码段:

KUTE.fromTo(
  '.icon-star-dark', //选择
  {opacity: 1}, //开始值
  {opacity: 0}  //结束值
).start();

通过SitePoint(@SitePoin)在CodePen上查看 KUTE.js Animation of one property with .fromTo()

使用KUTE.js在同一个对象上设置多个动画属性

以下是你可以在同一个对象上为多个属性设置动画。对于此演示,我将使用.fromTo(),但是你可以通过从代码中删除起始值来自由地使用.to()来调整代码。

第 9 段(可获 1 积分)

这里是语法:

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

假设你想为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();
第 10 段(可获 0.39 积分)

上面的代码将元素从1.5的值缩放到0.3,将其从360度旋转到0度,并通过将其不透明度值从1值改为0来隐藏。


将延迟,持续时间和其他选项添加到KUTE.js Tween对象

有能力控制动画开始时间,持续时间,运行多少次等,是我们期望从动画库获得的常见要求。

使用上面的代码片段,KUTE.js可以让你添加选项到你的tweens上。

KUTE.fromTo('.icon-star-dark', {
  //from properties ... 
}, {
  //to properties ...
}, {
  //options
  transformOrigin: '30% 50%',
  duration: 500,
  easing: 'easeInElastic'
}).start();
第 11 段(可获 1.19 积分)

正如你所看到的,你所需要的做的在花括号内定义一系列的属性值对。在上面的代码中,我在元素上为transformOrigin (默认情况下x轴方向 50% ,y轴方向 50%), durationeasing 属性定义了值。

KUTE.js 为调整你的动画提供了大量的选项。

要了解 可用选项的完整列表 ,请进入 KUTE 库官网。

参看 CodePen 由 SitePoint (@SitePoint) 编写的 Pen 带有选项的多属性 KUTE.js 动画 .

 

使用 KUTE.js 同时在多个元素上执行相同的动画

第 12 段(可获 1.24 积分)

要同时以相同的方式在多个元素上执行动画,你可以避免编写循环,而让 KUTE.js 使用其两个简便的方法来处理该任务: .allTo() and .allFromTo().

下面是你如何在单一的 tween 对象上使用相同的动画使得一束 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();
第 13 段(可获 0.71 积分)

参看 CodePen 上由 SitePoint (@SitePoint) 编写的 Pen 带有选项的多属性 KUTE.js 动画 .

回顾上面的代码,下面两点值得注意:

  • 当使用 .allTo().allFromTo()时,, offset 允许你 错开一个动画,因为它应用于集合中的所有元素。换句话说,并不是所有元素同时进行动画操作,而是在动画之间存在一个随着集合中的元素而增加的几毫秒的延时。
  • 我将 tween 对象存在一个变量中供以后使用。当你需要为更为复杂的动画处理大量的 tween 时,这一技术会非常有用。让我们在接下来的内容中实际了解一下。
第 14 段(可获 1.43 积分)

使用 KUTE.js 连接多个补间动画

一个使用 JavaScript 实现 DOM 动画的插件可以毫不费力地挨个触发多个补间动画。

KUTE.js 使用 .chian() 方法来实现上述功能。

下面是连接三个补间动画的语法:

tween1.chain(tween2, tween3);

继续使用上一个 Demo 中的星星闪烁的代码,这里你可以了解到怎么多连接两个补间动画,比如,让星星消失然后显示一些文本。

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();
第 15 段(可获 1.1 积分)

参看 CodePen 上由 SitePoint (@SitePoint) 编写的 Pen  KUTE.js: 链接Tweens

 

使用 KUTE.js 插件

正如你所期望的,添加插件允许你使用 KUTE.js 完成更多有趣的事情。下面的演示使用 SVG,文本与属性插件。

对于属性插件,语法略有变化:

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

下面是一个演示,其中 SVG 图片的环形路径被演示为相机图片的心形路径。你可以将路径作为字符串直接注入 tween 对象(以引号形式,例如 ‘d=”M 360.759 250 …’), 或是向 SVG 路径添加一个 id (<path id="ball" d="M 360.759 250 ... />) 并在 tween 对象中使用其 id 值引用该路径,这正是我在下面代码中所做的。

第 16 段(可获 1.59 积分)
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 提供了 morphIndex 选项, 该选项有助于确定在演示动画中第二个路径中的点运动的最不可能的距离。 设置最适合你动画的 morphIndex 值需要一些深度. KUTE 的作者 thednp 设置的 KUTE utility demo 实验为该选项提供了更好的解释。

第 17 段(可获 0.7 积分)

参看 CodePen 上由 SitePoint (@SitePoint) 编写的 Pen KUTE.js 插件: SVG 与文本动画

文本插件与 KUTE’s 核心引擎无缝集成. 你会在演示的结尾处实际看到文本动画。下面是使用 KUTE.js 文本插件的 tween 骨架:

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

该插件提供了一种快速方法向 Web 动态输出文本。使用 number 属性来增加或减少字符串中的数值,使用 text  属性一次字符串中的一个字符。本文章的示例实际演示了 text 属性。

第 18 段(可获 1.25 积分)

结论

本文介绍了KUTE.js,这是一个小而通用且灵活的动态DOM动画JavaScript库。


更多来自本作者

KUTE.js提供了广泛的动画,完整的文档, 用户友好的语法,并且你在MIT license许可下完全免费。

为什么不玩KUTE.js,让我知道你的想法?

第 19 段(可获 0.93 积分)

文章评论