anime.js使得CSS和SVG动画变得更简单

目录
文章目录隐藏
  1. 30 种效果使用
  2. SVG 路径动画
  3. SVG 变形
  4. 交互式动画

anime.js是一个强大的用来制作动画的 javascript 库,与其他框架相比,它足够轻便,gzip 压缩完只有 9kb 左右,麻雀虽小,却五脏俱全。anime.js 不仅允许通过 CSS 属性的动画,还可以改变 SVG 动画的 HTML 属性。像现代网页设计无 SVG 格式是很难的。

anime.js 使得 CSS 和 SVG 动画变得更简单

如果我们实现了 JavaScript 动画效果。那么基于 CSS 属性创建动画变得非常容易。调用“anime()”,定义一个或多个目标,即你想要动画的元素。然后,定义要更改动画的 CSS 属性即可。

anime({
targets:[document.getElementsByTagName("div")[0]],
translateX:"300px",
rotate:180,
duration:2000,
direction:"alternate",
loop:true,
elasticity:600,
easing:"easeOutElastic"
});

在本例中,“targets”用于定义“<div>”元素。当然你也可以输入一个 ID 属性。两个 CSS 属性“translateX”和“rotate”将被激活。随后,用“duration”和“direction”确定动画的持续时间和方向。在这里,动画需要两秒钟。然后,动画被反转。我们还可以通过“循环”使它在循环中运行。

通常,这个简单的示例也可以不使用 JavaScript,通过使用“keyframe”规则与“animation”结合使用。然而,anime.js 添加了特定的属性“弹性”,允许您向动画添加上述弹性。数值越高,运动的弹性越高。这意味着动画在完成后不会突然停止,而是会振荡。这允许用户创建非常自然的外观动作。

30 种效果使用

就像经典的 CSS3 动画,anime.js 提供了向动画添加缓动的选项。总的来说,有 30 种不同的缓解效果,这比 CSS3 提供的要多得多。在给出“anime.easings“”。通过浏览器控制台,你会看到所有效果的列表。除了通常我们使用的,结合“elasticity”,迷人的效果可以被实现出来。

SVG 路径动画

如前所述,具有 SVG 属性的动画,如路径的“d”属性,是可能的。这允许您快速地实现路径旁边的动画。为此,首先通过 SVG 定义“<path>”元素,以及另一个元素,比如“<div>”容器,该容器应该沿着路径移动。

anime({
  targets:[document.getElementsByTagName("div")[0]],
  translateX:anime.path(document.getElementsByTagName("path")[0]),
  translateY:anime.path(document.getElementsByTagName("path")[0]),
  rotate:anime.path(document.getElementsByTagName("path")[0]),
  duration:5000,
  loop:true,
  easing:"linear"
});

想要动画的元素再次通过“target”被引用。然后,使用“translatex”、“translateY”和“rotate”来定义 SVG 路径,并将“<div>”元素与“anime.path()”一起动画化。

SVG 变形

由于谷歌为 SMIL 敲响了丧钟,至少在未来的浏览器版本中,SVG 元素的动画形式改变将不再可能。然而,anime.js 允许你继续轻松地创建这些动画。为此,首先定义一个 SVG 路径,稍后您可以快速地将其变形为不同的形状。

anime({
  targets:[document.getElementsByTagName("path")[0]],
  d:"M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration:1000,
  loop:true,
  direction:"alternate",
  easing:"linear"
});

在上面的示例中,SVG 路径被引用为“targets”。“d”用于定义目标路径,该路径确定要将“<path>”元素转换为形态的形状。源路径和目标路径上相同数量的点是必要的。否则,将会有混乱的效果而不是一个漂亮的变形。

交互式动画

anime.js 还允许创建交互式动画。例如,有一些方法可以控制回放,称为“play()”、“pause()”和“restart()”。还可以使用“seek()”跳转到动画中的某个点。为此,您需要输入时间值或百分比值。

除此之外,还有“begin”、“update”和“complete”的属性,让我们传递函数。这个函数将分别在开始、修改后或动画结束时执行。

anime.js 拥有简单、复杂的 CSS 和 SVG 动画所需的一切。有一个清晰的 API 引用和几个例子。此外,该框架在所有标准浏览器下运行,包括从版本 10 开始的 Internet Explorer。

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » anime.js使得CSS和SVG动画变得更简单

发表回复