微信公众号改版后,增加了把浏览的文章缩小为浮窗的功能,相应地也融入了非常有趣的浮窗动效。

本文通过 Principle 这款软件,从 0 到 1 详细讲解了浮窗动效制作的全过程,你也可以选择直接观看视频演示。(文末提供了本教程所需的源文件,勿错过~)

 

 

本教程一共六个制作步骤:

  • 第一步:Principle 导入 Sketch 文件
  • 第二步:制作浮窗拖拽效果
  • 第三步:制作取消浮窗进/出场动画
  • 第四步:制作页面遮罩转场动画
  • 第五步:制作取消浮窗交互
  • 第六步:导出 Gif 格式

 

第一步:Principle 导入 Sketch 文件

Sketch 源文件已经提前分组并命名好了,包括 Moments、Cancel、Article 三个画板。(注:组名称后面带 * 号,表示导入 Principle 后该组会合并为一个图层)

打开 Principle 软件,点击工具栏中的「Import」工具,会出现下拉框,选择「x2」 倍率,再次点击下拉框中的 Import 按钮,即可一键导入当前 Sketch 中的所有画板,轻松快捷。

 

第二步:制作浮窗拖拽效果

在画板 Moments 中选中浮窗元素 (Window),在属性面板中将其 Horizontal (横向) 和 Vertical (纵向) 都设置成「Drag」,表示横/纵向都可进行拖拽交互。

 

1. 拖拽开始

再次选中浮窗元素,点击右侧的闪电图标,会弹出交互事件列表,我们选择「Drag Begin」 并按住鼠标左键不放,将蓝色的链接线指向 Cancel 画板后松开鼠标,这时拖拽开始的交互已经形成。

 

 

2. 拖拽结束

同样的方法,我们在 Cancel 画板中也选中浮窗元素,点击闪电图标后选择「Drag End」,并将链接线指向 Moments 画板,这样拖拽交互就形成了开始到结束的闭环,可以在右侧的预览窗口中进行拖拽预览。

 

 

3. 拖拽细节

Y 轴吸附效果

选中「Window Drag Ends」这条链接线后,会自动打开它的 Animate 面板。在面板中选择「Window」图层下的 Center Y,点击它右侧的 “雪花” 图标,将其 Y 轴方向冻结 (Frozen)。此时,在预览窗口中拖拽浮窗至任意位置,松开后,它都会自动吸附在 Y 轴方向。

 

 

X 轴弹性动画

依然打开刚才的 Animate 面板,可以看到「Window」图层的 Center X 属性旁有一段蓝色的关键帧,表示自动形成的补间动画。在两个关键帧之间单击会弹出运动曲线,我们选择弹性曲线 (Spring),然后设置 张力 (Tension) 和 摩擦力 (Friction) 的参数,可以根据想要的效果灵活的设置,这里我给出两个推荐参数,Tension:300、Friction:24。通过拖拽预览可以看到,此时的浮窗已经具有弹性效果。

 

 

第三步:制作取消浮窗进/出场动画

到这一步就比较简单了。其实在之前的拖拽操作时,取消浮窗元素就已经带有出场动画,不过非常生硬不自然。我们要做的就是丰富它的动画过程,使其过渡更细腻流畅。

 

1. 补间动画

在 Cancel 画板中复制「取消浮窗」元素,然后粘贴到 Moments 画板中,接着将其移动到右下方的画板之外 (沿 45 度角路径)。在预览窗口中,通过拖拽浮窗可以看到,取消浮窗元素已经形成了流畅自然的进/出场动画。

 

 

2. 添加细节

如果想让动画过程更加丰富细腻,可以给取消浮窗元素添加不透明度和弹性效果。这一步可有可无,有兴趣的同学可以尝试一下,这里不再展开叙述。

 

第四步:制作页面遮罩转场动画

第四步比前几步会稍微复杂一点,不过我相信也难不倒大家。

 

1. 添加点击事件

选中 Moments 画板中的浮窗元素,点击闪电图标后,选择「Tap」 并按住鼠标左键不放,将蓝色的链接线指向 Article 画板后松开鼠标,这样就实现了点击跳转效果。不过这样的跳转非常生硬和突然,需要给它加上过渡效果。

 

2. 遮罩动画

遮罩进场

首先,选中 Article 画板中的 Page2 图层,将其移动到 Window 组里的 Base 图层内部,从而形成父子关系;然后将属性面板中的「Clip Sublayers」选项勾选上,这也是遮罩动画的关键一步。接下来,将带有遮罩的 Base 图层从 Article 画板复制粘贴到 Moments 画板,替换 (删除) 原来的 Base 图层。选中 Base 内的 Page2 图层,将其 不透明度改为 0%最后,选中 Article 画板中的 Base 图层,在属性面板里将它的圆角 (Radius) 改为 500 后,按住 alt+shift 将 Base 原位等比例放大,直至可以完全显示其内部的 Page2 内容即可,并将 Eleme Logo 图层的 不透明度改为 0%,这样就形成了遮罩动画,可在预览窗口中操作预览。

 

为了便于观察,我们点开 Base 图层的调色面板,将其不透明度改为 0%,这时 Base 的大圆就被隐藏起来了。(注意:这里一定要从调色面板里修改不透明度,否则图层将会失效)

 

