陌北默

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

来到第二天课程的都是好同志~相信大家通过《五天Principle从入门到精通01-简单的Toast动画制作》已经初步了解了Priciple的基本操作。

另外文末有小福利哦~

 

1. Sketch文件的导入

首先,先把要把画好的Sketch文件打开;

再打开Principle,点File – Import From Sketch??,这里会直接显示你刚打开的Sketch文件名。

根据你的Sketch文件的大小选择?放大的倍数(例如:如果你画的是375*667的就选择2X,750的就选择1X)不选也可以,但是可能导出的画质不清晰。

这样就导入成功了,会了这个功能就可以将之前设计的sketch文件做动画了,Sketch强大的绘图功能 Principle的动画制作,完美!

 

2. 补间动画逻辑

谈到补间动画我们要先说逐帧动画,逐帧动画是最原始的动画,就是很多连续的图片排成序列,一张一张的播放,形成的动画效果。

补间动画是逐帧动画的升级版,不需要我们准备大量的图片形成的图片序列,只要做一些关键画面(一般被叫做关键?。┘纯?,系统识别关键帧之间的差异,帮助我们补齐关键帧之间的画面,形成动画。

Principle的动画制作逻辑是:每个画板就是关键帧

举例:

Import Sketch01

左图画板1即关键帧1,右图画板2即关键帧2,关键帧1中的方块在左边,关键帧2的方块在右边,我们添加补间动画的话,按照补间动画的逻辑,系统应该补足方块从左到右移动的所有的画面。

添加补间的方法:点击画板1旁边的闪电按钮,选择触发条件Tap拖到画板2上,补间动画就做好了。如下:

最简单的补间动画就完成了。

所以我们暂且把Principle画板理解成关键帧。

 

透明度动画

我们接着上次的Toast动画做,我们把文字和底色框选,按command G成组,调节这个组的Opacity(透明度)属性到“0%”,如图:

Import Sketch03

ok啦!我们原本的移动吐司效果增加了透明度动画效果,动画如下:

是不是很像现在主流toast的感觉了?~

 

【案例】淘宝Toast

下面我们来模仿淘宝的成功加入购物车的Toast做一个动画,来强化一下我们学的知识。

淘宝原本效果如下:

Import Sketch05

首先分析一下动画中构成的元素,界面中一共有4层,从上至下依次

  • Toast
  • 购物车选择栏
  • 黑色半透明遮罩
  • 内容层

Import Sketch06

以上的东西我们应该在Sketch中预先画好的(文末会附上源文件链接)。

 

动画分解

1.初始状态,内容层在最下面一直不动,上面盖着黑色的遮罩,再上面是购物车选择栏;

2.动画开始,购物车选择栏下移至底部消失,黑色半透明遮罩层透明度变成0,Toast出现;

3.接着,Toast停留1秒钟后缩??;

4.最后Toast透明度将为0 。

 

下面我们来实现这个动画

首先把Sketch文件导入Principle。

然后把内容层,遮罩,选择栏,依次叠放如图:

Import Sketch07

 

第二步

Import Sketch08

接下来我们来完成上文提到的:

“购物车选择栏下移至底部消失”

垂直移动画板2的最顶层“选择栏”至画板2外,如图:

Import Sketch09

然后将黑色遮罩的透明度降低到0,如图:

Import Sketch10

做到这一步我们就可以看到一半的动画已经完成了。

Import Sketch11

但是这里的速度比较快,我们来学习下一个知识点,时间轴的调节。

时间轴在哪里呢?我们选中红框示意的那条线,屏幕下方就会出现一个时间轴。

Import Sketch12

我们拖动时间轴上的两个蓝色的柱子,可以调节动作什么时候开始,什么时候结束。蓝色柱子前的菱形就是动画启动的时间,尾部的菱形就是结束的时间,两个菱形可以单独调节。

然后按照我动画分解中题要的步骤一步一步做,加工一下Toast层,缩放的动作修改的是它的scale属性。

这是最后的版面。

Import Sketch13

动画效果如下

Import Sketch05

源文件地址:http://www.ccopus.com/s/1pLSEdYj

 

总结:

第二天,我们学习了:

· Sketch文件的导入

· 补间动画逻辑

· 透明度动画

· 【案例】淘宝Toast

· 缩放动画

· 时间轴的控制

 

预告:

第三天,我们将会学习

·?Principle中对象的四个交互属性

·?Principle动画触发条件

·?动画的分解

·?符合现实物理世界的动画

 

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

zidouzi-erweima

转载请注明:学UI网—UI设计师学习教程平台 » 五天Principle从入门到精通02-Sketch的导入

登录收藏

学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从入门到精通01-简单的Toast动画制作五天Principle从入门到精通01-简单的Toast动画制作
?