恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
为什么我做的动效总是不够Q弹!
55.4°
原创文章 / 经验/观点 / / 举报
7989 96 277 14

2020-08-21


菜心的第175篇原创
2020年的第53篇
距离2020年小目标40篇原创已超出13篇



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


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



点击动效如下:




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


1.不能只是纵向形变

2.你的中心点别放错了

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

4.丰富更多的细节



1.不能只是纵向形变


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




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



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


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


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



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



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



2.你的中心点别放错了 



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




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


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


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



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



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


锚点在物体中心:



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

 




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



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


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


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




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



4.丰富更多的细节 


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




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



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



总结


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


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



长点心,比啥都强

点个赞,更强!


更多干货欢迎主页扫码!

Powered by Froala Editor

微信公众号:菜心设计铺

收藏

96人已收藏

推荐人:

UI中国

菜心设计铺

微信公众号:菜心设计铺

  • 83

    作品

  • 1.8w

    粉丝

  • 99

    关注

  • 原来在大厂做设计,过稿是有秘诀的!
  • 这两点是非科班设计师很容易犯的错,我先帮你试水了
  • 简单的技法就可以解决工作需求!
  • 为什么每次排版,我都心里没底?

猜你喜欢

    菜心设计铺

    菜心设计铺

    微信公众号:菜心设计铺

    国民爱豆首页霸主身经百战活雷锋砖家
    • 1.8w

      粉丝

    • 3851.9

      人气

    • 8.2w

      颜值

    作品

      菜心设计铺

      点赞:277

      收藏:96

      评论:14

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

      你确定要举报为什么我做的动效总是不够Q弹!?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年08月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录
      最新捕鱼棋牌