大屏动效设计与帧率优化实战 · 课程目录

01 动效设计基础

设计原则工具介绍设计流程

01.html

02 帧率核心概念

帧率定义视觉暂留 60 vs 120 流畅度

02.html

03 CSS动画入门

transition animation @keyframes 性能分析

03.html

04 JavaScript动画

rAF原理 setTimeout对比帧率控制

04.html

05 Canvas 2D动效

Canvas基础绘制循环粒子系统性能优化

05.html

06 WebGL & Three.js

WebGL基础 Three.js入门 3D动效 GPU加速

06.html

07 SVG动画

SVG基础 SMIL动画 CSS动画SVG 性能对比

07.html

08 动效性能指标

FPS 帧时间卡顿率 Jank检测 DevTools

08.html

09 渲染管线优化

渲染流程重排重绘图层合成 will-change

09.html

10 内存与GC优化

内存泄漏对象池 GC机制避免频繁GC

10.html

11 动效设计模式

工厂模式观察者模式状态机

11.html

12 响应式动效

视口单位媒体查询分辨率适配 rem/vw

12.html

13 动效与交互

手势识别触摸优化惯性滚动阻尼效果

13.html

14 数据可视化动效

ECharts动效 D3.js过渡图表入场数据更新

14.html

15 动效性能监控

Performance API FPS Meter 监控面板报警机制

15.html

16 移动端动效优化

硬件加速 CSS vs JS 减少图层像素复杂度

16.html

17 动效帧率调试

Chrome帧率面板 Safari Inspector Android Profiler

17.html

18 动效设计系统

动效规范组件库动效Token 设计-开发协作

18.html

19 动效与无障碍

prefers-reduced-motion 降级方案用户偏好

19.html

20 动效测试

自动化测试视觉回归帧率测试性能基准

20.html

21 动效打包优化

Tree Shaking 代码分割懒加载 CDN加速

21.html

22 动效与Web Worker

Worker线程 OffscreenCanvas 解放主线程

22.html

23 动效与WebAssembly

Wasm加速粒子物理性能对比

23.html

24 动效与WebGPU

下一代图形API 计算着色器高性能渲染

24.html

25 动效与AI

AI生成动效自动优化智能帧率预测

25.html

26 动效安全

XSS防护资源安全第三方审计

26.html

27 动效国际化

多语言动效 RTL适配文化差异

27.html

28 动效与SEO

SEO影响渐进增强降级策略

28.html

29 动效与微前端

动效隔离共享库性能隔离

29.html

30 动效未来趋势

WebGPU普及 AI动效生成实时渲染元宇宙动效

30.html