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

来源:网络   作者:热心网友   发布时间:2018-06-07    浏览次数:26
收藏到:

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

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

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

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

 

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

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

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

 

开盖子动作制作

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

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

 

我们来抽象一下问题:

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

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

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

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

 

蹦食物动作制作:

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

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

食物的起点

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

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

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

 

最高点

到达顶点的时候

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

[X轴]速度仍然匀速;

 

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

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

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

↑匀速运动

↑减速运动

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

 

最后加餐:

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

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

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

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


×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.17xsj.com/shejijiaocheng/shejililun/7321.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!