提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
※ 码字截图啥的挺辛苦,转载请注明作者与出处,阿里嘎多※
大家嚎!我是UI中国的烨翔君,第二篇笔记来聊一聊AE的表达式,翔君和许多小伙伴一样也是一路自学走过来的,当啃到AE表达式这里发现网上学习的资料少之又少,而且都是东一耙子西一扫帚;翔君想在这系统的整理出一篇关于学习AE表达式的正确姿势,分享给大家也供自己平时查阅,希望这篇笔记能帮到像我一样在自学道路上一直摸索前行的童鞋们 么么哒~
一说到代码可能是大部分设计师都不怎么愿意涉及的知识,但是其实小伙伴们只需要掌握一些简单的表达式基础知识就能让你平时的工作学习事半功倍~曾经看到过一个UI中国设计师小伙伴的签名是“别闹,我会魔法!”用到这里在恰当不过了;其实掌握了一定的表达式你真的可以从一个“设计师”变身为“法师”!因为表达式就是你的咒语 (ง •̀_•́)ง ~
本篇笔记讲的表达式以AE中应用为主,但是一些知识点还是可以触类旁通的应用到其他的地方;对于知识的理解,个人觉得如果你只把它当做书本上的定理公式,那它永远都是死的;但是如果你稍微动一动小脑瓜,打开脑洞或许它真的可以成为你的秘法宝典呦~“法师” ( ̄y▽ ̄)~
一、表达式的使用
AE表达式基于JavaScript 语言,应用也很简单按住 alt(option)键 点击图层属性前面的码表,当属性文字变为红色时,表达式激活,单击表达式字段以进入文本编辑模式;按数字小键盘上的 Enter 键或在表达式字段外部单击退出编辑模式。
激活表达式后会出现出现四个图标,接下来对这四个图标一一说明;
1、表达式开关按钮:控制表达式的开关的(= =b这TM用你说);关闭后对应属性将不再受到表达式的影响。
2、表达式图表;当你激活表达式图表后,在图表编辑器内就能看都受表达式影响后的属性速度。
翔君是在位置属性上添加的简单的抖动表达式(wiggle),下图速度图表中深红色直线表示的是原位置属性速度,而浅红色是受表达式影响后的属性速度。
3、属性关联器(将参考插入目标):这货用法和AE中“父子关系的橡皮筋”差不多,比如下图我想在绿色小方块的位置属性上加上白色背景的位置属性,但是又不会写白色图层的位置表达式,这时候用关联器就方便多了。
4、表达式语言菜单:AE的表达式比较多,不太好记所以AE就自带了一个菜单可以直接选择调用;
5、表达式错误提示:当你编辑的表达式出现错误是,AE会弹出下图对话框,提醒你表达式哪一行什么属性出现了错误,同时在四个基础按钮前会出先一个黄色警示标志。
二、表达式的基础语法
表达式是由一行一行的语句构成的,每个语句以一个分号“;”结尾,当然AE表达式允许你忽略分号,不过在每个语句后面添加分号,是一个好的习惯。
1、运算符与优先级
先从表达式的运算符与优先级说起,javascript的运算符有很多,在这就挑咱用得到的聊,有兴趣的小伙伴可以查看 运算符优先级 ;就像小时候学的“先乘除,后加减”一样;表达式的计算也有先后顺序,顺序如下表最上面的优先计算;
这里特殊说明几个不好理解的运算符:
【1】“取模”,其实就是求余数;例如 a=5%2 那么 a 的值就是 1 。
【2】在表达式语言中“=”并不是“等于”的意思,而是将“=”号右边的值赋给左边,例如
a = 1 那么变量 a 就等于 1;而“==”才是等于的意思。
【3】“++”和“--”为“自加”“自减”运算,以自加为例 a=1 ; a++ ; 这时 a 的值就自加为 2,自减同理;要注意的是自加自减运算符的“前置”与“后置”的优先级、不同。
【4】关于逻辑运算符“&&”与,"丨丨"或,“!”非,属于判断型的运算的,在这先不做展开。
2、关于表达式的标注
有的时候表达式很复杂不太容易看懂的时候就可以用到标注告诉别人写的这一堆玩意到底都有啥用,增加可读性,同时它不会被运行,直接被AE忽略掉。_(┐「ε:)_
【1】单行注释:两个斜杠 // 可以注释掉同一行后面的所有内容。
【2】多行注释:可以用 /* 和 */ 把要注释的内容括起来,这种方式可以注释多行内容。
例如:a = 1+1;// a 等于 2 = =b 这么简单还要写注释
/* (。-`ω´-)~那好,请听下一题 */
a = “你瞅啥!”;
b = “瞅你咋地!”;
c = a + b ;// (╯‵□′)╯︵┻━┻ 这TM能相加吗!能!c 等于“你瞅啥!瞅你咋地!”
3、变量与维度
别一说到“变量”就感觉懵逼,其实小学时候算数题中的“x”“y”就是咱们接触最早的变量了。变量就像是个盒子用来储存数字用的,可能有的小伙伴会问了“你TM标注里举例的那是数吗 (╯‵□′)╯︵┻━┻ ”其实也是一串“数字”储存在电脑里,只不过变量类型不同而已,变量类型常见的有四类:
【1】数值:例如数字 9.8, 98, 998 啥的
【2】字符串(一定要用引号抱起来才是串!):例如“你瞅啥!”,“瞅你咋地!”
【3】布尔值:判断对错的布尔类型 true 和 false ,也就是对或错,不过通常以二进制表示“0”代表错,“1”代表对。
【4】数组:这里在只谈一维数组,对多维数组感兴趣的小伙伴可以去文章末尾的链接自行学习这就不做展开了;(数组一定要用“ [ ] ”包起来!组内成员用“ , ”隔开!)
例如:a =[18,27,36] ;x = a [0];y = a [1] ; z = [2] ; // x 等于 18,y 等于 27,z 等于 36
数组内也可以装其他变量,例如:b = [“你",“瞅”,“啥”];
而维度则是一个变量里面装了几个“属性”下图是官方给出的例子;引用 表达式基础知识
4、逻辑运算(这里的确会让人蒙圈= =b)
好啦,在这里开始讲在运算符哪里略过的逻辑运算符,常用的有三类;
【1】与逻辑;形式为 条件一 && 条件二 ;当前后两个条件同时成立时,AE就会判断为正确,返回布尔值 true,也就是“ 1 ”(“1”表示 true,“0”表示 false 上面讲过哒~);如果两个条件中有一个及以上不成立则返回布尔值 false ,也就是“0”(大白话:就是两个条件都对才算对╮(╯▽╰)╭说的那么麻烦~)。
例如:“钓鱼岛是中国的”&&“苍井空是世界的”;//两条语句同时成立,返回“1”
"翔君是个大帅逼~"&& 3 == 1+1 ;//显然 1+1 不等于 3 ,返回“0”
【2】或逻辑;形式为 条件一 || 条件二 ;当前后两个条件有一个成立就返回布尔值 true,否则返回 false;(大白话:两个条件有一个对就对~)
例如:3!= 1+1;|| 2 == 3;// 3 不等于 1+1 成立,返回 “1”
3 == 1+1;|| 2 == 3;// 3 两个条件都不成立,返回 “0”
【3】非逻辑;形式为 !条件一;“非”就是取反的意思,
例如:!(998>98);//语句是正确的所以布尔值为“1”,取反布尔值为“0”
接下来是一些常用的判断性的语句
【4】if(条件一) { 结果一 } else { 结果二 }
翻译成大白话就是“如果(条件一),那么(结果一);否则(结果二)”;其实和小学时候学的造句差不都的~~。例如:if(工作日) { 老子就得滚去上班; } else { 睡到自然醒~; }
if...else...语句需要注意的是:就像小学语文造句一样,没有如果哪来的否则~。所以语法规定 if 可以单独使用但是 else 不行。
下面提供几个关于表达式学习的网站供小伙伴们查阅:
w3school 在线教程 http://www.w3school.com.cn/
表达式语言的引用 https://helpx.adobe.com/cn/after-effects/using/expression-language-reference.html
表达式基础知识 https://helpx.adobe.com/cn/after-effects/using/expression-basics.html
Mozilla 开发者网络 https://developer.mozilla.org/zh-CN/
为了方便消化,在这先扯这么多,之后还会在整理出一篇关于常用表达式的笔记;AE表达式看似枯燥繁琐,然额学起来并不是很难;“眼睛是懒蛋手是好汉!”多学点东西总是好的,技多不压身嘛~
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册