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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
关于循环动画表达式的运用和讲解
0.0°
2020-03-20 原创文章 教程 举报 10742 52 31 6

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

  好吧,又是我这个教程界的毒瘤啊。看看上一次写教程是在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的表达式在那里?!?!

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


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


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

Property的菜单下。



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

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

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

  1.Cycle

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

Image title

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


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

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

  2.Pingpong

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

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

Image title

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

  再来看它的运动曲线,

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

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")表达式会给你一个很慢,很慢,很慢,很慢的循环动画反馈。

  看图说话,

Image title

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


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

4.Offset

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

  看图说话:

Image title

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


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


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





Powered by Froala Editor

更新:2020-03-20

下载
收藏

52人已收藏

Rmixlink

无眠养猫人

  • 19

    作品

  • 196

    粉丝

  • 51

    关注

  • 【教程】手把手的教你如何入门Aftereffects
  • 翻译了一个国外的教程,希望大家喜欢
  • 用AE做简单的猫尾巴骨骼动画
  • 来教大家做个简单的翻书效果吧【决心不做年更的博主】
相关标签
教程

    猜你喜欢

      2020-03-20 原创文章 教程 举报 10742 52 31 6

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

      0.0°

      你确定要举报关于循环动画表达式的运用和讲解

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年01月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      31
      52
      6

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

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

      登录

      手机号

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

      登录
      第三方账号登录