为什么我做的动效总是不够Q弹！

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

 

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

点击动效如下：

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

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

 

1.不能只是纵向形变  

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

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

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

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

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

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

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

 

2.你的中心点别放错了 

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

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

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

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

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

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

锚点在物体中心：

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

 

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

 

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

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

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

仔细观察，你会发现，前者会更有细节，更Q弹！

 

4.丰富更多的细节 

做到这里，大概的效果是这样的：

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

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

 

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

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

 

原文地址：
菜心设计铺（公众号）

作者：菜心设计铺