最近在做动画相关的项目，推荐 11 个好用的 JS 动画库

作者：Jonathan Saring

译者：前端小智

来源：medium

为了保证的可读性，本文采用意译而非直译。

1.Three.js

超过46K的星星，这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，让咱们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出，目前仍有近1000名贡献者在开发中。

2. Anime.js

超过20K的星星，Anime 是一个 JS 动画库，可以处理CSS属性，单个CSS转换，SVG 或任何 DOM 属性以及 JS 对象。此库允许咱们链接多个动画属性，将多个实例同步，创建时间轴等。

3.Mo.js

超过 14K 星星，是一个用于 Web 的动态图形工具带，具有简单的声明 API，跨设备兼容性和超过1500个单元测试。咱们可以在 DOME 或SVG DOME周围移动东西或创建唯一的 mo.js 对象。虽然文档有些稀缺，但是示例很丰富，这里有CSS技巧的介绍。

说到后台学习

4. Velocity

超过 15k 星星,Velocity是一个快速的 JS 动画引擎，拥有与jQuery的 $.animate() 相同的API。它具有彩色动画、转换、循环、画架、SVG支持和滚动。这里是Velocity的高性能引擎的分解，这里是使用该库的 SVG 动画的介绍。

5. Popmotion

超过 14K 星星，这个动画库大小只有 11 kb。它允许开发人员从动作创建动画和交互，这些动作是可以启动和停止，可以使用 CSS、SVG、React、three 创建，js 和任何接受数字作为输入的 API。

6. Vivus

超过 10k 星星，Vivus是一个零依赖的 JS 类，可以让你为SVG制作动画，让它们具有被绘制的外观。咱们可以使用许多可用动画之一，或创建自定义脚本来绘制SVG。查看Vivus-instant获取实际示例，亲自动动手练习一下。

7. GreenSock JS

GSAP 是一个JS 库，用于创建高性能、零依赖、跨浏览器动画，据称在超过400万个网站上使用。GSAP是灵活的，可以与 React、Vue、Angular 和 vanilla JS 协同工作。GSDevtools 还可以帮助使用 GSAP 构建dubug 动画。

8. Scroll Reveal

拥有15K颗星星和零依赖，这个库为 web 和移动浏览器提供了简单的滚动动画，以动画的方式显示滚动中的内容。它支持多种简洁的效果类型，甚至允许你使用自然语言定义动画。这里有一个简短的 SitePoint教程。

9. Hover (CSS)

超过 20k 星星，Hover 提供了CSS3支持的悬停效果集合，可应用于链接、按钮、徽标、SVG、特色图像等，在CSS、Sass和LESS中可用。您=可以复制和粘贴希望在自己的样式表中使用的效果，或者引用样式。

10. Kute.js

一个完全成熟的原生 JS 动画引擎，具有跨浏览器动画的基本功能。重点是代码质量，灵活性，性能和大小（核心引擎17k 和 gzipped 5.5k） - 这是一个演示。该库也是可扩展的，因此你可以添加自己的功能。

11. Typed.js

超过 7k 星星，这个库基允许你以选定的速度为字符串创建打字动画。你还可以在页面上放置 HTML div 并从中读取以允许搜索引擎和禁用 JS 的用户访问，由Slack和其他人使用，这个库既流行又非常有用。

原文：https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59

最近在做动画相关的项目，推荐 11 个好用的 JS 动画库相关推荐

asp.net mvc相关开源项目推荐
原文地址为: asp.net mvc相关开源项目推荐 asp.net mvc ctp版本发布不到一个月时间,在社区出现了丛多的优秀开源项目,社区的活跃性非常高哦,前一段时间园子里也引发了MVC和Web ...
开源作者在行动：疫情防控相关开源项目推荐
开源作者在行动:疫情防控相关开源项目推荐: https://blog.gitee.com/2020/02/03/ncov-open-source-project/
不明觉厉！Gitee大神们的算法/数学相关开源项目推荐
现在的大厂面试,算法似乎已经成为了必考项目.当大家的业务水平相近,谁的数学与算法基础更好,谁可能就会获得更好的机会.Gitee 上也有一些数学算法的大牛,今天就为大家分享他们的开源项目,希望能给正在学 ...
自然语言推断(NLI)、文本相似度相关开源项目推荐(Pytorch 实现)
Awesome-Repositories-for-NLI-and-Semantic-Similarity mainly record pytorch implementations for NLI a ...
信息管理毕设项目推荐
文章目录 0 前言 1 毕设项目推荐 2 JavaWeb 项目 2.1 线考试系统 ( web前后端+小程序) 2.2 在线考试 2.3 外卖系统 2.4 电影院选座系统 3 移动端项目 3.1 仿美 ...
android 动画变成素材,AE技法-把AE动画转换成Android原生动画，撂倒GIF做动画
4399游戏盒(安卓版APP)项目接手已久,想输出一些小经验分享给大家,以下是写了一个很简单的lottie应用. 一直以来,在 Android.iOS.React Native 上实现一套复杂动画是一 ...
推荐10个常用的CSS动画库
一.Animista 网站描述:在线生成 css 动画 Animista是一个在线动画生成器,同时也是一个动画库,它为我们提供了以下功能 1. 选择不同的动画我们可以选择想要的动画类型(例如entr ...
前端能力模型-动画类型及动画库的介绍
一.背景: 合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥. 二.动画技术分类: 按技术类型来进行分类 ...
js svg语音波动动画_11 个非常受欢迎的 JavaScript 动画库，值得学习！
1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了. .CSS3D 和 WebGL渲染器,让我们在设备和浏览器之间创建丰富的 ...

最近在做动画相关的项目，推荐 11 个好用的 JS 动画库

1.Three.js

2. Anime.js

3.Mo.js

4. Velocity

5. Popmotion

6. Vivus

7. GreenSock JS

8. Scroll Reveal

9. Hover (CSS)

10. Kute.js

11. Typed.js

最近在做动画相关的项目，推荐 11 个好用的 JS 动画库相关推荐

最新文章

热门文章