遮罩出场

选中 Moments 画板,command+d 原位复制,将 Moments2 画板至于最底部。为了避免交互错乱的情况出现,我们选中 Moments2 画板与其他画板的链接线 (Window Tap 和 Window Drag Begins),依次右击选择「Delete Event」删除它们。

在 Article 画板中新建一个矩形 (快捷键 R),将它移动到导航栏中的 “X” 图标位置,点击矩形旁的闪电图标后,选择「Tap」 并按住鼠标左键不放,将蓝色的链接线指向 Moments2 画板后松开鼠标,这样就实现了关闭/返回的交互。

 

为了不影响视觉效果,我们同样点开矩形图层的调色面板,将其不透明度改为 0%,可在预览窗口中操作预览。

 

第五步:制作取消浮窗交互

如果大家前几步都做得没问题,这步就会非常容易。

 

1. 触摸按下

选中 Cancel 画板,command+d 原位复制,将 Cancel2 画板至于最底部。选中 Cancel2 与其他画板的链接线 (Window Drag Ends),右击选择「Delete Event」删除它。在 Moments2 画板中选中浮窗元素 (Window),点击浮窗旁的闪电图标后,选择「Touch Down」 并按住鼠标左键不放,将蓝色的链接线指向 Cancel2 画板后松开鼠标,这样就实现了触摸按下的效果。

 

 

2. 触摸抬起

选中 Moments2 画板,command+d 原位复制,将 Moments3 画板至于最底部。选中 Moments3 与其他画板的链接线 (Window Touch Down),右击选择「Delete Event」删除它。

在 Cancel2 画板中选中浮窗元素 (Window),点击浮窗旁的闪电图标后,选择「Touch Up」 并按住鼠标左键不放,将蓝色的链接线指向 Moments3 画板后松开鼠标。将 Moments3 画板中的浮窗元素 (Window) 移动到画板右下角的位置 (也就是取消浮窗的位置) ,然后把它的不透明度改为 0%。这样就实现了触摸抬起的效果,可在预览窗口中操作预览。

 

 

细节调整

通过预览会发现,浮窗消失的瞬间显的有些卡顿,这是因为「浮窗元素」消失的速度比「取消浮窗元素」稍慢了一些。解决的方法是:先选中「Window Touch Up」这条链接线,在它的 Animate 面板中,找到 Window 图层的 Opacity (不透明度) 属性关键帧,将 Opacity 的「结束关键帧」左移到 0.05 的位置,表示加快浮窗的消失速度。

 

 

通过再次操作预览发现,浮窗消失的过程就比之前要流畅自然很多。如果想让取消浮窗动画更细腻,也可以再加入由 1-0 的缩放变化 (Scale),因为篇幅有限,就不再展开叙述了。最后,整体预览下最终的效果,没有问题就可以准备导出了。

 

第六步:导出 Gif 格式

最后,为了分享和展示我们的作品,常常需要把制作好的动效导出为 Gif,有两种导出方式可以选择:

 

1. 使用 Principle 直接导出

Principle 直接导出比较简单。首先点击预览窗口右上角的 “录影机” 图标,选择「Touch Cursor」触摸光标,此时,“录影机” 图标会不断闪烁,表示正在录制… 再次点击该图标会停止录制,同时会弹出保存面板,选择「.gif」,点击「Save」就可以导出 Gif 动图了。

 

 

这里默认导出的尺寸是 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,具体步骤同上。

 

获取教程源文件

微信浮窗动效的制作到这里就结束了,大家可以结合视频一起观看,更重要的是练习,只有自己动手去做才会感受深刻!理解原理后,遇到类似的动效就可以举一反三了。最后,教程中所用到的 Sketch 和 Principle 源文件已经给大家整理好了,在我的公众号会话页中回复关键词 浮窗动效,即可获取。


本文到此就要告一段落了,如果对你有一点帮助就请点个赞吧~ 你也可以关注我的公众号「彭彭设计笔记」,我会不定期更新 UI/UX 设计类精品文章,感谢你的阅读。

 

原文地址:彭彭设计笔记(公众号)

作者:彭彭

转载请注明:学UI网 » 动效教程 | 5 分钟制作微信浮窗动效

登录收藏
 
你可能喜欢的:
神奇移动 | 三分钟如何做一个交互动效神奇移动 | 三分钟如何做一个交互动效
如何通过缓动曲线形成自身动效风格?如何通过缓动曲线形成自身动效风格?
如何用Principle制作:APP卡片翻页动效如何用Principle制作:APP卡片翻页动效
Principle如何实现抛物线运动?Principle如何实现抛物线运动?
Principle教程进阶精讲- Drivers 的使用Principle教程进阶精讲- Drivers 的使用
Principle精讲——Scroll、Drag、Page区分Principle精讲——Scroll、Drag、Page区分
手把手教你安装Principle手把手教你安装Principle
4步制作酷炫loading效果[Principle]4步制作酷炫loading效果[Principle]
Principle软件介绍及教程合集!Principle软件介绍及教程合集!
五天Principle从入门到精通05-复现淘票票高保真原型五天Principle从入门到精通05-复现淘票票高保真原型