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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
AE基础教程-点赞
0.0°
2019-11-10 原创文章 教程 举报 2603 59 36 3

先在这里感谢大家的关注,前几周出了几篇AE教程之后,发现关注度还是挺高的。接下来会继续定期更新(摆脱拖延症第一步)


因为平时工作也比较忙,只有周末有时间,还有平时的一些碎片时间(不刷抖音了!)来整理教程,后面教程都会尽量做到一周一更新。


上周提到的AE小白入门教程和动画十二黄金法则(同样也适用于UI动效)正在整理资料和准备中,预计可以在11月底前更新。


如果大家有什么想要学习或者了解的建议,或在练习中不懂的地方,欢迎后台或文章留言,会在第一时间回复。


顺便小声逼逼一下(如果觉得教程和内容有用的话,希望大家帮忙推荐下我们给身边朋友,非常谢谢


好啦,言归正传,回到主题!本周教程是一个点赞的动效,最终效果如下

以下是视频过程,建议了解思路后,自己去尝试,这样记忆会更深!



思路解析


整个动画效果会用到下面这 4 个功能,分别是


修剪路径,效果与预设-设置遮罩,调整图层,运动模糊,下面会详细的功能介绍,文章末尾有对应的关键帧数值参考。


点赞/喜欢这个动作会发生在用户喜欢某个东西之后,点赞后,这时候icon的属性会发生改变,由默认的无状态,变为了喜欢,我们需要给用户一个实时的反馈,告诉用户这件事情已经发生。


普通的基础做法是,改变icon的属性,比如颜色、大小、样式等




功能介绍


1、修剪路径


点开线条路径的图层,选择「添加」里面找到「修剪路径」。可以为图层添加修建路径,然后通过修改里面三个参数来实现我们要的效果。



修剪路径里共有3个属性参数,分别是「开始」「结束」「偏移」,通过调整这三个属性可以控制我们的线条,来进行长短循环变化。


(偷个懒,用下上周的素材,哈哈)




2、效果与预设-设置遮罩


如图所示,如果我们想要红色的圆,只在爱心形状里面缩小和放大,那么我可以用到效果与预设-设置遮罩工具来实现。


其效果原理和Ai的剪切蒙版、Ps的按住Alt创建的剪切蒙版大致相同



我们只需要将「设置遮罩」的效果赋予给红色圆,然后在从图层中获取遮罩选中里选择到爱心图层(下图中红色点)即可


如何赋予?选中圆的图层,双击设置遮罩即可。

找不到效果与预设?可以通过顶部菜单栏「窗口」-「效果与预设」中找到




3、调整图层


鼠标右键点击空白处,可以创建一个调整图层,调整图层就是将2个图层的属性统一归到调整图层里面。在调整图层里面进行统一调整。


我们可以将整个爱心的动画全部归到调整图层里面,然后通过改变调整图层的旋转(R)和缩放(S)属性,来得到我们想要的效果。





4、运动模糊


勾选上白色框选区域,就表示打开运动模糊,关键是运动速度越快,模糊越明显。


关键帧参数参考









如果教程有帮助的话

关注我们,点个赞,感谢



Powered by Froala Editor

更新:2019-11-10

收藏

59人已收藏

  • 9

    作品

  • 169

    粉丝

  • 0

    关注

  • AE工作中6个实用的小技巧
  • AE教程-艺术字体动画
  • AE基础教程-支付完成动效
  • 7个UI动效案例

    猜你喜欢

      2019-11-10 原创文章 教程 举报 2603 59 36 3

      AE基础教程-点赞

      0.0°

      你确定要举报AE基础教程-点赞

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年11月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      36
      59
      3

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

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

      登录

      手机号

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

      登录
      第三方账号登录