IMWebConf2018 是由腾讯 IMWeb 团队主办的国内顶级前端技术领域开发者大会，自举办以来，已有数千名前端相关技术人员现场参与 IMWeb Conf。大会曾邀请来自 W3C 标准制定的权威，来自 Google、微软、腾讯等知名互联网企业的技术专家，以及著名开源框架、库的作者，作为演讲嘉宾分享前端各领域前沿技术标准及实践。

本文将分享 Kay 今天（2018年10月14日）参加的可视化与动画分会场中，分别来自 Adobe、阿里 AntV 和百度 ECharts 的三位重量级嘉宾的精彩演讲的摘要（由于时间所限，只记录了笔者比较感兴趣的部分）。会后如果主办方公开嘉宾的 PPT 或演讲视频，笔者会将链接更新到文后的 Resource 部分，供大家了解更完整的内容。   

注：如有不准确的地方，欢迎指正，谢谢。

---

演讲一：谈谈用户界面动画

演讲者：张文婷 @Adobe 资深设计师

动画实现方式

1. CSS 动画

2. SVG/SMIL 动画（有别于用 CSS 来控制 SVG）—— 最被低估，即将被 CSS 语法替代（但部分动画如 morph 目前只有 SMIL 能实现）

    - 封装了样式，动画甚至交互（例如点击后才运行的动画）

    - 比 gif 多了交互，同样可以自运行

    - 不足：每个动画都是独立的，缺乏内在逻辑

3. Javascript 动画 —— 最强大

    - GreenSock GSAP

        - 通过属性对（位置，透明度等）配置

        - Timeline 功能（在动画间存在先后出现逻辑时，提升开发效率）

    - Lottie/bodymovin

        - 设计师用 AE 做动画，导出 data.json，通过 bodymovin 导入可以直接当代码用。大大降低设计师和程序员之间的沟通成本

        - 可选择渲染器：SVG/Canvas

4. 黑科技：带有动画轴的 icon font

    - 存于 woff2 格式文件；基于可变字体（Variable fonts），兼容除 IE 以外的主流浏览器（包括移动端）

    - 动画封装在字体文件里，代码简洁，可以作为前端框架或设计语言的一部分

    - 使用：在 CSS 中配置 font-variation-settings 和 transformation，几行代码就可以实现例如 menu 按钮的点击动画等复杂形变（如 CSS 不支持的 Morph 形变）

    - 可实现帧动画，可定义很多不同的轴

    - 个人项目即将开源，加入 Google Font 开源字体

    - 相关答疑：目前这种带动画的 icon 字体有一定的设计门槛，设计师需要具备字体设计的知识；设计工具的操作方式类似 After Effect

演讲二：AntV 让数据栩栩如生

演讲者：梁文森（绝云） @阿里 AntV G2负责人

可视化进入深水区

1. 更多图表类型的需求

    - 韦恩图, 分面对向条形图等等

2. 更多交互需求

3. 前端数据分析和处理需求

    - 数据量较小时把数据处理放到前端，减少数据库访问次数；

    - 开发前端 OLAP 引擎（支持十万/几十万行以内数据）实现前端数据的切片，上钻，下取

    - 案例：2D 画布超大规模图（十亿级别数据）

G2 开源一年

- 完备图形语法（非常适合用于 BI 场景对同一份数据的不同纬度的可视化）

- 更多图表类型

- 增强图表组件（更多自定义样式）

    - 可以翻页的 legend

    - 更可定制的 tooltip

- 扩展数据处理能力（dataset 模块）

- 高交互

    - 刷选等200种底层事件

    - 交互语法的尝试

- Storytelling（泰坦尼克号数据案例）

- 可视化辅助工具实践（Webpack 打包分析）

- 优化实践

AntV 优化实践

- 绘图层性能（双引擎 canvas / svg；画布越大 Canvas 性能越差）

- 算法

- 图表层一

- 图表层二

- 方案层

AntV 开源进程

- F2 针对移动端，IoT场景（H5）

- G6 关系图（名字来源于六度空间关系）图编辑，脑图

- L7 地图 11月22日开源

演讲三：大数据可视化性能优化

演讲者：宿爽（爽爷）@百度 ECharts

减省计算

- 采样（图形呈现顺序与数据顺序：折线图）

- 图形的简化（K线图在缩小后可以简化为线）

- 合并路径（减少抽象引起性能的损耗，例如在样式可以一致的时候可以先统一设置样式，逐一绘制）

并行化

1. GPGPU（WebGL）

    - 力引导布局

        - 非 GPU：算法 + Web Worker 等优化

        - GPU：用 shader 计算，写在纹理里面；性能提升效果显著（缺点是兼容性不足，编程繁琐）

2. 渐进计算和渲染（Progressive）

    - Chrome：不阻塞系统（不卡）的速度要达到：每帧的执行时间 16ms 以下，或至少50ms 以下

    - 分片作业 & 流（EChart 3 至 4 的主要优化），主要应用到缩放场景

    - 分片的实现：取模优于采样（速度快，且视觉上闪现更少）

    - 增量加载（分块）/ 增量渲染（流）

3. Web Worker（仍在尝试阶段）

    - 用另一个线程计算布局，完成后再通知主 UI 线程

编程实现的雕琢

（工程方面；通用性一般，不得不做时才做）

- 热点代码和路径

- 内存的使用

- GC（垃圾管理）的影响 -> 极致性能

    - 适时释放

    - 重用对象？（而非经常创建大对象；仅为一个思路，未测试验证其有效性）

    - 使用 Typed Array（用于内存性能敏感的场景，控制使用的内存；但管理比较麻烦）

圆桌讨论

Q：对于在可视化中加入动画效果的看法？ECharts 和 AntV 有没有计划开发和提供开箱即用的动画功能？

A（经笔者整理自三位讲师的回答）：

1. 是否引入动画的考量依据：动画是否携带/传达了信息

    - 动画本身往往是会妨碍用户对可视化的理解认知的，因此不建议加不携带任何信息（即非功能性）的动画（例如，在柱状图载入数据时，从x轴升起的动画）

    - 但并非所有载入数据的动画都是无意义的，例如折线图的实时数据载入，折线从右往左移动的动画体现的数据的时序变化

2. 推荐使用：具备功能性的动画

    - transition 转场动画：用于衔接数据的变化，帮助用户理解数据从哪里移动到哪里，可以蕴含数值上升/下降趋势等信息；同时视觉上更流畅，提升用户体验

    - 用动画展现某一维度的数据（通常是时间纬度）：实际用到的也是 transition 动画，属于常见的具体场景，典型案例是 Hans Rosling 的气泡图动画系列。

    - 用于突出强调的动画：通过动画吸引用户的注意力，从而突出某部分数据的展示

3. 图表库对动画功能的支持和规划

    - AntV G2：目前支持比较基础，采用 D3 的动画实现，即支持且仅支持 D3 提供的动画。未提及后续计划。

    - ECharts：目前对功能性的动画（主要为转场动画）支持较好，但对自定义动画支持还比较少。下一个版本有计划增强定制动画的功能，预计将一定程度上实现开箱即用的动画。

---

Resources

1. Lottie 动画样例：https://www.lottiefiles.com

2. 可视化私房菜（AntV 团队博客）：https://www.yuque.com/antv/blog

3. https://observer.com/tag/data-visualization/