计算机动画推导,AE表达式实现逼真弹性动画
这次分享的内容是非常重磅的!以至于我自己都不舍得拿出分享!虽然分享的是一位强大的老外(http://www.motions cript.com/articles/bounce-and-overshoot.html 是Adobe的推荐博客)写出来的表达式,但还是有占为己有的心态,好吧,那么本次分享到此结束~谢谢观看。
嘿嘿嘿,这次分享的是非常实用且高效的表达式!弹性表达式,Bounce 和 Overshoot!利用这个两个表达式你可以轻而易举地实现各种弹性动画,如抖动、弹跳动画等。是的,你没听错,只要998个赞,你就能轻松获得随意加弹性Buff!赶快拿起你的鼠标点赞吧!
表达式的推导过程可以点击查看上面的链接,原作者非常详细的阐述了他的推导过程,大家快去膜拜吧!而且作者非常无私的贴出了两个(Bounce & Overshoot)可以直接进行关键帧的表达式,再次膜拜(室友问我为什么跪着打字)。后面我会提到怎么去快速理解和掌握这个弹性两个表达式。
首先我们先来了解一下什么是Bounce 和 Overshoot吧!
Bounce
图表:
...........................
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
}
tCur = 0;
segDur = 2*vl/g;
tNext = segDur;
nb = 1; // number of bounces
while (tNext
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.motions cript.com/articles/bounce-and-overshoot.html )的无私分享!表达式着实能为我们省下不少宝贵的时间,同时效果还不会打折反而更佳。表达式只是一门语言,当你掌握足够多的“词汇”,“语法”,“语句”你也可以尝试编写更实用的表达式,随时调用。期待大家脑洞打开!
分享到此结束,如果你觉对你有帮助就点个赞吧!感谢观看!
计算机动画推导,AE表达式实现逼真弹性动画相关推荐
- ae制作的mg如何用到html,【教程】AE表达式常用的函数-制作MG动画必备
我一开始接触AE是简单的套模板,后来慢慢学会自己调关键帧动画.感觉应用比较多的同样也让我很头疼的是运动.所以对表达式控制做了初步的学习.下面是一些常用的AE表达式 1.time time随着时间线的变 ...
- AE表达式:利用wiggle和Math.sin制作蝴蝶动画
AE表达式:利用wiggle和Math.sin制作蝴蝶动画 B站链接: AE表达式:B站讲解最详细的Math表达式和蝴蝶动画制作 课程准备 蝴蝶AI素材 wiggle的用法,上次录了一节视频,链接 M ...
- 【AE表达式】300多个人名正从宇宙中飞来……
问题 数量级的问题: 昨天我朋友问:要做三百多个人名(文本)从宇宙深处飞出来的效果,怎么处理? 对于这样的需求,做 AE 包装的小伙伴们都不陌生,就是 3D文本层摆位置,打个相机穿梭一下.没错,对于几 ...
- AE表达式教程 - 1、什么是AE表达式
AE表达式是一段(一行)JavaScript代码,通过表达式可以对元素属性的值进行操作,从而得到指定的结果. 使用表达式可以自动完成一些原本需要手动k大量关键帧才能实现,甚至手动无法实现的效果. 添加 ...
- ae编程语言as_【微教程】从编程的思路学习AE表达式
(这是一段引人入胜的开场白......),针对知道ae基础操作的群体的教学 授人以鱼不如授人以渔,学习表达式应该是从学会脚本语言入手,而不是通过记忆的方式记住每种效果的表达式语句.这里说的编程并非特指 ...
- 【AE表达式】以插值方法代替关键帧
在<[AE表达式]更好的动画时间控制>这篇文章中说过我比较不是很喜欢用关键帧来控制动画,这是有一定条件的.使用表达式控制动画更多的是强调复用性,比如你拿到我的工程文件,不管是显示的内容.尺 ...
- canvas系列教程07 ——捕获、拖拽、抛掷、缓动动画、弹性动画
捕获物体 多边形以及不规则图形的捕获非常复杂,采用的方法是分离轴定理(SAT)和最小平移向量(MTV).这里不展开介绍,有兴趣的小伙伴可以自行搜索了解一下.下面来介绍一下矩形和圆的捕获. 矩形的捕获 ...
- 如何学好 AE 表达式?
--你知道世界上最难的问题是什么吗? --就是这道题. 上面的只是一个梗,不过面对知乎里或者朋友的这种发问,我真的不知道怎么回答,从上个礼拜,我就开始琢磨这个事儿:如何讲明白如何学好 AE 表达式.问 ...
- 【转载】AE 表达式精通大法
本文是转自 设计树 的一篇文章,我对文章进行了重新排版,并标注了重点 原文地址 -- AE表达式精通大法 以下是正文部分: AE 表达式一直是大家学习 AE 过程中的一道坎,涉及代码网上教程资源又不多 ...
- ae绘图未指定错误怎么办_【教程】最全的ae表达式教学分享(实用!)表达式其实很简单...
大部分人对ae表达式是望而却之,感觉很难,无从下手,网上的教程也是层次不齐,很难找到好的教程跟着学.于是呢,搜罗全网,整理了一份最全的最实用的ae表达式教学.也算是一个对自己的总结. 下面解决几个问题 ...
最新文章
- 自然语言处理中的N-Gram模型
- python笔试题110题_《Python程序设计》试题库
- 第五周项目三-时间类(1)
- master中的系统目录与用户数据库中的区别
- python圣诞节快乐_用python让大白对你说圣诞快乐
- AWARD BIOS设置(INTEL芯片组)
- (深入.Net平台和C#编程)第七章.上机练习.20170412
- x509代码实例java_Java X509AttributeCertificate.getIssuer方法代码示例
- 面向.NET开发人员的Dapr——俯瞰Dapr
- 艾伟:ASP.NET跨页面传值技巧总结
- fastjson 添加key value_FastJson迁移至Jackson
- python_10 迭代器和生成器
- 如何用EasyRecovery恢复中毒U盘中丢失的文件
- MyBatis-Plus 分页查询以及自定义sql分页
- 正在配置更新请勿关闭计算机怎么办,电脑开机“显示正在配置更新请勿关闭计算机”该怎么办?...
- Required request body is missing 错误解决,400状态码
- Image-Guided Navigation of a Robotic Ultrasound Probe for Autonomous Spinal Sonography Using a
- 手机APP测试注意点
- [ JAVA ] 共有前缀
- vs2010+opencv2.4.9配置========重点说明
热门文章
- android http 302重定向 实现,Android httpClient自动处理302重定向
- 数据库:PostgreSQL:客户端安装
- 【教程】基于FlashBuilder创建的FLEX项目使用教程精简版
- 疯狂Java讲义(阅读笔记)(第一章)
- 矩阵理论(一)基本概念的个人理解
- 手机抢答器正在替代传统抢答器
- 源代码HTML5五子棋小游戏web开发
- 《计算机算法设计与分析 第4版 (王晓东) 课后答案[1-9章]》pdf版电子书附下载链接
- 资源 | 最新版区块链术语表(中英文对照)
- android javacv,【首发】AndroidStudio配置JavaCV环境