动效 ​

动效库 ​

1. auto-animate ​

一行代码零配置添加动画。支持 React, Solid, Vue, Svelte。

比如在 vue 中只需要用自定义指令v-auto-animate即可为元素添加动画。

autoAnimate注册在父元素上，子元素的添加/删除/移动会触发动画。

2. animejs ​

轻量级的 JavaScript 动画库，具有简单但功能强大的 API。适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

doc、demo、@types/animejs

3. gsap ​

GSAP 是一个 JavaScript 动画库，用于创建高性能、零依赖、跨浏览器动画。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……任何 JavaScript 可以触及的东西！

它有一个ScrollTrigger插件，可以轻松的创建基于滚动时的动画。

4. popmotion ​

支持数字、颜色和复杂字符串的关键帧、弹簧和惯性动画。

5. tsParticles ​

一个轻量级的粒子动画库，可以创建粒子效果，比如雪花、雨、下雨、烟、泡沫、火、流星、心、多边形、光环、星星等。有框架组件。

动效 helper 库 ​

1. watching-you ​

一个有趣的库，可以让你的网站看着你。它可以检测用户的鼠标位置，然后让网站的元素看着鼠标。

支持 React、Vue、Vanilla JS。

2. scroll-out ​

检测滚动变化以显示、视差和 CSS 变量效果。demo

3. scrollama ​

使用 IntersectionObserver 支持滚动事件进行滚动。（检测元素是否可见，或两元素是否相交）

动效工具 ​

1. PAG ​

腾讯研发的跨平台动效工具。

• 开发成本低
• 简化开发流程（应用中接入 SKD，设计师安装相关插件）
• 支持所有 AE 特性
• 资源占有少（二进制文件，占有少，解析短）
• 自带开发工具

2. SVGA ​

SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。

3. lottie ​

是一个适用于 Android、iOS、Web 和 Windows 的库，它解析 Adob​​e After Effects 动画，使用 Bodymovin 以 json 格式导出，并在移动设备和 Web 上本地呈现它们！