动画方案

概述

Web 前端动画技术生态丰富多样，从最底层的 CSS 动画到高级的 JavaScript 动画库，每种方案都有其独特的设计哲学、性能特征和适用场景。本文系统性地对比五种主流动画方案——CSS Animation、Web Animation API、GSAP、Framer Motion 和 Lottie，从实现原理、API 设计、性能表现到工程实践进行全面分析，帮助团队在不同项目需求下做出合理的技术选型。

一、CSS Animation

CSS Animation 是浏览器原生支持的声明式动画方案，通过 @keyframes 规则定义动画序列，使用 animation 属性控制动画的播放行为。

1.1 @keyframes 规则

@keyframes 定义了动画在时间轴上的关键帧状态，每个关键帧通过百分比或 from/to 关键字标记时间点：

css

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

百分比写法允许更精细的控制，例如三步渐变色动画：

css

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

1.2 animation 属性

animation 是以下子属性的简写形式：

属性	说明	默认值
`animation-name`	引用的 @keyframes 名称	none
`animation-duration`	单次动画时长	0s
`animation-timing-function`	缓动函数	ease
`animation-delay`	延迟启动时间	0s
`animation-iteration-count`	播放次数	1
`animation-direction`	播放方向	normal
`animation-fill-mode`	播放前后状态	none
`animation-play-state`	播放/暂停	running

组合使用示例：

css

.box {
  animation: slideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s 1 forwards;
}

1.3 steps 函数与逐帧动画

animation-timing-function 的 steps() 函数可将动画分割为离散的跳跃式变化，非常适合精灵图逐帧动画：

css

.sprite {
  width: 100px;
  height: 100px;
  background-image: url('sprite-sheet.png');
  animation: playFrames 1s steps(6) infinite;
}

@keyframes playFrames {
  from { background-position: 0 0; }
  to   { background-position: -600px 0; }
}

steps(n, start) 在每帧开始时跳跃，steps(n, end)（默认）在每帧结束时跳跃。

1.4 性能与 GPU 加速

CSS Animation 的性能关键在于触发的浏览器渲染流程。并非所有 CSS 属性变更都经过相同的渲染管线：

Layout → Paint → Composite：修改 width、height、top、left 等布局属性会触发完整的重排回流，性能开销最大。
Paint → Composite：修改 color、background-color、box-shadow 等绘制属性会触发重绘，开销中等。
Composite only：修改 transform 和 opacity 仅触发合成，由 GPU 处理，性能最佳。

启用 GPU 加速的推荐做法是将动画限制在合成属性上：

css

.gpu-accelerated {
  /* 使用 transform 代替 top/left */
  transform: translateX(100px);
  /* 触发独立合成层 */
  will-change: transform;
}

现代浏览器会自动将使用 transform/opacity 动画的元素提升为合成层，但滥用 will-change 会导致内存占用过高，应只将其应用于即将动画的元素。

1.5 优势与局限

优势：无需 JavaScript 依赖、浏览器原生支持零开销、声明式语法简洁直观、适合简单过渡和循环动画。

局限：缺少精细的播放控制（无 pause/resume/reverse 的编程接口）、无法动态生成关键帧、复杂时间线管理困难、不支持物理动画/弹簧效果。

二、Web Animation API

Web Animation API（WAAPI）是浏览器原生的 JavaScript 动画接口，将 CSS 动画的能力暴露给脚本层，同时提供了 CSS 动画所不具备的编程控制能力。

2.1 element.animate()

核心方法 element.animate() 接收两个参数——关键帧数组和配置对象：

javascript

const element = document.querySelector('.box');
const animation = element.animate(
  [
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(300px)', opacity: 0.5 },
    { transform: 'translateX(600px)', opacity: 1 },
  ],
  {
    duration: 2000,
    easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
    iterations: Infinity,
    direction: 'alternate',
  }
);

关键帧数组可以是对象数组（如上方示例），也可以是包含 offset 属性的精确控制形式，与 CSS @keyframes 的百分比对应：

javascript

