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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
如何用AE快速制作一个生动的小圆点
0.0°
2014-11-03 原创文章 教程 原作者: 原作者 举报 65973 603 419 33

当我们用AE制作完Demo演示动画的时候,为了表明我们的手指的操作轨迹经常会引入一个小圆点。小圆点的绘制往往是我们制作Demo动画的最后一道工序。 怎么绘制出“跟手”的小圆点呢?

怎么绘制出“跟手”的小圆点呢?

首先你要先画个圆,根据你要模拟的手指位置做好关键帧动画,到目前为止一切都非常顺利,但是最头疼的是,你要做出“跟手”的小圆点,之前“引以为傲”的各种风骚运动曲线现在变成了各种“坑”。好吧,硬着头皮花点时间。。。。

辛辛苦苦终于把小圆点对上了,输出。。。此时你要祈祷不要返工,不然只能重头折腾了。

有点AE基础的同学可能会觉得上面的办法太过简单粗暴了,直接对小圆点和目标图层做个子父级链接不就万事大吉了吗?

这种办法可以做到两个图层完全“同步”,可是问题又来了?跟手是跟手了,但是这样的动画给人非常呆板,机械感觉。

显然完全同步的动画不是我们想要的,如果能稍微加点滞后感,延迟感,就像我们现实生活中操作手机那样,有没有呢?

怎么绘制出“跟手”且“生动”的小圆点?

第一步还是要将小圆点作为目标图层的子级,然后我要介绍一个神奇的家伙“时间扭曲”(效果>时间>时间扭曲)

提示:时间扭曲效果只能作用于形状图层,位图图层貌似不起作用?

对小圆点图层添加了“时间扭曲”效果后,面板中其他参数我们可以保持默认,重点关注“速度”参数。

我们把“速度”参数设为100,此时我们可以看到小圆点和目标图层处于完全同步的效果。

如下图我们把“速度”参数分别设为:98(橙色)、100(白色)、103(绿色)

综上我们可以得出:当时间扭曲的“速度”<100 时,小圆点的运动时间会向后延迟;速度>100 时,小圆点的运动时间会向前推前。

所以我一般都会把速度设成>100 (101或102)来模拟手指操作屏幕的那种微妙的滞后。

是不是很轻松的就完成了我们预期的“跟手”和“生动”。

而且用这种方法实现的好处有:

1.小圆点位置我可以随时改动;

2.小圆点延迟速度我可以随时改变;

3.完全不需要考虑小圆点的动画路径和动画曲线,目标图层怎么动小圆点就怎么动。

上图为“速度”设为101时,可以模拟出逼真的手指操作屏幕的效果。


但问题又来了,当我直接用子父级链接图层时,小圆点的位置属性被链接的同时,缩放,旋转等属性也同样被链接了,如下图所示。(透明度不会被链接)

要解决这种“限制”我们还可以这样玩:

我们可以加入一个“空对象”图层来充当小圆点和目标图层的“桥梁”。

新建一个空对象并选中它,点击“P”,调出位置属性;然后按住ALT+鼠标右键单击位置属性的关键帧砝码图标,如下图:

位置属性下方会弹出一行表达式菜单,同样有一个父级链接的图标,此时我们点击位置属性表达式的父级图标拖动到目标图层的位置属性,松开鼠标,空图层的位置属性就会和目标图层的位置属性链接上了。然后我们再将小圆点图层父级到空对象图层,这样我们就突破了用图层父级去链接图层的那种“完全”链接了,如下图所示。(这里我不直接用小圆点的位置属性去链接目标图层,大家可以试试为什么我不直接这样做)

完成到这步,我们就不用担心目标图层的缩放,旋转属性会对小圆点产生影响了,我可以做出更多变化,如下图对目标图层加了一个旋转的关键帧动画:

就是这么简单实用,即学即用的小圆点技巧,你学会了吗?

这些都是平时工作琢磨总结的一些小技巧,如果大家觉得有所帮助,那就点个赞吧!让我有动力分享更多好玩实用的内容。谢谢观看!

(附上AE源文件供大家下载学习)

更新:2014-11-03

下载
收藏

603人已收藏

J_King

为创作而生

  • 28

    作品

  • 4645

    粉丝

  • 33

    关注

  • Raindrop
  • Login UI
  • 常用手势小动画库 for AE
  • 续·弹性表达式示例(附原文件)
相关标签
MGAE圆点

    猜你喜欢

      2014-11-03 原创文章 教程 原作者: 原作者 举报 65973 603 419 33

      如何用AE快速制作一个生动的小圆点

      0.0°

      你确定要举报如何用AE快速制作一个生动的小圆点

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年11月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      419
      603
      33

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

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

      登录

      手机号

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

      登录
      第三方账号登录