🎨 交互动画设计方法论
📘 30章 · 从哲学到实战
⭐
友好色系
01
动画哲学与设计原则
为什么需要动画？12项基本原则在UI中的应用
02
缓动函数(Easing)深度解析
线性、缓入/出、弹跳、弹性曲线 · 数学与CSS实现
03
CSS过渡(Transition)实战
property, duration, timing-function, delay 完整用法
04
CSS关键帧动画(Keyframes)
@keyframes规则、animation属性、多步骤控制
05
JavaScript动画基础
requestAnimationFrame原理、性能优势、手动循环
06
Web Animations API入门
Element.animate()、关键帧对象、时间线控制
07
GSAP基础
TweenMax/TweenLite、Timeline、缓动插件
08
GSAP实战
ScrollTrigger、Stagger动画、时间线编排
09
Framer Motion入门
motion组件、animate属性、variants、布局动画
10
Framer Motion进阶
手势(drag/hover/tap)、AnimatePresence、共享布局
11
Lottie动画
After Effects导出、Lottie-web集成、交互与性能
12
SVG动画
stroke-dasharray/offset、路径动画、SMIL vs CSS
13
Canvas 2D动画
绘图上下文、粒子系统、帧率控制、碰撞检测
14
Three.js基础
场景、相机、渲染器、几何体与材质搭建
15
Three.js动画
rAF循环、TWEEN库集成、模型动画
16
滚动驱动动画
Intersection Observer、滚动进度映射、视差效果
17
手势与触摸动画
touch/pointer事件、hammer.js集成
18
页面转场动画
路由切换、View Transitions API、SPA转场
19
列表与容器动画
FLIP原理、React Transition Group、Vue Transition
20
图表动画
D3.js过渡、ECharts动画配置、数据驱动动画
21
性能优化
GPU加速、will-change、图层提升、避免重排重绘
22
无障碍动画
prefers-reduced-motion、暂停控制、语义化替代
23
设计系统动画规范
动画令牌、持续时间体系、缓动曲线库、组件文档
24
微交互设计
按钮反馈、加载状态、表单验证、通知提示
25
叙事性动画
引导页动画、品牌故事、数据故事化呈现
26
交互动画原型
Figma原型、Principle、Protopie与代码交付
27
动画调试工具
Chrome DevTools动画检查器、GSAP DevTools、性能分析
28
跨平台动画方案
React Native、Flutter、小程序动画对比
29
动画测试与质量保障
视觉回归测试、帧率监控、用户体验测试
30
综合项目实战
从设计稿到高保真交互动画网站全流程