飞特网 顶部通栏广告

AE循环动画表达式的运用和讲解

点石传媒发布于:2020-6-5 08:42 |原作者: Rmixlink
简介: AE的循环动画表达式在UI设计中越来越被广泛的运用,很多新手朋友还不知道如何使用表达式来制作循环动画,今天这篇小教程就像飞特网的朋友们详细介绍一下循环动画表达式,希望对大家学习AE有所帮助! ... ...

版权申明:本教程出自“Rmixlink”原创,感谢“Rmixlink”的原创教程分享!

时隔一年半,又写教程了。分享循环动画表达式的运用方法给大家。

好吧,又是我这个教程界的毒瘤啊。看看上一次写教程是在2015年6月30日。实在是对不起大家啊。于是还是回来除除草。

按照惯例,教程里涉及的AE依然是英文版的。如果有同学实在看不懂。就请恶补英文。不过在表达式上,中文版的AE依然使用的是英文的脚本。所以。请恶补英文。请恶补英文。请恶补英文。

这次给大家带来的是AE表达式中循环动画的讲解。

先引用百度百科上面写的表达式解释,让大家先明白这几个表达式都说了些啥。

loopIn(type = "cycle", numKeyframe = 0)在层中从入点到第一个关键帧之间循环一个指定时间段的内容。被指定为循环内容的基本段,是从层的第一个关键帧向后到层的出点方向的某个关键帧间的内容。 numKeyframe是指定以第一个关键帧为起点设定循环基本内容的关键帧数目(计数不包括第一个关键帧)。例如, loopIn("cycle", 1)从层的入点开始到第一个关键帧结束循环第一个关键帧到第二个关键帧间的内容。循环的次数由入点到第一个关键帧间的时间和循环内容长度决定 。

loopOut(type = "cycle", numKeyframe = 0) 在层中从最后一个关键帧到层的出点之间循环一个指定时间段的内容。被指定为循环内容的基本段,是从层的最后关键帧向前到层的入点方向的某个关键帧间的内容。 numKeyframe是指定以最后一个关键帧为倒数起点设定循环基本内容的关键帧数目(计数不包括最后一个关键帧)。例如, loopOut("cycle", 1)从层的最后关键帧开始到出点结束循环最后一个关键帧到倒数第二个关键帧间的内容。循环的次数由最后关键帧到出点间的时间和循环内容长度决定 。

loopInDuration(type = "cycle", duration = 0)在层中从入点到第一个关键帧之间循环一个指定时间段的内容。被指定为循环内容的基本段,是从层的第一个关键帧向后到层的出点方向duration秒的内容。 duration是指定以第一个关键帧为起点设定循环基本内容的时间秒数。例如, loopInDuration("cycle", 1) 从层的入点开始到第一个关键帧结束循环第一个关键帧以后1秒的内容。循环的次数由入点到第一个关键帧间的时间和循环内容长度决定 。

loopOutDuration(type = "cycle", duration = 0) 在层中从最后一个关键帧到层的出点之间循环一个指定时间段的内容。被指定为循环内容的基本段,是从层的最后关键帧向前到层的入点方向duration秒的内容。 duration是指定以最后一个关键帧为倒数起点设定循环基本内容的的时间秒数。例如,loopOutDuration("cycle", 1) 从层的最后关键帧开始到出点结束循环最后一个关键帧到倒数倒数1秒时间的内容。循环的次数由最后关键帧到出点间的时间和循环内容长度决定 。

What?!你告诉我说。你不知道AE的表达式在那里?!?!

不要紧,现在我来告诉你。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

只要按住alt键点击关键帧图标就能进入表达式的编辑模式。然后AE提供了很多表达式的预设给我们大家使用。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

大家可以通过点击这个三角找到这些表达式的预设。而我们要讲的循环动画就藏在

Property的菜单下。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

好啦。现在大家应该都能找到这4个循环动画的表达式了。今天我们不说没用的,就说我们的表达式当中type="cycle"这一项里面的变数。

我会分享我的工程文件给大家。文件是用AECC2017做的。有兴趣的同学可以去下来看。

那么AE中这个type=""引号里面的内容是可以更改的。这个应该是大部分同学不知道的。引号内的内容可以更改为循环动画的4种方式。我讲一一为大家讲解这4种方式。

1.Cycle

第一种方式为默认的Cycle方式。根据翻译,cycle就是圆周,圆的意思。那么我们的循环方式就是周而复始的一个方式。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

如图中小球所示,小球运动结束后,又回到了起始的位置,重复原来的动画。这就是Cycle的方式。在运动曲线图中可以看到。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

