如何用AE表达式快速实现延迟动画

小编话:很多小伙伴都接触过AE,当然还有很多刚刚接触UI设计可能还不知道AE的小伙伴,小编作为UI设计中的一小白,觉得AE好酷哦!不知道大家有没有这样的感觉。今天让我们跟着@惊叹号设计一起来学习如何用AE表达方式快速实现延迟动画。在AE使用过程中也是非常简单实用的哦!

Hi,这次AE分享的关键词是“延迟”。实现延迟方法各种各样,最简单粗暴的方法就是通过错帧来实现延迟效果,还有刚刚看了@十分钟设计的《制作延迟动画》,也是一种不错办法。

理论上可以达到我们想要的效果,而在这里我想到分享另一种我觉得更高效,更“科学”的办法。

先用一个小案例来帮助我说明,如下图,如果要蓝色小球跟着; 紫色小球运动,并带有一定延迟,你会怎么做?

利用错帧的办法来实现,虽然简易,但是最大的问题是,到了后面动画越来越复杂,只要你每次修改就相当于每次都重头做一遍,非常不科学,也容易出问题,如下图。

通过表达式语句实现延迟动画

首先我们先来认识一下这个语句“valueAtTime(t)”。下面是官方说明文档给出的定义:

返回类型:数值或数组。参数类型:t 是数值。返回属性在指定时间(以秒为单位)的值。

不难理解,其作用就是返回某一时刻的值。那么我们应该怎么运用他呢?

我们可以在表达式库中随时调用它:

先举一个栗子:如两个小球动画,先设置好“ball3”的位移多关键帧,然后分别点开“ball3”和“ball1”的位置属性,如下图:

然后把“ball1”都位置属性链接到“ball3”到位置属性上(此步的具体操作可以参照我上一篇Ae文章),图下图:

做好位置属性的链接后,最关键的一步,在表达式窗口“thisComp.layer(“ball3”).transform.position”后面加上“.valueAtTime(time-0.04)”(注意有他们之间有个小点点“.”,可以简单把这个点理解为“的”)。此时如下图:

此时“ball1”的完整表达式应该是这样的“thisComp.layer(“ball3”).transform.position.valueAtTime(time-0.04)”,用大白话翻译一下,应该是这样的:“这个合成的’ball3’图层的此刻延迟0.04秒的返回值”,简单一句话,“每次返回ball3延迟了0.04秒的值出来”。

效果如下图:

以同样的方法,再添加几个球并设置不同的延迟时间的效果如下:

所有蓝色小球都是链接紫色小球,完全重复紫色小球的动画,因此你可以随时随地的改变紫色小球的动画;想改变延迟时间,只需valueAtTime(time-x),x是你想要的延迟的时间,单位为秒。

这样就可以一劳永逸啦!如下图:

利用“空对象”达到随心所欲的链接

像上一篇文章提到的那样,直接的属性对属性链接,子图层会被“完全”到父图层,就想上面的演示,所有小球最终都会重叠在一起。

所有我还是利用一个“空对象”,把它的位置属性链接到目标图层的位置属性,之后再把要跟随的图层做个图层子父级链接到空物体上。如下图:

当然只要你理解了“valueAtTime”,你还可以把它用在其他属性上面,如缩放,透明等等。如下图:

就是这么简单实用,即学即用的延迟技巧,你学会了吗?

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

站酷

原文作者:惊叹号设计

AE
(0)

相关推荐

  • 如何用AE做圆中圆动画效果

    如何用AE做圆中圆动画效果(简单基础),通过这节,可以加深对关键帧的学习. 操作方法 01 新建合成,尺寸为500*500,时间设置为五秒. 新建固态层,制作成合成大小. 02 双击椭圆工具,制作出一 ...

  • AE表达式制作手表指针动画

    效果: 素材准备 首先在ps中绘制好素材图片,这是基本功,这里不再赘述,大家可以各显神通做出自己满意的图片。 在将psd文件导入AE之前,为了使AE内的层级结构更简单我们可以先对psd文件的图层进行处 ...

  • 如何用AE制作翻书页的动画?

    用AE制作翻书页的动画,首先,我们要绘制出书封面,再绘制书页,再利用图层的三维功能在Y轴上设置其旋转度数并K帧,从而得到书翻页的动画效果.下面,小编把详细的操作步骤分享出来给大家参考. 新建固态层 0 ...

  • 如何用AE软件快速给视频添加字幕?

    方法 添加视频 打开AE软件,将文件夹中的视频拖到软件左侧中间的那块区域,然后再点住它不放,拖到下面类似胶片的小图标上. 添加字幕 添加好视频后,在AE软件左下侧的区域空白处右键,选择"新建 ...

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

    当我们用AE制作完Demo演示动画的时候,为了表明我们的手指的操作轨迹经常会引入一个小圆点. 小圆点的绘制往往是我们制作Demo动画的最后一道工序, 那么问题来了:面对早已做好的各个动画图层,各种位移 ...

  • AE表达式实现伸缩拉长的动画效果

    今天小编为大家分享AE表达式实现伸缩拉长的动画效果方法,教程很实用,值得大家学习,一起来学习吧! 先看效果: 下面是具体的制作步骤: 1. 四个solid,如图,改成4个条: 2. 记好位置,即水平方 ...

  • AE表达式实现心形来回飘散的动画效果

    今天为大家分享AE表达式实现心形来回飘散的动画效果方法,教程真的很不错,方法也很简单,适合新手来学习,来看看吧! 下面是具体的制作步骤: 1. 首先,先送大家一颗心. 2. 导入ae,花个mask稍微 ...

  • 如何用AE制作倒计时的动画。

    在很多场合,都可以看到很帅气的倒计时的动画,那究竟这个动画是怎么做出来的?下面就和大家分享一下如何用AE来制作一个贴心的倒计时的小动画. 操作方法 01 首先,先新建一个合成,将合成的名字改为&quo ...

  • 如何用AE制作出手写字动画效果?

    After Effects (简称AE)是非常高端的视频特效处理软件,很多大片都使用AE制作各种特效.手写字的动画效果是如何用AE制作的呢? 操作方法 01 打开AE新建一个自己需要的大小合适的合成项 ...