动效
动效库
1. auto-animate
一行代码零配置添加动画。支持 React, Solid, Vue, Svelte。
比如在 vue 中只需要用自定义指令v-auto-animate
即可为元素添加动画。
autoAnimate
注册在父元素上,子元素的添加/删除/移动会触发动画。
2. animejs
轻量级的 JavaScript 动画库,具有简单但功能强大的 API。适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
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 的库,它解析 Adobe After Effects 动画,使用 Bodymovin 以 json 格式导出,并在移动设备和 Web 上本地呈现它们!