实线部分为我们做的动画,虚线部分为自动循环的部分。于是我们想要得到一个流畅的循环动画必须打上三个关键帧,并且第一关键帧和第三关键帧上的属性必须完全一致,我们的动画才能流畅没有卡顿的运动起来。

那么,我只想要这个小球来回运动,我又是一个很懒的人不想打三个关键帧(有足够懒!比方说我,<( ̄︶ ̄)>)。办法是有的。

2.Pingpong

大家一看这个单词。我擦,国球!对的,你没有看错,的确是乒乓球的Pingpong。

而且我们的这个方式也就如同乒乓球一样是循环来回的运动。来吧,看图说话。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

大家可以看到小球的运动是来回的运动,这样其实就为了很多同学在做loading小图标的时候带来了很多方便,不需要再多复制非常多的帧来保证你的loading动画是一直运动的啦。这个就是乒乓球来回运动的方式。

再来看它的运动曲线,AE循环动画表达式的运用和讲解 飞特网 AE实例教程

对了,这样就省去了我们打第三个关键帧的麻烦。就能做一个流畅的循环动画了。我是不是敲厉害?<( ̄ˇ ̄)/

3.Continue

第三种方式是继续,这个运动比较诡异。连表达式的方法都有点不一样。因为是让动画持续下去。所以在写表达式的时候是这样的: loopOut(type = "continue")

去掉了之前表达式里面loopOut(type = "Pingpong", numKeyframes = 0)

numKeyframes = 0 这条字节段。为什么呢?我们来插播一个小知识。这个字节段说的是循环的次数0是无限次,1是1次,2是2次,以此类推。那么我们在方式中已经使用了Continue了,就证明这个动画是永远持续的,所以在后面标示循环次数的话,在逻辑上面是说不通的,所以,当你没有拿掉后面的这个字节段的时候,AE会毫不客气的给你报错。(此刻AE的内心是崩溃的,你又要让我一直的走,又要规定我走几次,你想要我怎样?!好气哦!!<(-︿-)>)。并且在关键帧的运动方式上面,也不能如上面两个一样选择Easeout的方式,只能使用最普通的linear。为什么呢?因为Easeout在动画曲线上面表现的是动态的结束,你让我结束,还让持续我走,你想怎样?当然,如果你这里这么做了,AE是不会报错的,但是你的动画会看起来十分的诡异。因为loopOut(type = "continue")这个表达式捕捉了动画末尾的动态速率和属性变化以作为它持续下去的属性参照依据。于是你在使用easeout的方式结束动画的时候,loopOut(type = "continue")表达式会给你一个很慢,很慢,很慢,很慢的循环动画反馈。

看图说话,

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

可以看到小球的运动受到循环表达式continue的影响,匀速的,运动出了我们的画面。动画曲线如下图所示:

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

虚线部分,就是它之后的运动,于是小球突破了天际,飞向了太空,并且,永远,永远的飞了下去。好凄凉。

4.Offset

这个方式使用频率非常的少,从我习得这门偷懒绝学,好像就用到过一次。是帮朋友做一个鸟飞出画面的一个动画用到过。这个方式是将整个动画曲线以偏移的方式叠加。然后无限次或者有限次的循环。

看图说话:

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

好的,其实在这个图上,并不能明显的看出来小球的运动变化,因为运动叠加了,无限次的循环,小球就出去了。我们还是来看运动曲线把。会比较明显的解释这个运动的方式。

AE循环动画表达式的运用和讲解 飞特网 AE实例教程

看到了么?这个曲线一直偏移并且叠加在之前的运动上面。于是。小球保持着这个运动方式,飞出了天际,飞向了无尽的宇宙,并且一直会飞下去。再见了小球,一直让你做例子,辛苦了。么么哒(づ ̄ 3 ̄)づ。

好的,教程界的毒瘤2017年第一篇教程就这样圆满的结束了。其实是肚子很饿,准备找吃的去了。就先写到这里吧。想必大家也对4种循环动画的方式有所了解了。希望大家喜欢这篇教程。如果有不明白的地方。欢迎加入交流群(lao si ji fan che qun)来寻找答案。

2

好评

差评

刚表态过的朋友 (2 人)

点石传媒
陕西省 榆林市 平面设计师
+ 关注 私信
  • AE循环动画表达式的运用和讲解
  • AE图钉功能制作猫尾巴摆动动画教程
  • 高频使用的14个SKETCH实用小技巧

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 移动版| 飞特网