const frames = [
  { offset: 0, transform: 'translateX(0)' },
  { offset: 0.5, transform: 'translateX(300px)', easing: 'ease-out' },
  { offset: 1, transform: 'translateX(0)' },
];

2.2 播放控制

WAAPI 的核心优势在于返回的 Animation 对象提供了完整的播放控制方法：

javascript

// 播放控制
animation.play();      // 播放
animation.pause();     // 暂停
animation.reverse();   // 反向播放
animation.cancel();    // 取消
animation.finish();    // 跳转到结束

// 状态查询
console.log(animation.playState);   // 'running' | 'paused' | 'finished' | 'idle'

// 播放速率（负值实现反向）
animation.playbackRate = 2;   // 2 倍速
animation.playbackRate = -1;  // 反向常速

2.3 finished Promise

animation.finished 返回一个 Promise，在动画完成时 resolve，非常适合编排动画序列：

javascript

async function playSequence() {
  const slideIn = element.animate(frames1, timing1);
  await slideIn.finished;

  const fadeOut = element.animate(frames2, timing2);
  await fadeOut.finished;

  const bounce = element.animate(frames3, timing3);
  // ...
}

2.4 与 CSS 动画对比

维度	CSS Animation	Web Animation API
声明方式	CSS 文件	JavaScript
关键帧生成	静态	动态/运行时
播放控制	animation-play-state	play/pause/reverse/finish/cancel
时间线编排	需 JS 辅助	finished Promise 原生支持
缓动能力	内置函数 + cubic-bezier	同左 + 可自定义
性能	相同（同走合成器线程）	相同
浏览器支持	全面	现代浏览器（IE 不支持）
调试便利性	浏览器 DevTools 友好	相对抽象

WAAPI 填补了 CSS 动画在编程控制层面的空白，但复杂的序列编排仍需大量手写逻辑，这也正是 GSAP 等库的用武之地。

2.5 注意事项

调用 element.animate() 会立即返回一个 Animation 实例，动画默认自动播放。如果希望先创建再播放，需要先 pause()：

javascript

const anim = element.animate(frames, { ...timing, autoPlay: false });
// 准备工作...
anim.play();

WAAPI 在 iframe 或新标签页中会受浏览器的节能策略影响，非激活页面的动画会被节流。

三、GSAP

GSAP（GreenSock Animation Platform）是业界领先的专业级 JavaScript 动画库，提供高性能、强兼容性和丰富的时间线编排能力。

3.1 基础 Tween

GSAP 的核心概念是 Tween（补间），使用 gsap.to()、gsap.from()、gsap.fromTo() 创建：

javascript

// gsap.to —— 从当前状态到目标状态
gsap.to('.box', {
  x: 300,            // 等同于 transform: translateX(300px)
  rotation: 180,
  scale: 1.5,
  opacity: 0.8,
  duration: 1,
  ease: 'power2.out',
});

// gsap.fromTo —— 明确指定起止状态
gsap.fromTo('.box',
  { x: 0, opacity: 0 },
  { x: 300, opacity: 1, duration: 1 }
);

GSAP 对 CSS 属性做了友好封装，x、y、rotation、scale 等会自动映射为 transform 矩阵，无需手动拼接字符串。

3.2 缓动（Easing）

GSAP 内置丰富的缓动函数，远超 CSS 内置函数：

javascript

// GSAP 缓动命名规则: [类型].[变体]
ease: 'power1.out'      // 等同于 CSS ease-out
ease: 'power2.inOut'    // 等同于 CSS ease-in-out
ease: 'back.out(2)'     // 回弹效果
ease: 'elastic.out(1, 0.5)' // 弹性效果
ease: 'bounce.out'      // 弹跳效果
ease: 'steps(6)'        // 逐帧
ease: 'none'            // 线性

3.3 时间线（Timeline）

gsap.timeline() 是 GSAP 最强大的功能之一，允许将多个 Tween 编排为有序或交叠的时间线：

javascript

const tl = gsap.timeline({ defaults: { duration: 0.6, ease: 'power2.out' } });

