所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

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

小编:五天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


 

本页地址:https://www.uime.cn/27782.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?