> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 用 AE 制作 Display P3 广色域动图的三个方法

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/01.jpg "Photo by Tyler Lastovich on Unsplash")

前段时间写了篇博客 [在 Sketch/PS 中导出 Display P3 广色域图片的方法](https://lrd.im/blog/2019-07-02) 记录如何导出 P3 广色域静态图片，恰好最近工作上有需求要用到动画来完成，利用这次机会也记录一下制作支持 Display P3 广色域的 PNG 序列帧、CSS 精灵图和 APNG 三种格式动画的方法。

## 一、设置工作空间

首先不管使用什么方法，笔者建议先将 AE 的工作空间设置为 Display P3，目的是让设计师在 Display P3 广色域的工作空间内进行工作，更好地预览最终的效果。

将项目的颜色深度调至 16 位色彩，并且将工作空间设置为 Display P3，如图 1–1：

![Adobe After Effects 项目设置截图：Project 面板底部显示「16 bpc」色彩深度，点击后出现 Project Settings 对话框（右侧），在 Color 标签页中，Depth 设为「16 bits per channel」，Working Space 设为「Display P3」。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/02.png "图 1–1 设置项目颜色空间为 Display P3")

设置工作空间后可以在下面 3 个方法中选取当前最适合你的方法使用，制作支持 Display P3 广色域的图片素材。

## 二、在 AE 中导出 Display P3 广色域 PNG 序列帧

帧动画的实现原理是不断切换视觉内图片内容，利用视觉滞留生理现象来实现连续播放的动画效果。所以我们需要在导出来的多张 PNG 文件素材里嵌入 Display P3 颜色描述文件。

1. 将合成添加到渲染队列，设置通道、颜色深度，且在颜色管理页中设置 Display P3 为嵌入颜色描述文件，如图 2–1：

![AE Output Module Settings 截图，左侧 Main Options 中通道设为 RGB + Alpha、深度设为 Trillions of Colors+（已高亮标注）；右侧 Color Management 中输出配置文件设为 Display P3，并勾选 Embed Profile。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/03.png "图 2–1 颜色设置：将描述文件嵌入至文件")

2. 执行渲染，得到序列帧文件，检查一下，确保导出来的图片颜色描述文件是 Display P3。如图 2–1：

![macOS 文件简介窗口截图，显示导出的 Comp 1_00000.png 文件详情：尺寸 300×300，色彩空间 RGB，颜色描述文件为 Display P3，Alpha 通道为是，预览为纯红色方块，确认序列帧已正确嵌入 Display P3 颜色描述文件。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/04.png "图 2–2 检查文件颜色是否正确")

## 三、在 AE 中导出 Display P3 广色域 CSS Sprites（精灵图）

精灵图是一种 CSS 图像合并技术，将小图标和背景图像合并到一张图片上，然后利用 CSS 的背景定位来显示需要显示的图片部分。

这里笔者推荐使用 BigXiXi 制作的 [CSS-Sprite-Exporter](https://github.com/bigxixi/CSS-Sprite-Exporter) 插件导出精灵图并生成相关的代码。因为该插件导出来的图片是默认嵌入工作空间的颜色描述文件的，所以只要保证第一步中工作空间设置正确，一键导出即可。如图 3–1

![CSS-Sprite-Exporter 插件界面截图，显示导出配置。Generate 按钮被高亮标注，点击即可一键导出精灵图及相关 CSS 代码。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/05.png "图 3–1 一键导出精灵图")

如下图，可见导出来的精灵图已经带有 Display P3 颜色描述文件。如图 3–2

![导出的精灵图文件简介窗口显示其颜色描述文件为 Display P3、Alpha 通道为「是」。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/06.png "图 3–2 检查文件颜色是否正确")

同理包括 Lottie 这类用代码控制位图播放的动画方式，也可以在导出后，确保位图素材是嵌入了 Display P3 的颜色描述文件，最终的动画也将能展现艳丽的色彩。

## 四、制作支持 Display P3 广色域的 APNG 动图

近几年似乎用 APNG 替代 GIF 的呼声越来越高，因为 GIF 的图片质量是在太烂了，我们用其他视觉效果更好、压缩效率更高的格式来代替 GIF，比如接下来要说的 APNG 格式。

1.首先在 AE 里制作好动画后，我们可以用多种方法来将动画转换成 APNG 格式的动图，例如 BigXiXi 制作的插件 [Webp/Apng Exporter](https://github.com/bigxixi/webp_apng_exporter_for_AE) 直接在 AE 里导出，或者用 [iSparta](https://isparta.github.io/) 将序列帧转换成 APNG 格式的动图。如图 3–1：

![两款 APNG 导出工具界面对比：左侧为 AE 插件 BX Webp/Apng Exporter，可直接在 AE 内导出 WEBP 和 APNG 格式；右侧为 iSparta 独立应用，支持将序列帧转换为 APNG、GIF、WEBP 格式，并可设置压缩质量。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/07.png "图 3–1 导出 APNG 格式的动图")

2.然后双击该 APNG 动图（即用预览打开），点选 “工具” > “指派描述文件” >选择 Display P3 > 点按 “好”，然后按 ⌘+S 保存文件后，你获得了一张支持 Display P3 广色域的 APNG 动图。如图 3–2：

![在 macOS 预览 App 中，通过系统顶部菜单栏的「工具」>「指派描述文件」将 APNG 动图的色彩描述文件设置为 Display P3 的操作步骤截图：左侧展示菜单路径，右侧展示弹出的描述文件选择对话框。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/08.png "图 3–2 利用系统自带的“预览”APP 指派描述文件")

## 五、WebP 图片支持 Display P3 广色域图片吗？

根据官方介绍，WebP 格式的图片支持嵌入 ICC 颜色配置文件。

![图片显示 WebP 文件格式支持元数据（EXIF、XMP）及 ICC 颜色配置文件的官方说明截图，其中 "并且还包含 ICC 颜色配置文件" 一句被紫色下划线标注强调。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/09.png "WebP 格式介绍")

但目前笔者尝试了多种方法，都无法在浏览器中看到理想的 Display P3 色域 WebP 动图。

尝试过使用 WebP 官方制作工具 “webpmux” 将颜色描述文件嵌入至 WebP 动图中，虽然确实能成功嵌入，但图片颜色并没有转换过来。而将颜色描述文件嵌入至静态的 WebP 中，却能正常地显示艳丽的广色域图片。

![两个 Chrome 浏览器窗口对比：左侧为嵌入 ICC 描述文件的 WebP 动图，红色方块呈现偏暗的 sRGB 色彩；右侧为嵌入 ICC 的静态 WebP，红色显示鲜艳的 P3 广色域效果，证明浏览器忽略了动图中的颜色配置文件](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/10.png "在同样设置颜色配置文件后，右边的静态图能正常显示颜色，而左边的动图却没有变化")

当时不确定这是工具的 BUG、或是我操作问题，还是 WebP 的动图不支持设置颜色配置文件？所以我将遇到的问题反馈到 [Chromium 社区](https://bugs.chromium.org/p/webp/issues/detail?id=451)，很快得到了回复：

![Chromium 社区回复截图：项目成员确认 WebP 动图格式本身支持嵌入颜色配置文件，但 Chrome 浏览器尚未实现对动图 ICC Profile 的支持，源码中标注有 "FIXME: Implement ICC profile support for animated images"。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-01-18-b5646615e6ff/11.png "关于浏览器无法正确显示 WebP 动图的颜色问题 — 来自项目成员的回复")

大意是我们确实可以在 WebP 动图上嵌入颜色描述文件，但浏览器将其忽略了，即使用默认的 sRGB 颜色空间，似乎确实是一个 BUG？。

好吧这样看来，在我心中动图的综合排名是 APNG > PNG 序列 ≥ WebP > GIF。APNG 支持嵌入颜色配置文件，又能完整支持透明通道（全透明和半透明），又可以无损压缩，实在是妙！