大家好，我是灰色执照~

今天我来教大家一个我工作中经常用到的图片切换过渡动效。制作这样一个效果只需要2分钟，但是它带来的价值却非常高。我们先来看下我制作好的最终效果：

 ▲ 这是一个图片查看的小控件，点击可以切换摄像头抓拍到的是人脸或者是车辆。人脸图片源自百度搜索，如果不小心侵犯了你的权益，可以找我删除

▲ 这是一个定时刷新的效果，例如每5分钟就要刷新一次图片。如果是干巴巴的直接替换图片，看起来会特别的生硬。有了这样一种快门过渡效果。整个设计马上提升一个档次。

▲ 比如火车站每2分钟抓拍一次人脸。使用类似的过渡效果还是很不错的。以上人脸全部由 AI 生成，虚拟人脸不会涉及侵犯肖像权。

今天的教程主要分2部分：

1、制作快门动画，并且输出前端需要的PNG序列帧。
2、生成前端需要用到的代码。
使用软件：AE
难度系数：☆☆
制作时间：2分钟

如果你有条件可以看视频教程，请复制下面蓝色带下划线文字去浏览器中打开，B站已经上传完整的视频教程。
https://www.bilibili.com/video/BV1hr4y1u74C
好了，我们直接进入正题，开始我们的教学（倒计时2分钟开始）

教程第一部分

制作快门动画，并且输出前端需要的PNG序列帧

步骤1，打开AE后新建一个合成，新建的尺寸为1920*1080，持续时间为：2秒（也就是50帧）

步骤2，使用多边形工具，按住 Shift，在界面上拖拽一个多边形（默认是 5 边形）

步骤3，将图形修改成你需要的颜色。并且在「多边形」>「多边形路径1」>「顶点数」改成 3。这样你就得到了一个三角形。

步骤4，利用「顶点对齐工具」，将顶点对齐到三角形的顶端。

步骤5，点击三角形，添加一个「中转」。需要注意的是：不同版本的 AE 此处的翻译并不同。有的叫做「中继器」，有的叫做「重复」。如果是英文版本，此处应该是「repeat」 

步骤6，将副本数量改成 6，定位点和位置都改成 0,0，旋转改成 60 度。

步骤7，在定位点 0,0 的位置 k 一个关键帧。

步骤8，拖拽定位点的 X，发现拖动到 988 的时候，三角形形成了最大开口。在第 25 帧的时候再 K 一个关键帧。

 ▲ 988 是要根据你自己的实际情况来，你的实际数值很可能和我不一样，因为我们三角形的大小其实是不一样的。

步骤9，在第 20 帧的时候，把定位点设置回 0,0。然后再 K 一个关键帧。这样就得到了快门的展开和关闭的循环效果了。 

 ▲不过现在效果还不是很理想，快门没有在图形的正中心。

步骤10 打开变换，在「变换」下面对定位点K一个关键帧。

步骤11，在 10 帧的时候，把位置 x 改成当前位置加上 988px 即可。这样又 K 了一个关键帧。

 ▲比如一开始定位点的值是 2，那么你可以输入2+988

步骤12，在第 20 帧，把位置改回起始的 x 值。这样一个快门的循环效果就做好了。

效果如下：

▲其实就是一堆三角形发生了位移变换而已。

如果你只是做 AE 里面的展示效果，那么你自己加一个遮罩，整个动效基本就做完了，不过我们需要做的交付给前端小哥的效果。其实也非常简单，只要导出透明背景的序列帧就可以了。 

▲我们先把制作好的文件添加到渲染队列。

格式选择 PNG 序列，通道选 RGB + Alpha。

点击渲染按钮，你就得到了 60 张 PNG 图片了

虽然我们渲染了 2 分钟一共 60 张图片，制作了一个从关闭 > 打开 > 关闭 的过程。但其实我们交付给程序员的时候，只需要关闭 > 打开的一个过程。也就是说：我们只需要第 8 帧到第 25 帧，那我们就把 0-7 和 26-49 帧都删掉。

▲最后，我们只留下了 18 张图片。

教程第二部分

生成前端需要用到的代码

在 PS 中新建一个 1920*1080 的空白文档。

打开PS动效代码助手这款插件，插件下载地址：

https://pslkzs.com/animate/index.php

左下角就可以下载了，它有 Windows 和 Mac OS 版本的，不要下载错了。

需要说明的是：这个插件是付费产品，不想付费的同学，这个部分的代码就需要你们程序员小哥全部自己手写了。

▲点击插件第一个按钮，导入刚才AE渲染的所有图片。

在画面的中心弄一个选区，比如我的动画需要 800*600，那么我的选区大小就弄800*600

裁剪这个选区，周边多余的东西都不需要了，然后你再点击插件第二个按钮：排序，图层会根据名称自动排列好动画的顺序。

点击插件最后一个生成动画的按钮。

桌面上就多了一个文件夹，里面就是你要交付的代码和 PNG 图片了。分别是一个 html 文件和一个 png 图片。

打开 html 文件，你就可以看到生成好的动画了。你可以点击是否倒放来控制快门是打开还是关闭。

在右侧边栏有复制代码按钮了，镜头打开和镜头关闭的时候分别复制一次代码。这就是你要交付的所有东西了。

程序员有了这 2 个最关键的 CSS 代码，写个点击事件结合一下就可以做到本文开头的那种交互效果了，因为今天的教程比较简单，就不提供完整的代码了。

制作教程不容易，如果你觉得对你有帮助，不要吝啬你的「赞」~

Powered by Froala Editor