2019-09-13 UI设计培训

UI设计培训 | Principle入门:Animate与Drivers的认识

Principle是一款高效的交互Demo制作工具,UI设计培训像素妹经常用它来制作一些Demo动效,跟Sketch是绝配。Principle的上手成本很低,效率极高,深受设计师们的喜爱。


什么是Animate?

Animate指的是不同画板之间元素的交互,也就是画板与画板之间的交互。当触发交互事件时,Principle会自动创建两个画板之间的补间动画,以细腻的方式实现属性间的变化,这一点与Keynote的神奇移动有些类似。


下图两个画板之间的图层是一样的,只是属性发生了变化,对蓝色按钮添加了交互事件,点击时跳转到第二个画板。 

UI设计培训

UI设计培训


需要注意的是:Principle中想要形成逐帧补间动画,图层部件在不同画板中的命名要一致


当点击交互事件箭头的时候,当前选中的交互事件箭头变成绿色,会在底部调出Animate面板。默认的动画持续时间是0.3秒,我们可以在时间轴中调整动效的持续时间以及动画曲线(点击下拉三角箭头调出)。

UI设计培训


什么是Drivers?

Drivers联动和Animate不同的地方在于:Animate动画发生在画板页面间切换时,Drivers联动发生在同一个画板页面中,也就是同一画板内元素的交互。


如果Drivers联动面板是空白的,原因是联动面板的激活需要存在联动源,也就是画板内图层有水平或者垂直方向的连续交互——Drag拖拽、Scroll滚动、Page翻页。

UI设计培训

 

当图层(组)是Drag、Scroll、Page时,此图层(组)的位移可以驱动画板内图层的属性改变,可以改变自身的属性,也可以改变其它图层的属性。Drivers和Animate面板的区别在于:Animate是基于时间,Drivers水平是基于属性参数的变化。

UI设计培训


我们来做一个小Demo

首先需要构建一个场景:底部的白色滑块,在水平往右拖拽的时候自身颜色变为黄色,同时上方红色矩形变宽,蓝色矩形变扁。


第一步:选中白色滑块图层“滑块”,添加一个水平的Drag,这时联动源有了,打开Drivers联动面板。 

UI设计培训


第二步:选中“滑块”图层,在Drivers面板中点击相应图层右侧的“+”,由于我们希望滑块在拖拽时自身发生颜色属性改变,所以选择Fill填充。 

UI设计培训


第三步:将Drivers面板轴往右拖到330的位置,在左上角检查器中将白色滑块的Fill改为黄色,发生了属性变化会自动生成一个关键帧。 

UI设计培训


第四步:把Drivers面板轴拖回初始位置,选中红色矩形图层,在Drivers面板点击图层右侧“+”,选择控制宽度的Width。同样把面板轴拖到330的位置,调整红色矩形的宽度。 

UI设计培训


第五步:按相同步骤,选中蓝色矩形图层,Drivers面板中选择控制高度的Height,面板轴拖到330的位置,调整蓝色矩形的高度。 

UI设计培训


我们将Drivers面板轴拖回到初始位置,看一下动画效果:

UI设计培训


我们发现在Drivers联动中,画板内存在连续交互的图层时,此图层(组)的位移可以改变自身属性,也可以改变其它图层的属性,这就是联动。



在Principle中通过Animate和Drivers的搭配使用,可以快速实现很多动效,希望这篇文章对初学者们有一定的帮助。


林老师:0371-5556 6060