tl.to('.box', { x: 200 })           // 第 0s 开始
  .to('.box', { rotation: 360 }, '-=0.3')  // 与前一个重叠 0.3s
  .to('.circle', { scale: 1.5 }, 1)        // 第 1s 开始
  .to('.circle', { opacity: 0 }, '+=0.2'); // 上一个结束后 0.2s

时间线的位置参数支持绝对时间（秒）、相对标签（'< 上一个开始/'> 上一个结束）和偏移量：

javascript

tl.to('.a', { x: 100 })
  .addLabel('mid', '+=0.5')
  .to('.b', { y: 50 }, 'mid')      // 在标签 mid 处开始
  .to('.c', { scale: 2 }, 'mid+=0.2');

3.4 Stagger（交错动画）

Stagger 使多个元素以一定的延迟依次播放动画，是列表入场动画的利器：

javascript

gsap.to('.item', {
  y: 100,
  stagger: 0.08,           // 每个元素延迟 0.08s
  // stagger 的进阶用法：
  // stagger: { each: 0.08, from: 'center', grid: 'auto', axis: 'x' }
});

from 参数支持 'start'、'end'、'center'、'edges' 或自定义索引函数。

3.5 ScrollTrigger 滚动驱动

ScrollTrigger 插件将动画与滚动位置绑定，实现滚动驱动动画、视差效果、固定元素等复杂交互：

javascript

gsap.registerPlugin(ScrollTrigger);

gsap.to('.reveal', {
  scrollTrigger: {
    trigger: '.reveal',
    start: 'top 80%',
    end: 'top 30%',
    scrub: 1,              // 动画进度跟随滚动，1 秒平滑
    markers: true,          // 调试标记（开发时使用）
    toggleActions: 'play none none reverse',
  },
  opacity: 1,
  y: 0,
  duration: 1,
});

ScrollTrigger 支持 toggleActions（进入/离开/再次进入/再次离开）和 scrub（直接绑定滚动位置）两种模式，后者可实现非常丝滑的滚动驱动体验。

3.6 性能表现

GSAP 在所有现代浏览器中均使用 requestAnimationFrame 驱动，并且针对 DOM 更新做了极致优化：

属性写操作批量合并，避免强制回流；
使用缓存矩阵计算 transform，减少字符串拼接；
自动检测并使用 transform3d() 触发 GPU 加速；
暂停状态零 CPU 开销。

即使在低端移动设备上，GSAP 也能保持 60fps 的流畅表现。对于超大量元素的动画，可使用 GSAP 的 quickTo() 或 quickSetter() 方法进一步优化。

3.7 优势与局限

优势：兼容性极佳（IE9+）、高性能、时间线编排强大、插件生态丰富（ScrollTrigger/MorphSVL/DrawSVG 等）、不依赖框架、体积约 15KB（gzip 核心）。

局限：商业项目付费授权（绿卡/企业版）、学习曲线较陡、过度使用 Timeline 导致代码可读性下降、非 React 声明式范式（需 ref 桥接）。

四、Framer Motion

Framer Motion 是 React 生态中最流行的声明式动画库，由 Framer 团队维护，提供了从简单过渡到复杂布局动画的完整解决方案。

4.1 声明式动画

核心思想是通过 motion 组件替代原生 HTML 元素，用 animate 属性声明目标状态：

jsx

import { motion } from 'framer-motion';

const MyBox = () => (
  <motion.div
    animate={{ x: 200, opacity: 0.5, rotate: 180 }}
    transition={{ duration: 1, ease: 'easeOut' }}
  >
    Hello
  </motion.div>
);

initial 属性定义初始状态，animate 定义目标状态，exit 定义卸载时的状态：

jsx

<motion.div
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.8 }}
/>

4.2 AnimatePresence（进入/离开动画）

AnimatePresence 组件捕获子元素的挂载和卸载事件，使退出动画得以执行：

jsx

import { AnimatePresence, motion } from 'framer-motion';

function TodoList({ items }) {
  return (
    <AnimatePresence>
      {items.map(item => (
        <motion.li
          key={item.id}
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          exit={{ opacity: 0, height: 0 }}
          layout
        >
          {item.text}
        </motion.li>
      ))}
    </AnimatePresence>
  );
}

4.3 布局动画（layout）

