先看一下我们样机最终实现效果（素材来源：蚂蚁短租app临摹练习）

那么怎么样得到我们想要的效果呢？首先我们把用sketch做好的素材导入到principle中，添加动画，因为这里是做一个导出的教程，至于principle动效设计网上有许多教程，感兴趣的小伙伴可以去搜索学习。回归正题，将录制好的动效选择导出会出现以下界面：

这里的选择是比较关键的一步，它决定了你导出的视频质量和大小，我也对每一个格式导出的效果做了尝试。

第一种是我们导出比较常见的GIF格式，这种格式的优势就是导出的大小不是特别大，可通过动图的形式预览，但是GIF格式无法导入到ps时间轴中添加样机展示，对于想要添加样机展示的小伙伴来说，行之有效的方法可能是通过在principle文件中添加样机直接导出得到想要的效果。

第二种就是视频格式.mov格式的视频，他是通过ProRes导出的，选择的是320w,这里我们明显的看到视频的大小偏大了，我也在网上有搜索到通过quicktime压缩其大小，但是实际效果是，它并没有想象的那么清晰，虽然它很大，那我们也不考虑这种方式。

最后一种方法呢也是我经过尝试之后觉得很好的方法，也是推荐给大家的方法。输出格式为视频，尺寸为1080h，那么得到的是一个mp4格式的视频，从上面我们可以看到视频大小几乎和gif图大小一样，而且最关键的是视频还比较清晰哦～

输出得到这样一个视频之后，接下来我们要做的就是将视频用样机展示出来。这里需要准备好样机素材，或者自己画一个样机。显示时间轴面板（在窗口里找到），创建时间轴，然后将我们得到的视频素材直接拖入样机中，拖进去的视频会以智能对象的形式存在。这里需要注意将样机的时间轴和视频素材的时间轴大小调的一致哦，不然有可能你的视频放到一半你的样机突然消失不见，大写的尴尬～

全部调节完毕之后，我们就要导出了，快捷键是option+com+shift+s（存储为web所用格式旧版），也可以直接从文件里面选导出，这里需要注意的一个是格式的选择，我们选择GIF格式，然后下面循环选项一定要选择永远，同时我们也可以通过左下角查看这个文件的大小，如果觉得过大的画可以将颜色数量调下，当然调节这个参数也会影响到图片的质量哦～所以看个人情况吧！。

存储之后我们就得到一个完整的动图展示效果了，那如果觉得图片还是过大，这里推荐一个压缩动图的一个网站，能在保证质量的前提下尽可能的压缩你的文件大小。网站地址为：https://www.iloveimg.com/

最终的大小为3.6M，已经符合上传网站的邀请，所以你get到了吗？get到了话赶紧去尝试一下吧！

不足之处欢迎留言指正，谢谢观看！

Powered by Froala Editor