一个用代码实现影视转场效果的脑洞之作。

从需求说起

有一天阿婆主接到了一个触屏页需求。

• 设计师：吉吉

让我们上上下下打量打量这个需求。

loading跟正片背景完全不一样！
整个需求还分成三个阶段：导语部分（开片）、职位介绍部分（正片）、结束部分（字幕）；每个阶段之间的元素少则三四个，多则四五个，如果一个一个地transition，想想都替浏览器觉得卡。
这个时候，一个童年的久远记忆浮出水面——好像有个类似舞台聚光灯的转场来着……

• 童年的回忆：猫和老鼠

于是阿婆主开始了漫长的考据征途。

转场（Transition）的初形态

不知大家注意到没有，凡是有presentation的地方就有转场的存在。
利器PPT以及更为高端的Keynote都为我们提供了现成的五花八门的转场效果。

再往人生前半段推，小学老师偶尔会用黑白幻灯片来展示一些图案内容，即便是这种形式也有着其独特的转场效果。

• [秘密特工]

最原始的知识海洋黑板，你可能会说，这可没有转场效果了吧？其实，擦黑板也是一种转场呀。

• 图片来源：扬州市汶河小学教师博客群

转场这个概念最先出现于影视界。在影像由动态照片的简单功能一直发展到现在可商业可艺术的多元电影行业的过程中，经历了数代影视人的探索与创新，才有了现在各式各样的转场形式的沉淀。

维基百科中对转场的定义——

影片转场是一种用于影片、视频剪辑后期制作的技术，用于连接场景或镜头。常见的转场方式是生切（normal cut）。大多数影片会选择性地使用其他方式的转场，以便更好地传达一种情绪、指明一个时间段，或者将一个故事段落化。转场方式包含溶解（dissolves）、L型剪辑（L cuts）、渐出（fades，常见方式是渐渐黑屏）、对称剪辑（match cuts）、消除（wipes）。

所有的这些转场方式都能在PPT中一一映射。

能和PPT一一映射的还有一种东西，那就是就是九十年代的MV……

仔细想想，浮夸的消除转场似乎大多数是在presentation的场合见到，不过最近除了电子幻灯片这样的载体，又增加了一种常见载体——触屏页。没错，触屏页也是一种presentation的途径。

在触屏页飞速发展的这几年，业界的能人挖掘出不少宝藏，转场效果也是乱花渐欲迷人眼，包括但不止于生切，滑动，覆盖，元素过渡。其中的覆盖转场，就是上面所说的消除转场的一种。

在遍历了维基中罗列的转场类型之后，初步认定阿婆主脑内的转场属于消除转场。

消除转场（Wipe）是什么样的

再次请出我们的维基君——

一个镜头从画面的一头消除到画面的另一头，或者以一个特殊的形状消除，显示下一个镜头的方式叫做消除转场。如果消除的方式是从画面的两侧往中心轴或从中心往两侧消除，这种消除称为仓门消除（a barn door wipe），因为效果类似打开或者关闭仓门。

• 谷仓

看看维基君给出的浮夸例子

眼见着胜利就在前方，这就是我要的转场方式，只是形状换成了圆形。

继续往下阅读，哎我去，众里寻他千百度啊——

虹膜消除（Iris slow）转场

出来吧，维基神兽——

虹膜转场是消除转场的一种，画面中一个逐渐变大或变小的圆圈负责画面间的切换。常见于动画短片，比如兔八哥（头一回知道原来八哥叫Looney Tunes）啊、（阿婆主没听说过的）Merrie Melodies等动画系列啊，用于表示故事结束。在这种情景下，虹膜消除可以用于聚焦在某个特定的点，还可以作为一个道具让人物来个结束语，或者作为第四面墙任由人物钻进钻出，以及其他。

• Merrie Melodies（恍然大悟）出品的动画短片：I Love to Singa小猫头鹰与第四面墙的互动

消除转场借鉴了舞台表演中幕布的转场形式，并利用电脑剪辑比较自由的优势在幕布上增加了一些形状。在视频这个特殊的媒介中，屏幕被看作银幕世界中的第四面墙。

有些影视作品中的角色会与观众对话，称为打破第四面墙，这种做法出现在了美剧《纸牌屋》中，鼻祖是莎翁的哈姆莱特。