通过 layout 属性，Framer Motion 可以自动处理元素布局变化的平滑过渡，内部使用 FLIP 技术实现高性能：

jsx

<motion.div layout>
  {/* 当兄弟元素增删或父容器尺寸变化时，自动平滑过渡 */}
</motion.div>

配合 layoutId 可以在不同组件之间共享布局身份，实现无缝的列表重排和模态框动画。

4.4 手势动画

内置手势处理：whileHover、whileTap、whileDrag、whileFocus、whileInView：

jsx

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  whileDrag={{ boxShadow: '0 10px 30px rgba(0,0,0,0.2)' }}
  drag="x"
  dragConstraints={{ left: -100, right: 100 }}
>
  拖拽我
</motion.button>

4.5 物理动画（Spring）

Framer Motion 内置弹簧物理模型，通过 type: 'spring' 启用，参数直观：

jsx

<motion.div
  animate={{ x: 200 }}
  transition={{
    type: 'spring',
    stiffness: 300,    // 刚度——值越大越硬
    damping: 20,       // 阻尼——值越大衰减越快
    mass: 1,           // 质量——值越大越笨重
  }}
/>

Spring 动画相比缓动函数更能模拟真实物理世界的手感，尤其适合 UI 交互动画。stiffness 和 damping 的调参相对直观，相比 CSS cubic-bezier 更容易调出自然的效果。

4.6 优势与局限

优势：React 声明式范式完美契合、AnimatePresence 优雅处理卸载动画、布局动画（FLIP）开箱即用、弹簧物理模型自然流畅、手势与交互动画高度集成。

局限：强绑定 React 生态非通用方案、包体积较大（约 30KB gzip）、复杂时间线编排不如 GSAP 灵活、SSR 需要额外配置。

五、Lottie

Lottie 是 Airbnb 开源的跨平台动画渲染库，使用 JSON 格式解析 After Effects 导出的 Bodymovin 动画，实现设计侧与开发侧的高效协作。

5.1 Bodymovin 导出流程

工作流程如下：

设计师在 After Effects 中创建动画；
安装并使用 Bodymovin 插件导出为 JSON 文件；
开发者在 Web/Android/iOS/Flutter 等平台通过 Lottie 库解析渲染。

JSON 文件中包含了完整的动画数据——形状、位置、缩放、旋转、透明度、颜色以及所有关键帧信息。

5.2 前端使用示例

javascript

import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'), // 容器
  renderer: 'svg',         // 'svg' | 'canvas' | 'html'
  loop: true,
  autoplay: true,
  path: 'https://example.com/animation.json', // JSON 路径
  // 或者直接传入 JSON 数据：
  // animationData: animationJSON,
});

5.3 交互控制

Lottie 提供了丰富的播放控制 API：

javascript

// 播放控制
animation.play();
animation.pause();
animation.stop();
animation.goToAndStop(30, true); // 跳转到第 30 帧

// 播放速率
animation.setSpeed(2); // 2 倍速

// 方向
animation.setDirection(-1); // -1 为反向

// 分段播放
animation.playSegments([[0, 30], [60, 90]], true);

// 事件监听
animation.addEventListener('complete', () => console.log('播放完成'));
animation.addEventListener('loopComplete', () => console.log('循环结束'));
animation.addEventListener('enterFrame', (e) => {
  console.log(`当前进度: ${e.currentTime}/${e.totalTime}`);
});

5.4 AE 导出最佳实践

设计师在制作动画时需要遵循一定的规范以确保导出效果：

支持的属性：形状图层、路径、变换（位置/缩放/旋转/透明度）、蒙版、效果（部分）；
不支持的属性：表达式、脚本、3D 图层、摄像机、灯光、粒子效果；
性能建议：减少复杂形状的路径点数量、避免过多图层嵌套、使用矢量图形而非位图；
尺寸规范：导出版本适配目标渲染分辨率，运行时放大可能产生锯齿。

5.5 跨平台支持

Lottie 拥有丰富的跨平台生态：

平台	库名
Web	lottie-web / lottie-react
iOS	Lottie-iOS
Android	Lottie-Android
React Native	lottie-react-native
Flutter	lottie-flutter
Vue	vue-lottie

