Anime.js:轻巧的 JavaScript 动画库

6,800 阅读2分钟
摘要:我最喜欢的动画库之一,就是Anime.js,它是一个完全免费、开源的JavaScript动画库。这个库有着丰富的功能,它是针对JavaScript所开发的,而且它同时也非常依赖CSS动画。你可以在DOM中将其与用在单一的页面元素之上,你也可以将其用在个性化SVG上。

Web 动画已经发展了很长的时间。开发者不仅可以使用CSS/SVG/JS 等多种工具来制作动画,而且我们还可以使用很多免费的库来节省动画制作的时间。

我最喜欢的动画库之一,就是Anime.js ,它是一个完全免费、开源的JavaScript 动画库。

这个库有着丰富的功能,它是针对JavaScript 所开发的,而且它同时也非常依赖CSS 动画。你可以在DOM 中将其与用在单一的页面元素之上,你也可以将其用在个性化SVG 上。

它的文档被self-host 在GitHub 之上,这个文档非常相信,你可以在上面找到所有你所需要的东西。它的每一个动画特性都配备了具体的参数,例如延迟、持续时间和消除等。

但是请注意,这个库并没有提供过多的预设动画效果。Anime.js 所针对的,是那些不想自己写verbose 代码,同时希望对动画效果进行高度自定义的开发者。

未命名1493185607.png

具体事例,你可以参考这个Codepen pen 。这个代码非常简洁,但是你却可以用它做出非常逼真的动画效果。

还有一点要注意的是,Anime.js 需要你具备一定的知识。使用它创建动画并不是非常难,但是你需要掌握基本的JavaScript 语法才能熟练使用它。

要想使用这个库,你所需要的所有信息都在这个repo page 上,包括很多代码实例和相信的文档图表。你还可以浏览一下它的bug 报告,或是查看浏览器支持列表,目前这个库支持所有主流的浏览器以及IE 10+ 。

未命名1493185598.png

对于Web 开发者来说,它是最方便的动画库之一,在创建复杂动画的时候,它值得成为你的首选解决方案。

小程序.jpg

原    文:Anime.js – A Lightweight JavaScript Animation Library
译    文:SDK.cn
作    者:鲁行云(编译)

免责声明:

  1. SDK.cn遵循行业规范,所有转载文章均征得作者同意授权并明确标注来源和链接。
  2. 我们十分尊重原创作者的付出,本站禁止二次转载如需转载请与原作者取得联系。
  3. 转载SDK.cn的原创文章需注明文章作者、链接和"来源:SDK.cn"并保留文章及标题完整性未经作者同意不得擅自修改。
  4. 作者投稿可能会经SDK.cn适当编辑修改或补充。