恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE教程:图标小动效
0.0°
2019-03-19 自译外文 教程 原作者: 未知 举报 4984 21 13 1

如何让两个小图标之间的转换动起来~

youtube上看的一个视频教程,自己试着梳理了一下设计思路和步骤~ ʅ(´∀`)ʃ


首先看下最终效果:

是一个很常见的【汉堡包图标】和【删除图标】之间的切换:

Image title


Step1:  画3根横杠杠

Image title


Step2: 上下两根线向中心收拢,逐渐消失:
① 上下两根线的对齐点调整到画面中心,让它以中心位置为基准缩放
② scale:100%→0%
③ 透明度:100%→0%
Image title


Step3:  中间的线复制4根,从一根线变为一个删除按钮
① 选中间的线:新建蒙版,拖动蒙版位置
② 复制出4根一样的(⌘+D)

③ 角度调整:4根线的角度分别设置为-45、45、180+45、180-45(形成一个删除按钮的形状)
Image title

Image title


Step4:增加【角度变换】 
① 新增一个“空对象”
② 将空对象下面所有的图层,与空对象进行父子链接(*当你改变空对象的变化属性时(如大小、旋转、位置…),其它图层也会跟着变化)
③ 把空对象旋转90°,这样三根线变成删除图标的同时,还会旋转90°
Image title

Image title

Image title


Step5:勾选运动模糊(似乎会显得更自然一些)

Image title


Step6:让动画循环起来(汉堡包→删除、删除→汉堡包、头尾衔接)
① 复制所有的关键帧,停留一段时间后黏贴(利用motion2插件的clone功能)
② 选中黏贴的关键帧,右键关键帧辅助→时间反向关键帧(顺序就会倒过来了)
③ 空对象第二次旋转后,关键帧的旋转属性设为180°(0°→90°、90°→180°,0°和180°看起来是一样的,看起来就是循环往复的)
Image title

Image title

Image title


Step7:最后在形状转换的过程中,增加一点点放大缩小的效果
① 空对象增加两个关键帧,scale:100%→110%→100%
Image title

Image title



这样就差不多做完啦~ ‵(*∩_∩*)′

个人感觉第三步,从一根线分解为四根线,再变成一个叉叉的思路是比较关键的~

谢谢观看~









更新:2019-03-19

收藏

21人已收藏

  • 29

    作品

  • 109

    粉丝

  • 4

    关注

  • Radial Scaling Effect
  • 【AE动效】Alpha遮罩应用
  • 【AE教程】动态小图案
  • 谷歌深色模式设计规范

    猜你喜欢

      2019-03-19 自译外文 教程 原作者: 未知 举报 4984 21 13 1

      AE教程:图标小动效

      0.0°

      你确定要举报AE教程:图标小动效

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年03月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      13
      21
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录