5.6 优势与局限

优势：设计-开发协作无缝、复杂矢量动画无需代码实现、跨平台统一效果、SVG 渲染清晰度高、JSON 文件相对轻量。

局限：动态交互能力有限（不适合交互驱动的动画）、不支持大量运行时修改、表达式/3D/粒子等 AE 高级功能不可用、复杂动画 JSON 可达数 MB、加载解析有额外性能开销。

六、五种方案对比

6.1 综合对比表格

维度	CSS Animation	Web Animation API	GSAP	Framer Motion	Lottie
声明方式	CSS 声明式	JS 命令式	JS 命令式	React 声明式	JSON 数据驱动
学习曲线	⭐ 低	⭐⭐ 中低	⭐⭐⭐⭐ 高	⭐⭐⭐ 中高	⭐⭐ 中低
调试便利性	⭐⭐⭐⭐⭐ DevTools 原生	⭐⭐⭐ 需 console	⭐⭐⭐ GSDevTools	⭐⭐⭐ React DevTools	⭐⭐ 黑盒调试
时间线编排	❌ 不支持	⭐⭐ 基础（Promise）	⭐⭐⭐⭐⭐ 顶级	⭐⭐⭐⭐ 良好（序列）	❌ 不支持
播放控制	⭐ 仅暂停/恢复	⭐⭐⭐⭐⭐ 完整	⭐⭐⭐⭐⭐ 完整	⭐⭐⭐ 基础	⭐⭐⭐⭐⭐ 完整
交互动画	⭐⭐ 需 JS 辅助	⭐⭐⭐ 可编程	⭐⭐⭐⭐⭐ ScrollTrigger+	⭐⭐⭐⭐⭐ 手势/布局	⭐ 有限
物理动画	❌	❌	需插件	⭐⭐⭐⭐⭐ Spring	❌
跨框架	✅ 通用	✅ 通用	✅ 通用	❌ 仅 React	✅ 通用
包体积	0 KB	0 KB	~15 KB gzip	~30 KB gzip	~8 KB + JSON
性能表现	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐（复杂动画）
浏览器兼容	⭐⭐⭐⭐⭐	⭐⭐⭐（无 IE）	⭐⭐⭐⭐⭐（IE9+）	⭐⭐⭐⭐	⭐⭐⭐⭐

6.2 适用场景

方案	推荐场景	不推荐场景
CSS Animation	简单过渡、hover 效果、入场动画、loading 动画	复杂时间线、交互动画、动态关键帧
Web Animation API	需要编程控制的简单动画、取代轻量 GSAP 场景	需要兼容 IE、超复杂时间线编排
GSAP	品牌营销页、滚动驱动动画、复杂时间线、游戏动效	纯 React 项目（可用 Framer Motion 替代）、低成本项目
Framer Motion	React 项目、布局动画、手势交互、Spring 物理动画	非 React 项目、对包体积极度敏感的场景
Lottie	品牌宣传动画、吉祥物动画、AE 复杂矢量动画	需要运行时交互的动画、动画文件过大时

七、选型建议

7.1 决策流程

是否有设计师参与的复杂矢量动画？ → Lottie
项目是否使用 React？ → 优先 Framer Motion
需要滚动驱动或复杂时间线？ → GSAP
仅需简单的 UI 过渡效果？ → CSS Animation
需要编程控制但不想引入额外库？ → Web Animation API

7.2 组合使用策略

实际项目中，多种动画方案并非互斥关系，合理的组合使用往往能达到最佳效果：

基础层：CSS Animation 处理日常的 hover、过渡、loading 等简单动画，零成本高性能；
交互层：Framer Motion（React）或 GSAP（其他框架）处理交互动画和复杂序列；
内容层：Lottie 承载品牌相关的复杂矢量动画，由设计师独立维护；
降级策略：WAAPI 作为轻量替补，在不引入第三方库的前提下提供编程控制能力。

7.3 性能权衡要点

选择动画方案时需考虑以下性能影响因素：

