5分钟制作微信浮窗动效

　　微信公众号改版后，增加了把浏览的文章缩小为浮窗的功能，相应地也融入了非常有趣的浮窗动效。本文通过Principle这款软件，从0到1详细讲解了浮窗动效制作的全过程，你也可以选择直接观看视频演示。
　　效果如下：
　　本教程一共六个制作步骤：
　　第一步：Principle导入Sketch文件；
　　第二步：制作浮窗拖拽效果；
　　第三步：制作取消浮窗进出场动画；
　　第四步：制作页面遮罩转场动画；
　　第五步：制作取消浮窗交互；
　　第六步：导出Gif格式。
　　第一步：Principle导入Sketch文件
　　Sketch源文件已经提前分组并命名好了，包括Moments、Cancel、Article三个画板。（注：组名称后面带号，表示导入Principle后该组会合并为一个图层）
　　打开Principle软件，点击工具栏中的Import工具，会出现下拉框，选择x2倍率，再次点击下拉框中的Import按钮，即可一键导入当前Sketch中的所有画板，轻松快捷。
　　第二步：制作浮窗拖拽效果
　　在画板Moments中选中浮窗元素（Window），在属性面板中将其Horizontal（横向）和Vertical（纵向）都设置成Drag，表示横纵向都可进行拖拽交互。
　　1。拖拽开始
　　再次选中浮窗元素，点击右侧的闪电图标，会弹出交互事件列表，我们选择DragBegin并按住鼠标左键不放，将蓝色的链接线指向Cancel画板后松开鼠标，这时拖拽开始的交互已经形成。
　　2。拖拽结束
　　同样的方法，我们在Cancel画板中也选中浮窗元素，点击闪电图标后选择DragEnd，并将链接线指向Moments画板，这样拖拽交互就形成了开始到结束的闭环，可以在右侧的预览窗口中进行拖拽预览。
　　3。拖拽细节
　　Y轴吸附效果
　　选中WindowDragEnds这条链接线后，会自动打开它的Animate面板。在面板中选择Window图层下的CenterY，点击它右侧的“雪花”图标，将其Y轴方向冻结（Frozen）。此时，在预览窗口中拖拽浮窗至任意位置，松开后，它都会自动吸附在Y轴方向。
　　X轴弹性动画
　　依然打开刚才的Animate面板，可以看到Window图层的CenterX属性旁有一段蓝色的关键帧，表示自动形成的补间动画。
　　在两个关键帧之间单击会弹出运动曲线，我们选择弹性曲线（Spring），然后设置张力（Tension）和摩擦力（Friction）的参数，可以根据想要的效果灵活的设置，这里我给出两个推荐参数，Tension：300、Friction：24。通过拖拽预览可以看到，此时的浮窗已经具有弹性效果。
　　第三步：制作取消浮窗进出场动画
　　到这一步就比较简单了，其实在之前的拖拽操作时，取消浮窗元素就已经带有出场动画，不过非常生硬不自然。我们要做的就是丰富它的动画过程，使其过渡更细腻流畅。
　　1。补间动画
　　在Cancel画板中复制取消浮窗元素，然后粘贴到Moments画板中，接着将其移动到右下方的画板之外（沿45度角路径）。在预览窗口中，通过拖拽浮窗可以看到，取消浮窗元素已经形成了流畅自然的进出场动画。
　　2。添加细节
　　如果想让动画过程更加丰富细腻，可以给取消浮窗元素添加不透明度和弹性效果。这一步可有可无，有兴趣的同学可以尝试一下，这里不再展开叙述。
　　第四步：制作页面遮罩转场动画
　　第四步比前几步会稍微复杂一点，不过我相信也难不倒大家。
　　1。添加点击事件
　　选中Moments画板中的浮窗元素，点击闪电图标后，选择Tap并按住鼠标左键不放，将蓝色的链接线指向Article画板后松开鼠标，这样就实现了点击跳转效果。不过这样的跳转非常生硬和突然，需要给它加上过渡效果。
　　2。遮罩动画
　　（1）遮罩进场
　　首先，选中Article画板中的Page2图层，将其移动到Window组里的Base图层内部，从而形成父子关系；然后将属性面板中的ClipSublayers选项勾选上，这也是遮罩动画的关键一步。
　　接下来，将带有遮罩的Base图层从Article画板复制粘贴到Moments画板，替换（删除）原来的Base图层。选中Base内的Page2图层，将其不透明度改为0。
　　最后，选中Article画板中的Base图层，在属性面板里将它的圆角（Radius）改为500后，按住altshift将Base原位等比例放大，直至可以完全显示其内部的Page2内容即可，并将ElemeLogo图层的不透明度改为0，这样就形成了遮罩动画，可在预览窗口中操作预览。
　　为了便于观察，我们点开Base图层的调色面板，将其不透明度改为0，这时Base的大圆就被隐藏起来了。（注意：这里一定要从调色面板里修改不透明度，否则图层将会失效）
　　遮罩出场
　　选中Moments画板，commandd原位复制，将Moments2画板至于最底部。为了避免交互错乱的情况出现，我们选中Moments2画板与其他画板的链接线（WindowTap和WindowDragBegins），依次右击选择DeleteEvent删除它们。
　　在Article画板中新建一个矩形（快捷键R），将它移动到导航栏中的“X”图标位置，点击矩形旁的闪电图标后，选择Tap并按住鼠标左键不放，将蓝色的链接线指向Moments2画板后松开鼠标，这样就实现了关闭返回的交互。
　　为了不影响视觉效果，我们同样点开矩形图层的调色面板，将其不透明度改为0，可在预览窗口中操作预览。
　　第五步：制作取消浮窗交互
　　如果大家前几步都做得没问题，这步就会非常容易。
　　1。触摸按下
　　选中Cancel画板，commandd原位复制，将Cancel2画板至于最底部。选中Cancel2与其他画板的链接线（WindowDragEnds），右击选择DeleteEvent删除它。
　　在Moments2画板中选中浮窗元素（Window），点击浮窗旁的闪电图标后，选择TouchDown并按住鼠标左键不放，将蓝色的链接线指向Cancel2画板后松开鼠标，这样就实现了触摸按下的效果。
　　2。触摸抬起
　　选中Moments2画板，commandd原位复制，将Moments3画板至于最底部。选中Moments3与其他画板的链接线（WindowTouchDown），右击选择DeleteEvent删除它。
　　在Cancel2画板中选中浮窗元素（Window），点击浮窗旁的闪电图标后，选择TouchUp并按住鼠标左键不放，将蓝色的链接线指向Moments3画板后松开鼠标。
　　将Moments3画板中的浮窗元素（Window）移动到画板右下角的位置（也就是取消浮窗的位置），然后把它的不透明度改为0。这样就实现了触摸抬起的效果，可在预览窗口中操作预览。
　　细节调整
　　通过预览会发现，浮窗消失的瞬间显的有些卡顿，这是因为浮窗元素消失的速度比取消浮窗元素稍慢了一些。
　　解决的方法是：先选中WindowTouchUp这条链接线，在它的Animate面板中，找到Window图层的Opacity（不透明度）属性关键帧，将Opacity的结束关键帧左移到0。05的位置，表示加快浮窗的消失速度。
　　通过再次操作预览发现，浮窗消失的过程就比之前要流畅自然很多。如果想让取消浮窗动画更细腻，也可以再加入由10的缩放变化（Scale），因为篇幅有限，就不再展开叙述了。最后，整体预览下最终的效果，没有问题就可以准备导出了。
　　第六步：导出Gif格式
　　最后，为了分享和展示我们的作品，常常需要把制作好的动效导出为Gif，有两种导出方式可以选择：
　　1。使用Principle直接导出
　　Principle直接导出比较简单。首先点击预览窗口右上角的“录影机”图标，选择TouchCursor触摸光标，此时，“录影机”图标会不断闪烁，表示正在录制再次点击该图标会停止录制，同时会弹出保存面板，选择。gif，点击Save就可以导出Gif动图了。
　　这里默认导出的尺寸是100，你也可以选择DribbbleRetina800w，这样就能直接导出为Dribbble作品尺寸了。需要注意的是：使用Principle直接导出Gif文件一般会比较大，不利于传播和分享，建议使用下面第二种方式。
　　2。通过Photoshop间接导出
　　在Principle弹出保存面板时，先选择。mov，点击Save导出Mov视频格式；然后打开Photoshop，选择文件导入视频帧到图层，导入刚才的M最后commandoptionshifts存储为Web所用格式。
　　在存储面板中将图像大小缩放至50，选择GIF文件格式；如果文件较大，可以通过调节损耗和颜色选项来减小文件大小，一般小于3M最佳，但也要兼顾画面不要太失真；设置好后，点击存储按钮即可导出Gif。
　　补充一点：
　　很多同学想知道如何导出带手机模型的动效？
　　其实很简单，首先需要提前将手机模型和背景图制作好，以jpg或png的格式导入AE；接着将录制好的Mov格式动效导入AE，调整尺寸大小和角度以适配图片上的手机模型；最后从AE中合并导出Mov，再通过Photoshop间接导出Gif，具体步骤同上。
　　写在最后
　　微信浮窗动效的制作到这里就结束了，大家可以结合视频一起观看，更重要的是练习，只有自己动手去做才会感受深刻！
　　理解原理后，遇到类似的动效就可以举一反三了。