anime.js使得CSS和SVG动画变得更简单
anime.js是一个强大的用来制作动画的 javascript 库,与其他框架相比,它足够轻便,gzip 压缩完只有 9kb 左右,麻雀虽小,却五脏俱全。anime.js 不仅允许通过 CSS 属性的动画,还可以改变 SVG 动画的 HTML 属性。像现代网页设计无 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。
码云笔记 » anime.js使得CSS和SVG动画变得更简单