陌北默

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

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

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

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

 

今天我们模仿一下饿了么的下拉刷新动画,相信大家对这个动画十分熟悉。

Drop down animation01

先说一下这个饿了么的动画并不是Principle做的,这个动画是有交互的。我们主要是模仿一下这个效果。巩固一下我们之前学的基础知识。

首先,我们Sketch里先画一个盒子,导入到Principle。

Drop down animation02

 

开盖子动作制作

当我们下拉时,动作是两个盖子旋转打开。

我们先处理这个旋转动作,分析一下,盖子看成一个矩形,旋转的基点是盒子的左右上角,并不是矩形的中心。这里要怎么处理呢?

 

我们来抽象一下问题:

如何让一个物体旋转的时候旋转中心不在自己的中心?

大家可以考虑15秒,然后再接着看下文,自己想出来最好啦。👍

Drop down animation03

我的方法:我这里采用的是添加辅助矩形的方式实现的,我们先处理一侧,把盖子复制一个出来,把两个盖子(杆子)对接起来成组,其中一个透明度改成0,那么还是一个盖子,然后在这个组上加动画。(解决方法不唯一)下图是处理后的盖子组:

Drop down animation04

两边添加旋转动画后的效果:

Drop down animation05

 

蹦食物动作制作:

动作分解:食物首先叠在盒子的背后,然后进行抛物线的动画,先上升然后下降,食物下降过程中渐隐。

这里面的抛物线的运动速率要符合物理逻辑,

食物的起点

首先上抛的起点速度最大,然后

垂直方向[Y轴]上做匀减速运动,

水平方向[X轴]上做匀速运动,直至到达顶点;

 

最高点

到达顶点的时候

[Y轴]上的速度为0,然后[Y轴]上做匀加速运动,反向运动;

[X轴]速度仍然匀速

 

曲线运动实现说明:其实曲线在principle中是比较难做的,我们只能设置起点和终点,然后在调节两个坐标轴上的速度曲线去调节出想要的路径。

我们在水果到达抛物线最高点的时候做一个关键帧,这样可以处理水果曲线的运动。

下图是水果冲盒子内到达最高点的运动曲线

Drop down animation06

↑匀速运动

Drop down animation07

↑减速运动

后面的操作我就不详述了,都是重复的。重在理解,有不理解的地方大家可以公众号里留言。看下面的抛物完整动作:

Drop down animation08

 

最后加餐:

想做好微动画,短暂的1-2秒中让人留下好的印象是很难的。

首先:创意好,动画的内容要符合要表现的主旨,不能仅仅博人一笑,动画的表现要与产品形象相统一。

其次:趣味性,要有点意思,让人家记住你的动画

最后:韵律,动作要优美,不能太生硬,就是动画细节上的处理,动画运动的速度要处理的符合客观规律,重点是运动的加速/减速的控制,就是我们这节课的重点。

 

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

zidouzi-erweima

转载请注明:学UI网 » 五天Principle从入门到精通04-模仿饿了么下拉加载动画

登录收藏

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

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

【特色推荐】

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

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

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

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

 
你可能喜欢的:
4步制作酷炫loading效果[Principle]4步制作酷炫loading效果[Principle]
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从入门到精通03-动画的基本逻辑五天Principle从入门到精通03-动画的基本逻辑
五天Principle从入门到精通02-Sketch的导入五天Principle从入门到精通02-Sketch的导入