• 《纸牌屋》

• 虹膜位于瞳孔后部，瞳孔的放大缩小就类似虹膜消除转场中的圆圈缩放。

虹膜消除转场的应用场景

触屏页作为一种类幻灯片的展示手段，市面上的作品中也几乎涵盖了上面提到的转场方式，除了那些较为高级的需要与音频配合紧密的转场方式。但虹膜转场却很少见，嗯，阿婆主此生未见。

虽说这种简陋的转场在现代影视作品中已经销声匿迹，但并不妨碍它在触屏页中的应用。使用这种转场，说好听了叫复古，说不好听了叫偷懒。因为一旦使用了这中一黑到底的转场，你完全不用考虑前后两屏之间有何视觉联系，这个元素怎么消失那个元素怎么出现，简直是懒癌患者的福音。

根据虹膜转场的历史特点与视觉特点，虹膜转场的应用场景如下：

• 复古风
• 中心点明确
• 其他转场性能过差

实现思路

都说授人以鱼不如授人以渔，接下来咱们就先来探讨一下实现虹膜消除转场的思路（明明是代码写得烂不敢放出来）。
在各大制图工具中，如果你是高级玩家，你一定对这个图标不陌生。

这个图标在大部分的制图软件中都是一个功能，减去上层形状。

这个功能是实现虹膜消除转场乃至所有消除转场的基本思路。顺着这条路，可以设想出无数种实现技术：

• png+CSS3（通过放大缩小带有透明圆圈的png图实现，缺点：剩余区域补全较费事）
• SVG/clip-path（通过改变矢量图路径，绘制出变化中的黑幕加圆圈，缺点：算法较复杂，不够直观）
• border＋border-radius＋CSS3（通过改变元素宽度与边框宽度实现，缺点：造成页面重绘，影响性能）
• Canvas（globalCompositeOperation属性完美同步制图软件中的减去上层形状功能，甚至还有各种奇形怪状的其它功能，具体参见Compositing and clipping）

显然，Canvas的globalCompositeOperation属性最接近我们的需求。

globalCompositeOperation

这个属性拥有11个值，为矢量图绘制打开了无数扇大门。

有了这样一个方法，搞出虹膜消除转场简直是分分钟的事。

首先我们来撸一撸我们需要哪些值来进行一个虹膜消除转场的绘制。

• 来自阿婆主的珍（chou）贵（lou）手稿

首先是画布尺寸。这就不用多说了，没有画布再大的虹膜也什么都不是。

接着确定虹膜的圆心位置。这直接决定着转场中圆圈的最大半径值。聪明的你一定知道这个值怎么算（勾股定理）。

• 他们说放个公式会高大上一点。

然后就是虹膜的收缩速度。

有了这几个值，就可以叫来RAF一起搞一搞了。

整体代码思路就是：

• 如果是缩小圆圈，则半径缩小至0结束。
• 如果是放大圆圈，则半径增加至最大半径结束。
• 变化速度通过每帧半径变化的差值大小来控制。

由于触屏页的转场相比动画短片中出现的频率要高得多，且触屏页基本没有黑屏退场的场景需求，因此单纯的放大或者缩小圆圈显然不太现实。

我们可以在调用绘制画布的方法中加入一个标志符，用于判定是否还有下一个转场，如果有，则设为1，并在第4个参数传入下一个转场的圆心位置以及计算好的最大半径（避免每次迭代都计算一次）。

具体代码参见https://github.com/lyxuncle/iriswipe

好啦，健康又卫生的虹膜消除转场就完成啦，放到需求里就是这样哒～

• 线上地址：新通路事业部招聘

最后，按照惯例要装逼，放上考据过程中看到的一句话，干了这杯鸡汤：

Fades, wipes, cuts and dissolves are always great tools for telling stories on video, but true video artists use editing techniques that cannot be selected from a pull-down menu.
by Don Dollins in Computer Editing: Split Man

参考资料：

Transition，维基百科
Wipe (transition))，维基百科
COMPUTER EDITING: SPLIT MAN，Don Collins
J-Cuts & L-Cuts，Cameron Christopher
Compositing and clipping，MDN
CanvasRenderingContext2D.globalCompositeOperation，MDN