5分钟制作微信浮窗动效

微信公众号改版后，增加了把浏览的文章缩小为浮窗的功能，相应地也融入了非常有趣的浮窗动效设置浮窗。本文通过 Principle 这款软件，从 0 到 1 详细讲解了浮窗动效制作的全过程，你也可以选择直接观看 视频演示。

这里默认导出的尺寸是 100%，你也可以选择「Dribbble Retina 800w」，这样就能直接导出为 Dribbble 作品尺寸了设置浮窗。需要注意的是：使用 Principle 直接导出 Gif 文件一般会比较大，不利于传播和分享，建议使用下面第二种方式。

2. 通过 Photoshop 间接导出

在 Principle 弹出保存面板时，先选择「.mov」，点击「Save」导出 Mov 视频格式；然后打开 Photoshop，选择「文件-导入-视频帧到图层」，导入刚才的 Mov；最后 command+option+shift+s 存储为 Web 所用格式设置浮窗。

在存储面板中将「图像大小」缩放至 50%，选择 GIF 文件格式；如果文件较大，可以通过调节「损耗」和「颜色」选项来减小文件大小，一般小于 3M 最佳，但也要兼顾画面不要太失真；设置好后，点击「存储」按钮即可导出 Gif设置浮窗。

补充一点：

很多同学想知道如何导出带手机模型的动效设置浮窗？

其实很简单，首先需要提前将手机模型和背景图制作好，以 jpg 或 png 的格式导入 AE；接着将录制好的 Mov 格式动效导入 AE，调整尺寸大小和角度以适配图片上的手机模型；最后从 AE 中合并导出 Mov，再通过 Photoshop 间接导出 Gif，具体步骤同上设置浮窗。

写在最后

微信浮窗动效的制作到这里就结束了设置浮窗，大家可以结合视频一起观看，更重要的是练习，只有自己动手去做才会感受深刻！

理解原理后，遇到类似的动效就可以举一反三了设置浮窗。

本文由 @Neil彭彭 原创发布于人人都是产品经理设置浮窗。未经许可，禁止转载

题图作者提供