合成器线程：CSS Animation 和 WAAPI 在主线程繁忙时依然能保持运行；GSAP 和其他 JS 驱动方案则完全依赖主线程的 requestAnimationFrame。因此，对于需要在长任务执行期间保持流畅的动画，CSS/WAAPI 更可靠。
内存占用：Lottie 的 JSON 解析后会在内存中维护完整的矢量图形树，复杂动画可能占用数十 MB 内存；CSS 动画仅需维护少量合成层。
初始化开销：GSAP 和 Framer Motion 的库解析执行有固定开销（约 1-5ms），对于首屏性能敏感页面应考虑按需加载。
动画数量：同时播放大量动画时，CSS 动画的合成层可能耗尽 GPU 内存，需控制层数量。

7.4 未来趋势

浏览器原生 API 持续增强：WAAPI 的 GroupEffect、SequenceEffect 等规范正在推进，未来可能进一步减少对第三方库的依赖；
Scroll-driven Animations：Chrome 已实现的 scroll-timeline 和 view-timeline CSS 特性，有望原生取代 ScrollTrigger 的部分功能；
WebAssembly 动画引擎：部分高性能场景开始探索 WASM 驱动的动画计算。

参考演示

下方 iframe 内提供了五种动画方案的同屏对比 demo，使用相同的动画目标（盒子移动），直观展示各方案的代码实现和运行效果：

动画方案 ​

概述 ​

一、CSS Animation ​

1.1 @keyframes 规则 ​

1.2 animation 属性 ​

1.3 steps 函数与逐帧动画 ​

1.4 性能与 GPU 加速 ​

1.5 优势与局限 ​

二、Web Animation API ​

2.1 element.animate() ​

2.2 播放控制 ​

2.3 finished Promise ​

2.4 与 CSS 动画对比 ​

2.5 注意事项 ​

三、GSAP ​

3.1 基础 Tween ​

3.2 缓动（Easing） ​

3.3 时间线（Timeline） ​

3.4 Stagger（交错动画） ​

3.5 ScrollTrigger 滚动驱动 ​

3.6 性能表现 ​

3.7 优势与局限 ​

四、Framer Motion ​

4.1 声明式动画 ​

4.2 AnimatePresence（进入/离开动画） ​

4.3 布局动画（layout） ​

4.4 手势动画 ​

4.5 物理动画（Spring） ​

4.6 优势与局限 ​

五、Lottie ​

5.1 Bodymovin 导出流程 ​

5.2 前端使用示例 ​

5.3 交互控制 ​

5.4 AE 导出最佳实践 ​

5.5 跨平台支持 ​

5.6 优势与局限 ​

六、五种方案对比 ​

6.1 综合对比表格 ​

6.2 适用场景 ​

七、选型建议 ​

7.1 决策流程 ​

7.2 组合使用策略 ​

7.3 性能权衡要点 ​

7.4 未来趋势 ​

参考演示 ​

动画方案

概述

一、CSS Animation

1.1 @keyframes 规则

1.2 animation 属性

1.3 steps 函数与逐帧动画

1.4 性能与 GPU 加速

1.5 优势与局限

二、Web Animation API

2.1 element.animate()

2.2 播放控制

2.3 finished Promise

2.4 与 CSS 动画对比

2.5 注意事项

三、GSAP

3.1 基础 Tween

3.2 缓动（Easing）

3.3 时间线（Timeline）

3.4 Stagger（交错动画）

3.5 ScrollTrigger 滚动驱动

3.6 性能表现

3.7 优势与局限

四、Framer Motion

4.1 声明式动画

4.2 AnimatePresence（进入/离开动画）

4.3 布局动画（layout）

4.4 手势动画

4.5 物理动画（Spring）

4.6 优势与局限

五、Lottie

5.1 Bodymovin 导出流程

5.2 前端使用示例

5.3 交互控制

5.4 AE 导出最佳实践

5.5 跨平台支持

5.6 优势与局限

六、五种方案对比

6.1 综合对比表格

6.2 适用场景

七、选型建议

7.1 决策流程

7.2 组合使用策略

7.3 性能权衡要点

7.4 未来趋势

参考演示