企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 123℃ 0评论

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。

转载请注明:码云笔记 » anime.js使得CSS和SVG动画变得更简单

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址