陌北默

小编:五天Principle从入门到精通,一起来学习吧~

今天我们练习做一个非?;镜亩?,熟悉Principle最基本的操作和界面布局。那么课程开始啦。

在这里,我们选择做一个toast动画。设计师们有了自己设计的toast体系,就可以告别系统原生的toast。同时,我们也可以拿着实际效果,在开发小哥面前演示toast动效,再也不用比划半天也说不清楚。

 

toast动画

软件打开后,有一个300*300的Artboard在界面中,使用过Illustrator和Sketch的人应该理解。这是一个画板的概念,我们设计的各种元素都应该在这个画板上。工具栏也没几个按键,刚一开始的话,不容易被理解。即使对于有AE基础的人来说,开始也要先了解Principle的动画制作逻辑的。我们一步一步地讲并配以截图,第一节讲得详细一点,力求打好基础~

principle-toast-animation-production01

初次打开Principle

 

第一步

选中某元素,在界面的左侧是该元素的属性栏。首先把Artboard的大小设成常规的手机屏幕大小“750*1334”。接着,我们点击左上角的“Rectangle”,页面中会新建一个方块,我们再点一下“Text”,然后屏幕中又出现一个方块和两个单词。

principle-toast-animation-production02

 

第二步

在左侧属性栏可以修改方块大?。ǖ比灰部梢岳娇楸咴蹈谋浞娇榇笮。?。鼠标选中文字,左侧边栏可以修改文字的属性,双击文字可以修改文字内容。如下图:

principle-toast-animation-production03

 

属性栏

principle-toast-animation-production04

 

第三步

现在来到了我们关键的一步:怎么出现动画效果。

选中Artboard1,它周围出现绿色的框,右侧出现一个??闪电图标,这个就是动作触发的条件编辑入口。

principle-toast-animation-production05

我们点击这个闪电,出现一个菜单,这些就是动作触发的条件们。

principle-toast-animation-production06

后面会对这个动作触发条件做详细的讲解。

重点来了!我们选中“Tap”并拖动,发现一个蓝色的箭头,将箭头指向Artboard1并松开鼠标。然后如图,工作区又新增了一个画板,自动命名为Artboard2:?

principle-toast-animation-production07

然后,我们将Artboard2上的toast(方块和文字)向下拖动一段距离,使其和Artboard1上的toast有位置变化,如图?:

principle-toast-animation-production08

这个时候,我们的设计就会动了!

查看动画方法:鼠标选回第一个画板,右侧的动效预览窗口会回到初始状态,在预览窗口中,鼠标点击一下(即我们刚刚选择的Tap触发条件),就看到toast动起来了。动效如下:

principle-toast-animation-production09

我们也可以数据线接到手机上,打开装的Principle mirror查看动效。

通过上面这个toast的动效例子,我们可以理解Principle的动画原理。如图:

principle-toast-animation-production10

其中1,2,3步我们已经做到了,第4步并不是必须的。下一节我们会针对动画的形成逻辑有更深入的讲解。

 

总结:

第一天,我们学习了:

· 新建文字,文字的修改

· 新建矩形,矩形的修改

· 动画的触发

· 矩形和文字的【移动】动画

· 动画的预览

 

预告:

第二天,我们将会学习

· Sketch文件的导入

· 补间动画逻辑

· 透明度动画

·?缩放动画

· 时间轴的控制

· 动画的其他触发条件

 

作者:?紫豆子的开发(微信公众号:紫豆子设计站)

zidouzi-erweima

转载请注明:学UI网—UI设计师学习教程平台 » 五天Principle从入门到精通01-简单的Toast动画制作

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
Principle案例教学小堂05-界面拖拽删除Principle案例教学小堂05-界面拖拽删除
Principle案例教学小堂04-功能开关变换Principle案例教学小堂04-功能开关变换
Principle案例教学小堂03-卡片滑动Principle案例教学小堂03-卡片滑动
Principle案例教学小堂02-内容滚动及加载更多的跳转Principle案例教学小堂02-内容滚动及加载更多的跳转
Principle案例教学小堂01-列表展开效果Principle案例教学小堂01-列表展开效果
Principle软件介绍及教程合集!Principle软件介绍及教程合集!
五天Principle从入门到精通05-复现淘票票高保真原型五天Principle从入门到精通05-复现淘票票高保真原型
五天Principle从入门到精通04-模仿饿了么下拉加载动画五天Principle从入门到精通04-模仿饿了么下拉加载动画
五天Principle从入门到精通03-动画的基本逻辑五天Principle从入门到精通03-动画的基本逻辑
五天Principle从入门到精通02-Sketch的导入五天Principle从入门到精通02-Sketch的导入
?