最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

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。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » anime.js使得CSS和SVG动画变得更简单

发表评论