# Framer 运动动画 ## 安装 npm 安装framer-motion ## 基本淡入 '使用客户端'；从'framer-motion'导入{motion}；导出函数 FadeIn({ 孩子 }: { 孩子: React.ReactNode }) { 返回（ <运动.div 初始={{ 不透明度: 0, y: 20 }} 动画={{ 不透明度: 1, y: 0 }} 过渡={{持续时间:0.5}} > {孩子} ）； } ## 交错的孩子 '使用客户端'；从'framer-motion'导入{motion}；常量容器= { 隐藏：{ 不透明度：0 }，显示：{ 不透明度：1，过渡：{ 交错儿童：0.1， }, }, }; 常量项 = { 隐藏：{ 不透明度：0，y：20 }，显示：{ 不透明度：1，y：0 }， }; 导出函数 StaggeredList({ items }: { items: React.ReactNode[] }) { 返回（ <运动.ul 变体={容器} 初始=“隐藏” 动画=“显示” 类名=“空间-y-4” > {items.map((child, i) => ( {孩子} ))} ）； } ## 滚动触发的动画 '使用客户端'；从'framer-motion'导入{motion，useInView}；从'react'导入{useRef}；导出函数 ScrollReveal({ 孩子 }: { 孩子: React.ReactNode }) { const ref = useRef(null); const isInView = useInView(ref, { Once: true, margin: '-100px' }); 返回（ <运动.div 参考={参考} 初始={{ 不透明度: 0, y: 50 }} 动画={isInView？ { 不透明度: 1, y: 0 } : { 不透明度: 0, y: 50 }} 过渡={{持续时间：0.6，缓和：'easeOut'}} > {孩子} ）； } ## 英雄动画 '使用客户端'；从'framer-motion'导入{motion}；导出函数 HeroSection() { 返回（

<运动.h1 初始={{ 不透明度: 0, y: 30 }} 动画={{ 不透明度: 1, y: 0 }} 过渡={{持续时间：0.8，延迟：0.2}} className="text-5xl md:text-7xl 字体粗体" > 普拉提和瑜伽 <运动.p 初始={{ 不透明度: 0, y: 30 }} 动画={{ 不透明度: 1, y: 0 }} 过渡={{持续时间：0.8，延迟：0.4}} className =“text-xl mt-6 text-muted-foreground” > 改变你的身体和思想 <运动.div 初始={{ 不透明度: 0, y: 30 }} 动画={{ 不透明度: 1, y: 0 }} 过渡={{持续时间：0.8，延迟：0.6}} 类名=“mt-8 弹性间隙-4” > <按钮>立即预订了解更多

）； } ## 卡牌悬停效果 '使用客户端'；从'framer-motion'导入{motion}；导出函数 AnimatedCard({ 儿童 }: { 儿童: React.ReactNode }) { 返回（ <运动.div whileHover={{ y: -5, boxShadow: '0 10px 30px rgba(0,0,0,0.1)' }} 过渡={{持续时间:0.2}} className="bg-card rounded-lg p-6 边框" > {孩子} ）； } ## 节包装 '使用客户端'；从'framer-motion'导入{motion}；从 'framer-motion' 导入 { useInView } ；从'react'导入{useRef}；接口SectionProps { 孩子：React.ReactNode；类名？：字符串；延迟？：数量； } 导出函数 AnimatedSection({ 儿童, 类名, 延迟 = 0 }:SectionProps) { const ref = useRef(null); const isInView = useInView(ref, { Once: true, margin: '-50px' }); 返回（ <运动.部分参考={参考} 初始={{ 不透明度: 0, y: 40 }} 动画={isInView？ { 不透明度: 1, y: 0 } : {}} 过渡={{持续时间：0.6，延迟，缓和：'easeOut'}} 类名={类名} > {孩子} ）； } ## 计数器动画 '使用客户端'；从'framer-motion'导入{运动，useMotionValue，useTransform，animate}；从'react'导入{useEffect}；接口 CounterProps { 来自：号码；至：号码；持续时间？：数量； } 导出函数 AnimatedCounter({ from, to,uration = 2 }: CounterProps) { const count = useMotionValue(from); const rounded = useTransform(count, (latest) => Math.round(latest)); 使用效果（（）=> { const 控件 = animate(count, to, { 持续时间 }); 返回控制。停止； }, [计数, 至, 持续时间]); 返回{rounded}; } // 用法

+ 满意的客户

## 页面转换包装器 '使用客户端'；从“framer-motion”导入{motion，AnimatePresence}；从 'next/navigation' 导入 { usePathname }；导出函数 PageTransition({ 孩子 }: { 孩子: React.ReactNode }) { const 路径名 = usePathname(); 返回（ <运动.div 键={路径名} 初始={{不透明度:0}} 动画={{不透明度:1}} 退出={{ 不透明度: 0 }} 过渡={{持续时间:0.3}} > {孩子} ）； } ## 手风琴动画 '使用客户端'；从“framer-motion”导入{motion，AnimatePresence}；从'react'导入{useState}；接口 AccordionItemProps { 标题：字符串；孩子：React.ReactNode； } 导出函数 AccordionItem({ 标题, 子项 }: AccordionItemProps) { const [isOpen, setIsOpen] = useState(false); 返回（

<按钮 onClick={() => setIsOpen(!isOpen)} className =“w-full py-4 flex justify-after items-center” > {标题} <运动.span 动画={{旋转：isOpen？ 180: 0 }} 过渡={{持续时间:0.2}} > ▼ <动画存在> {已打开 && ( <运动.div 初始={{高度：0，不透明度：0}} 动画={{高度：'自动'，不透明度：1}} 退出={{高度：0，不透明度：0}} 过渡={{持续时间:0.3}} 类名=“溢出隐藏” >

{子项}

)}

）； } ## 性能提示 1.使用`layoutId`进行共享元素转换 2. 使用`useReducedMotion()`来尊重用户偏好 3. 避免对布局属性（宽度、高度）进行动画处理 - 使用变换 4. 通过 Tailwind 的 `will-change-transform` 谨慎使用 `will-change` 5. 更喜欢“opacity”和“transform”动画（GPU 加速）

成帧器运动动画

包含技能