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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
AE表达式实现逼真弹性动画
0.0°
2015-07-08 原创文章 教程 原作者: 原作者 举报 151754 894 652 45

利用AE表达式和简单的关键帧实现弹性效果。

       这次分享的内容是非常重磅的!以至于我自己都不舍得拿出分享!虽然分享的是一位强大的老外(http://www.motionscript.com/articles/bounce-and-overshoot.html 是Adobe的推荐博客)写出来的表达式,但还是有占为己有的心态,好吧,那么本次分享到此结束~谢谢观看。

       嘿嘿嘿,这次分享的是非常实用且高效的表达式!弹性表达式,Bounce 和 Overshoot!利用这个两个表达式你可以轻而易举地实现各种弹性动画,如抖动、弹跳动画等。是的,你没听错,只要998个赞,你就能轻松获得随意加弹性Buff!赶快拿起你的鼠标点赞吧!

       表达式的推导过程可以点击查看上面的链接,原作者非常详细的阐述了他的推导过程,大家快去膜拜吧!而且作者非常无私的贴出了两个(Bounce & Overshoot)可以直接进行关键帧的表达式,再次膜拜(室友问我为什么跪着打字)。后面我会提到怎么去快速理解和掌握这个弹性两个表达式。

       首先我们先来了解一下什么是Bounce 和 Overshoot吧!

Bounce0

图值表:

Overshoot

图值表:

我可以简单将:

       ·Bounce 理解为“反弹”,如 皮球落地反弹的效果;

       ·Overshoot(过冲、夸张的)理解为“抖动”,如 果冻抖动的效果。

说了这么多,我们来表达式的真容吧!原作者在他的文章末尾贴出了可以直接进行关键帧的两个表达式,分别是(斜体部分):

Keyframe Overshoot

freq = 3;

decay = 5;

n = 0;

if (numKeys > 0){

  n = nearestKey(time).index;

  if (key(n).time > time) n--;

}

if (n > 0){

  t = time - key(n).time;

  amp = velocityAtTime(key(n).time - .001);

  w = freq*Math.PI*2;

  value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);

}else

  value


Keyframe Bounce Back

e = .7;

g = 5000;

nMax = 9;

n = 0;

if (numKeys > 0){

  n = nearestKey(time).index;

  if (key(n).time > time) n--;

}

if (n > 0){

  t = time - key(n).time;

  v = -velocityAtTime(key(n).time - .001)*e;

  vl = length(v);

  if (value instanceof Array){

    vu = (vl > 0) ? normalize(v) : [0,0,0];

  }else{

    vu = (v < 0) ? -1 : 1;

  }

  tCur = 0;

  segDur = 2*vl/g;

  tNext = segDur;

  nb = 1; // number of bounces

  while (tNext < t && nb <= nMax){

    vl *= e;

    segDur *= e;

    tCur = tNext;

    tNext += segDur;

    nb++

  }

  if(nb <= nMax){

    delta = t - tCur;

    value +  vu*delta*(vl - g*delta/2);

  }else{

    value

  }

}else  value


       其中运用了很多数学知识,反正我是看醉了。幸运的是,要想使用它却不需要我们完全搞懂表达式的原理。

       Ok,那么怎么使用它呢?

       第一步,将上面两套表达式ctrl+c复制到你的云笔记中,方便你的随时随地的调用它(如果你可以复制到脑子里的话也行)。

       看到这步,恭喜你!你已经学会了80%了。

       下面我将拿 Keyframe OverShort 来举例。

       该表达式的工作原理需要采样关键帧运动速率,你想要表达式正常工作,就要给最后一个关键帧一个速度值。也就是说抖动效果是由关键帧的速度值及表达式中的频率(freq)、衰减(decay)共同来控制的。简单的讲,使用了该表达式的某属性的最后一个关键帧的速度值将会很大程度的影响表达式的抖动效果(好绕口啊)。所以当你感觉抖动效果不明显时,也可以试试改变一下关键帧速率。(我第一次分享该表达式给其他同学时,很多人反映没有效果,往往都是因为起关键作用的最后一个关键帧速度值为0所导致的)

如下图所示,OverShort表达式中的freq、decay保持不变,改变最后一帧的速率,弹性效果随之改变(红圈表示最后一帧的速度值)。

a:

b:

温馨提示:

1.点击“显示后表达式图表”,方便我们更好的感受弹性带震撼(同时计算机的处理负荷会变大哦,所以看完记得随手关掉)。

2.该表达式可以用在一维、二维及三维属性(例如位置、旋转、缩放等等)。

       不知道到这里大家能否学会Bounce 和 Overshoot的用法。其实很简单,只是可能被我说复杂了。没关系,请看下面我蹩脚的演示:

step 1:打好关键帧:


step 2:给关键帧加上运动曲线(由于录屏大小的限制,看不到右键菜单,其实就是给关键帧加了一个缓动)


step 3:让最后一个关键帧的速度值不为0(纵坐标表示速度,我选中其中一个关键帧之后按了F9,让其缓动)


step 4:将表达式复制到位置属性中并轻点小回车键:


step 5:准备好可乐和炸鸡,然后慢慢欣赏...

       相信看到这里你应该已经学会了Bounce 和 Overshoot表达式的用法,是不是超简单,超实用!再次感谢原作者(http://www.motionscript.com/articles/bounce-and-overshoot.html )的无私分享!表达式着实能为我们省下不少宝贵的时间,同时效果还不会打折反而更佳。表达式只是一门语言,当你掌握足够多的“词汇”,“语法”,“语句”你也可以尝试编写更实用的表达式,随时调用。期待大家脑洞打开!

分享到此结束,如果你觉对你有帮助就点个赞吧!感谢观看!

更新:2015-07-08

收藏

894人已收藏

J_King

为创作而生

  • 28

    作品

  • 4645

    粉丝

  • 33

    关注

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

    猜你喜欢

      2015-07-08 原创文章 教程 原作者: 原作者 举报 151754 894 652 45

      AE表达式实现逼真弹性动画

      0.0°

      你确定要举报AE表达式实现逼真弹性动画

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年07月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      652
      894
      45

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

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

      登录

      手机号

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

      登录
      第三方账号登录