西湖鱼

首先上个我做的demo,看看这个功能有多强大。这本文中也会教大家如何去制作一个简单的demo,通过demo可以很快的了解到本文所要学习的内容。此demo源文件在文章末尾。第一步:我们新建一个矩形,设置成水平Drag属性,同时打开顶部的Drivers;

principle_07

 

此demo源文件在文章末尾

 

Drivers含义:

 

principle_02

看我做份封面图,做过动画的都知道,这是几个“关键帧”的图像,也是Principle的Drivers图标,作者的意图是这个功能是一个设置关键帧的功能。

我这里理解成“驱动器”,当一个物件(组)是Drag、Scroll、Page时,此物件(组)的位移可以驱动物件的属性改变,可以改变自身属性,也可以改变其他物件属性。属性改变的程度和范围,就是由“关键帧”决定的。

 

我们来做一个简单的demo来看一下

第一步:我们新建一个矩形,设置成水平Drag属性,同时打开顶部的Drivers;

如图:

principle_01

画板大小:400*300

 

第二步:选中我们建立的矩形 ,点击Drivers窗口中那个蓝色“ ”号,弹窗中选“Height”:

principle_03

(选择“Height”的意思是:图中矩形“Layer”水平位置可以决定“Layer”(他自己)的“Height”属性的值)

 

第三步:将坐标轴从200的位置拖到0的位置,并点击“增加关键帧”的那个“ ”号;

principle_04

(拖动坐标轴时,矩形会随之移动的)

 

第四步:将矩形“Layer”的高度“Height”值设置为200,并垂直居中;

principle_05

 

动画效果如下:

principle_06

 

这样我们就做到了前面所说的定义:“当一个物件(组)是Drag、Scroll、Page时,此物件(组)的位移可以驱动物件的属性改变,可以改变自身属性,也可以改变其他物件属性。”

那么如何做到A物件的位置改变驱动B物件的属性改变呢?大家自己动手试试吧,原理是一样的,紫豆子这里附上了本次教程的所有源文件,大家公众号内回复:源文件0201 即可获得云盘链接。

本次课程结束,对于Principle的教学也告一段落了,此系列教程已经涵盖了所有Principle中的功能与动画制作理论,谢谢大家对本教程的关注。

 

相关课程:

手把手教你安装Principle

Principle软件介绍及教程合集!

五天Principle从入门到精通01-简单的Toast动画制作

五天Principle从入门到精通02-Sketch的导入

五天Principle从入门到精通03-动画的基本逻辑

五天Principle从入门到精通04-模仿饿了么下拉加载动画

五天Principle从入门到精通05-复现淘票票高保真原型

Principle精讲——Scroll、Drag、Page区分

 

原文地址:紫豆子设计站(公众号)

作者:紫豆子

2018010415150492921111

转载请注明:学UI网 » Principle教程进阶精讲- Drivers 的使用

登录收藏
 
你可能喜欢的:
教你用 Principle 做卡片翻转动效教你用 Principle 做卡片翻转动效
神奇移动 | 三分钟如何做一个交互动效神奇移动 | 三分钟如何做一个交互动效
如何通过缓动曲线形成自身动效风格?如何通过缓动曲线形成自身动效风格?
动效教程 | 5 分钟制作微信浮窗动效动效教程 | 5 分钟制作微信浮窗动效
如何用Principle制作:APP卡片翻页动效如何用Principle制作:APP卡片翻页动效
Principle如何实现抛物线运动?Principle如何实现抛物线运动?
Principle精讲——Scroll、Drag、Page区分Principle精讲——Scroll、Drag、Page区分
手把手教你安装Principle手把手教你安装Principle
4步制作酷炫loading效果[Principle]4步制作酷炫loading效果[Principle]
Principle软件介绍及教程合集!Principle软件介绍及教程合集!