长城上的猫

做的动效不够q弹,不知道大家有没有这样的苦恼,如果有的话,可以看看我这篇文章,没准看完你就能白点什么!一起来看看为什么我做的动效总是不够Q弹!

 

最近在工作上做了一个底部图标——圈子:

点击动效如下:

在整个制作的过程中总结了一些小经验,今天分享给大家:

  • 1.不能只是纵向形变
  • 2.你的中心点别放错了
  • 3.为了生动,除了位移变化,长度也要变化
  • 4.丰富更多的细节

 

1.不能只是纵向形变  

最开始中间的两个圆形做的效果是这样的:

总感觉不够q弹,不够自然,后来找了一下原因,原来是因为我的形变只有纵向的拉伸。我们随便看两帧的数值:

只有纵向也就是y轴数值在变化。

我们试想下,如果一个有弹力的物体被压扁,除了高度变矮以外,是不是横向也会变胖,所以只有纵向变化就不符合自然规律,所以才会看起来不自然。

于是我做了一些调整,除了纵向变化,横向数字也随之调整,调整后的效果如下:

为了让大家更加清晰的看清效果,我们可以再看下两个对比图:

是不是后面的更加自然一些!

 

2.你的中心点别放错了 

在每个图层都会有中心锚点:

这个大家应该都知道,锚点为止不一样,那形成的动效肯定也是不一样的。

在k动画之前,一定要想清楚物体的中心点应该放在那里,并不是所有的动画中心点都是在物体中心的。

比如我们这个动画,类似于你用手去按这个物体,然后物体下面是一个地面:

在你用力的时候,物体与地面接触的地方成为受阻力的开始,也就是形变的开始,所以我们的中心点就应该是物体与地面接触的地方:

我们可以看一下“锚点在物体中心”与“锚点在与地面接触的地方”,二者的区别:

锚点在物体中心:

锚点在与地面接触的地方:

 

很显然,后者才符合单手指挤压的现实规律,才能得到你想要的结果!

 

3.为了生动,除了位移变化,长度也要变化 

以前做的移动的动画,基本就是位置有个回弹的动画,比如下面这种:

这次这个线条有点不一样,除了位移的上回弹,长度还会有微小变化,从短变长,再变短,我们可以看下有长度变化和没长度变化的区别:

仔细观察,你会发现,前者会更有细节,更Q弹!

 

4.丰富更多的细节 

做到这里,大概的效果是这样的:

当然,还可以继续想办法丰富细节,比如那两个小线条冒出来之前,先冒出来更小的线条,丰富层次:

这样可以让整体更加热闹,更加耐看一些。

 

总结 

以上就是这个小动效过程中的一些小思考,已经落地在腾讯动漫app底部图标,大家可以下载体验。

希望大家可以活学活用,做出更好的作品,在视觉、体验方面为自己所做的产品贡献一份微薄之力!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺 
   

 

转载请注明:学UI网 » 为什么我做的动效总是不够Q弹!

登录收藏
 
你可能喜欢的:
【AE教程】如何制作简单的太空旅行MG动画【AE教程】如何制作简单的太空旅行MG动画
将迪士尼的10大动画原理应用于UI动效设计将迪士尼的10大动画原理应用于UI动效设计
【AE教程】如何制作毛玻璃风格图标动效(四)【AE教程】如何制作毛玻璃风格图标动效(四)
【AE教程】如何制作毛玻璃风格图标动效(三)【AE教程】如何制作毛玻璃风格图标动效(三)
【AE教程】如何制作毛玻璃风格图标动效(二)【AE教程】如何制作毛玻璃风格图标动效(二)
【AE教程】仅需两步!制作流动的液体渐变效果【AE教程】仅需两步!制作流动的液体渐变效果
AE动画插件Lottie的前世今生,附详细案例教你避坑AE动画插件Lottie的前世今生,附详细案例教你避坑
18种常用AE表达式解析18种常用AE表达式解析
【案例】界面动效的制作与输出【案例】界面动效的制作与输出
【AE教程】如何制作毛玻璃风格图标动效(一)【AE教程】如何制作毛玻璃风格图标动效(一)