Principle教程 | 5 分钟制作微信浮窗动效(1)

来源:网络   作者:热心网友   发布时间:2018-09-11    浏览次数:30
收藏到:

本文通过 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. 添加细节

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


123共3页
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.17xsj.com/shejijiaocheng/shejililun/7595.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!