大家好,我是鱼樱!!!
关注公众号【鱼樱AI实验室】
持续每天分享更多前端和AI辅助前端编码新知识~~喜欢的就一起学反正开源至上,无所谓被诋毁被喷被质疑文章没有价值~
一个城市淘汰的自由职业-农村前端程序员(虽然不靠代码挣钱,写文章就是为爱发电),兼职远程上班目前!!!热心坚持分享~~~
今天大家分享一些有意思的动画库~ 并且推荐一个双越老师的划水AI项目 有需要的可以私我走优惠通道~
以下是 React 中常用的动画库及其核心用法指南,结合了多个来源的实践案例和文档说明:
一、React Spring 官网参考
特点:基于弹簧物理模型的动画库,支持声明式语法和高度可定制的动画效果。
-
安装:
shnpm install react-spring
-
核心 API:
useSpring
:用于创建单个动画效果,返回动画属性。animated
:包裹需应用动画的组件,支持样式插值。
-
示例(数字过渡动画) :
jsimport { useSpring, animated } from 'react-spring'; function NumberAnimation({ value }) { const props = useSpring({ number: value, from: { number: 0 } }); return ( <animated.span> {props.number.to(n => n.toFixed(0))} </animated.span> ); }
应用场景:数值变化、元素位移、透明度变化等。
二、React Transition Group 官网参考
特点:专注于组件入场/出场动画,依赖 CSS 类实现过渡效果。
-
安装:
shnpm install react-transition-group
-
核心组件:
CSSTransition
:控制单个元素的动画生命周期。TransitionGroup
:管理列表元素的批量动画(如动态列表)。
-
示例(元素淡入淡出) :
jsimport { CSSTransition } from 'react-transition-group'; function FadeComponent({ isVisible }) { return ( <CSSTransition in={isVisible} timeout={300} classNames="fade" unmountOnExit > <div>内容</div> </CSSTransition> ); }
CSS 类定义:
css.fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; transition: opacity 300ms; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 300ms; }
应用场景:弹窗、路由切换、列表增删动画。
三、Framer Motion framer motion 官方网站、framer 一个设计网站
特点:直观的声明式动画语法,支持复杂交互和手势动画。
-
安装:
shnpm install framer-motion
-
核心 API:
motion
:动画组件前缀(如motion.div
)。- 动画属性:
initial
(初始状态)、animate
(目标状态)、transition
(过渡配置)。
-
示例(元素缩放) :
jsimport { motion } from "framer-motion"; function ScaleComponent() { return ( <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ duration: 0.5 }} > 缩放内容 </motion.div> ); }
应用场景:交互式按钮、页面元素入场效果、拖拽动画。
四、其他推荐库
- React Motion 官网参考
- 特点 :基于物理模型的动画,适合复杂动态效果。 - 核心 API :
<Motion>
组件通过 style
属性动态计算值。
-
Ant Motion
- 特点:Ant Design 配套动画方案,提供预设动画集合。
- 应用场景:企业级后台系统的标准化动效。
-
React Move 官网参考
- 特点 :数据驱动的动画,适合可视化图表过渡。 - 核心 API :
NodeGroup
管理数据变化与动画映射。
五、选择建议
- 简单过渡动画 :优先使用
react-transition-group
+ CSS 类。 - 复杂交互动画 :选择
react-spring
或Framer Motion
,前者适合物理模拟,后者适合声明式语法。 - 数据可视化 :考虑
React Move
或react-spring
的插值功能。
特别的
React Bits 是一个大型的动画 React 组件集合,包含动画、组件、背景,动画创意满满,开源免费使用!这些组件都通过 props 提供了自定义选项,可以轻松定制
React 组件 jsx 代码和样式可以直接复制粘贴,支持JS、TS两种模式,样式支持纯CSS和Tailwindcss 实现
2.remotion 官网参考
Remotion允许使用熟悉的工具和语言(如 HTML、CSS、JavaScript 和 TypeScript)创建视频和动画。
3.Lottie 官网参考
Lottie 是 Airbnb 开源的动画库,支持通过 JSON 文件渲染由 Adobe After Effects 制作的动画。其优势包括:
- 高性能:JSON 文件体积小,渲染效率高。
- 跨平台:支持 Web、React Native、iOS、Android。
- 设计与开发协作:设计师通过 AE 制作动画,开发者直接调用 JSON 文件,实现"所见即所得"。
安装与引入
-
安装依赖 :
shnpm install react-lottie @types/react-lottie # React Web 项目 yarn add lottie-react-native [email protected] # React Native 项目
-
JSON 文件获取 :
- 从 Lottie 官网 下载免费动画。
- 使用 Adobe After Effects + Bodymovin 插件导出动画 JSON 文件。
基础用法
- 基本配置
jsx
import Lottie from "react-lottie";
import animationData from "./animation.json";
const App = () => {
const options = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice", // 保持宽高比
},
};
return <Lottie options={options} height={200} width={200} />;
};
- 控制动画状态 通过
eventListeners
和ref
控制播放、暂停等行为:
jsx
const lottieRef = useRef(null);
<Lottie
ref={lottieRef}
options={options}
isStopped={false}
isPaused={false}
eventListeners={[
{
eventName: "complete",
callback: () => console.log("动画播放完成"),
},
]}
/>;
// 手动控制
lottieRef.current?.play();
lottieRef.current?.pause();
lottieRef.current?.stop();
进阶控制
1. 动态参数调整
-
速度控制 :通过
speed
属性调整播放速度(设为0
暂停,1
正常速度)。 -
进度控制 :结合
Animated
库实现动画进度绑定(如点赞效果):jsxconst progress = useRef(new Animated.Value(0)).current; <LottieView source={animationData} progress={progress} />;
资源路径问题
-
本地资源:直接导入 JSON 文件。
-
远程资源 :将 JSON 和图片托管至 CDN,通过
path
或assetsPath
指定路径:jsxlottie.loadAnimation({ container: element, path: "https://cdn.example.com/animation.json", assetsPath: "https://cdn.example.com/images/", });
常见问题与解决
- 动画不播放 :
- 检查 JSON 文件路径是否正确。
- 确保
autoplay
设为true
或手动调用play()
。
- 图片加载失败 :
- 使用 CDN 统一管理资源路径。
- React Native 兼容性 :
- 确保原生依赖正确链接(如 iOS 的 CocoaPods 配置)。
最佳实践
- 性能优化 :
- 压缩 JSON 文件大小,避免复杂动画。
- 使用
useMemo
缓存动画配置。
- 交互设计 :
- 结合用户操作触发动画(如点击、滚动)。
- 跨平台适配 :
- 响应式布局中动态调整动画尺寸。
应用场景
- 加载动画:数据请求时的等待提示。
- 交互动画:按钮点击、表单提交反馈。
- 页面过渡:路由切换时的平滑效果。
你们都用哪些动画库呢欢迎留言分享好用的动画库~