《Ae教學-if/else》【搞什麼系列】第六章-地鼠之亂_AE表達式(expression)

更新於 發佈於 閱讀時間約 7 分鐘
【搞什麼系列】第六章-地鼠之亂(if/else)

【搞什麼系列】第六章-地鼠之亂(if/else)

【村長 Fei 發布公告】
近日在村外往東 300 公尺重植幼苗的小花園,出現大量地鼠搗亂,請勇者們前往驅逐,保護自己種植下去的魔力幼苗!


勇者!你看到我發布的公告了嗎?最近地鼠困擾著村民們,他們肆無忌憚的跑進東邊小花園,真是太可惡了!要麻煩你去清除他們了!我來教你趕走他們的方式吧!


1. 新手的主線任務

if/else 是什麼?

是一個布林表達式,判斷條件是否成立,成立則返回 true 不成立則返回 false 。
if 區塊:當條件為 true 時執行的代碼。
else 區塊:當條件為 false 時執行的代碼。

if(){
100;
}else{
20;
}

if(狀態/條件){
值1;
}else{
值2;
}


用 Checkbox 控制 Opacity

村長拿出一個按鈕 (形狀圖層)。
首先,在 Effect & Presets 中找到 " Checkbox Control " 套用到形狀圖層上

Checkbox Control 拖曳至形狀圖層上

Checkbox Control 拖曳至形狀圖層上


在該圖層的 Opacity 中使用以下咒語:

//宣告變數,名稱為checkbox​
var checkbox = effect("Checkbox Control")("Checkbox");

//判斷​checkbox
if(checkbox == 1){
100;
}else{
20;
}
在 Opacity 中使用 if/else

在 Opacity 中使用 if/else

解析程式碼的意思

解析程式碼的意思

①拖曳方法,之前有教過,忘記了可以點這看看

因為 if/else 需要有狀態,需先宣告一個 var(變數),var 連接給 Checkbox,再來就是交給 if/else 來進行判斷。

假如​變數 checkbox 為 1(是),透明度數值為 100;否則,透明度數值為 20

用 Checkbox 控制 Opacity

用 Checkbox 控制 Opacity


補充:像上圖的 Checkbox 開關顯示要怎麼做呢?(請繼續看下去...)

Null Object 控制 Opacity

製作未勾選 / 已勾選框

製作未勾選 / 已勾選框

創建:Null Object、已勾選框(形狀圖層)、未勾選框(形狀圖層)。


在 Effect & Presets 中找到 " Checkbox Control " 套用到 Null Object 上

新增一個 Checkbox Control 給 Null Object

新增一個 Checkbox Control 給 Null Object

"已勾選"的 Opacity 使用以下咒語:

//"控制"為Null Object的名稱,可自行更改​
var checkbox = thisComp.layer("控制").effect("Checkbox Control")("Checkbox");

//如變數​checkbox為1,透明度為100,否則透明度為0
if(checkbox == 1){
100;
}else{
0;
}


"未勾選"的 Opacity 使用以下咒語:

//"控制"為Null Object的名稱,可自行更改
var checkbox = thisComp.layer("控制").effect("Checkbox Control")("Checkbox");

//如變數​checkbox為0,透明度為100,否則透明度為0
if(checkbox == 0){
100;
}else{
0;
}

設定完後,就可以用 Null Object 裡的 Checkbox 控制勾選框的顯示狀態。



用 Position 控制 Opacity

先來看結果:球在下墜的途中,y 軸 170 時才會開始顯示,下墜到 900 時就會消失。

Y 軸位置控制 Opacity

Y 軸位置控制 Opacity

要怎麼做出效果?
先設 2 個 key 讓球從上到下移動,並在球的 Opacity 中使用咒語:

//宣告一個變數為​位置[1代表是y,0代表是x]
var y = transform.position[1];

//如y大於等於170及小於等於900時,透明度為100,否則透明度為0​
if( y >= 170 && y <= 900){
100;
}else{
0;
}

&& 為 and(和)的意思。(運算文章看這邊)

村長使用<翻譯蒟蒻>
因為顯示狀態是由 Position(位置)判斷,所以要先設一個變數連結 Position,再設定要顯示的區間 170 ≦ y ≦ 900



教完你上述的咒語,試試看做出簡易的打地鼠動畫吧!

用 if / else 試著做看看!

用 if / else 試著做看看!

(村長補充:此地鼠動畫的素材,最少需準備 1 隻地鼠、1 個坑。)


【公告】地鼠已經全部驅離!

勇者! 恭喜你成功驅離地鼠! 成功挽救了東邊小花園被破壞的命運,還記得你種下的一株魔力幼苗(第三章)嗎? 它已經長大蠻多的囉~來都來了,也去看看它吧!



恭喜你完成新手的主線任務-地鼠之亂
任務獎勵:個人稱號-打鼠王
(稱號。完成主線任務-地鼠之亂可獲得。頂著這個稱號所有的地鼠都會自動讓路!)


----------基礎學完了!如果還想繼續升級,請往下看!----------





2.小進階技巧

Opacity 根據時間變化

if (time < 2) {    //條件:判斷時間是否 < 2 秒
100; //是(true):前 2 秒透明度為 100
} else {
50; //否(false): 2 秒後透明度為 50
}
Opacity 根據時間變化

Opacity 根據時間變化


多條件判斷

Slider Control 控制圖層的 Opacity

slider = effect("Slider Control")("Slider");

if (slider > 80) { //Slider 值大於 80,透明度為 100
100;
} else if (slider > 50) { //Slider 值大於 50 且小於等於 80,透明度為 70
70;
} else { //Slider 值小於等於 50,透明度為 30
30;
}
用 Slider Control 控制圖層的 Opacity

用 Slider Control 控制圖層的 Opacity


巢狀結構

slider = effect("Slider Control")("Slider");

if (slider > 75) {
if (slider > 90) {
100; // Slider值大於 90,返回 100
} else {
80; // Slider值在 75 到 90 之間,返回 80
}
} else {
50; // Slider值小於等於 75,返回 50
}
巢狀結構

巢狀結構




✴️村長的宣傳時間✴️

📌最新動畫作品在這 ➡️ instagram
📌更新會比 IG 晚一天 ➡️ YouTube
📌追蹤✅、點❤️、分享🔗、收藏📂


合作請
私訊 Instagram
或寄信至 x.fei.4044@gmail.com


嗨~我是 Fei,動態設計師。 會在這裡放一些跟動態製作(Ae)相關的文章,歡迎來看看喔! - 合作信箱|x.fei.4044@gmail.com
留言
avatar-img
留言分享你的想法!
Fei-avatar-img
發文者
2024/11/23
📓翻新進度報告書24.11.23-第六章完成(🟢)提及了這篇文章,趕快過去看看吧!
Fei-avatar-img
發文者
2024/09/02
Ae 常用的 6 個表達式提及了這篇文章,趕快過去看看吧!
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第五章 煉金術!賺錢致富! ˙index 是什麼? ˙index 應用在 Rotation 上 ˙index 應用在 Position 與 Scale 上 ˙如何製作 Fake 3D? (偽 3D 圖形)
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇,主要是一些基礎的概念的補充,介紹了在 Composition 內使用文字工具,操作錨點工具和圖層置中畫面等功能。
【這個系列,目標是以比較輕鬆的方式讓大家一起學習Ae表達式。】 - 第四章 出門探險,必備燈! ˙random( 最大值 ) ˙random( 最小值 , 最大值 ) ˙random() 應用在 Scale 上 ˙gaussRandom() 是什麼?
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 - 第三章 種下屬於自己的"魔力幼苗",並用咒語(wiggle)灌溉他! ˙wiggle( , ) 是什麼? ˙wiggle 不同頻率,相同振幅 ˙wiggle 相同頻率,不同振幅 ˙wiggle 應用在 Opacity 上
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 - 第二章 不小心掉入了副本裡,該怎麼辦?一起來通關吧! ˙time; 是什麼? ˙time.toFixed(); 修正顯示到小數點第幾位數 ˙time; 應用在 Rotation 上 ˙time; 應用在 Position 上
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第一章我們就將迎來新夥伴喔!一起來學習loop怎麼用吧~ ˙ loopIn() 與 loopOut() ˙ loop 類型 ˙ 參數修飾詞 ˙ loopInDuration() 和 loopOutDuration()
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第五章 煉金術!賺錢致富! ˙index 是什麼? ˙index 應用在 Rotation 上 ˙index 應用在 Position 與 Scale 上 ˙如何製作 Fake 3D? (偽 3D 圖形)
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇,主要是一些基礎的概念的補充,介紹了在 Composition 內使用文字工具,操作錨點工具和圖層置中畫面等功能。
【這個系列,目標是以比較輕鬆的方式讓大家一起學習Ae表達式。】 - 第四章 出門探險,必備燈! ˙random( 最大值 ) ˙random( 最小值 , 最大值 ) ˙random() 應用在 Scale 上 ˙gaussRandom() 是什麼?
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 - 第三章 種下屬於自己的"魔力幼苗",並用咒語(wiggle)灌溉他! ˙wiggle( , ) 是什麼? ˙wiggle 不同頻率,相同振幅 ˙wiggle 相同頻率,不同振幅 ˙wiggle 應用在 Opacity 上
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 - 第二章 不小心掉入了副本裡,該怎麼辦?一起來通關吧! ˙time; 是什麼? ˙time.toFixed(); 修正顯示到小數點第幾位數 ˙time; 應用在 Rotation 上 ˙time; 應用在 Position 上
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第一章我們就將迎來新夥伴喔!一起來學習loop怎麼用吧~ ˙ loopIn() 與 loopOut() ˙ loop 類型 ˙ 參數修飾詞 ˙ loopInDuration() 和 loopOutDuration()
你可能也想看
Google News 追蹤
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
After Effects 的內建效果種類繁多,讓人有時難以選擇該使用哪個功能或不清楚它們的具體用途。常看到的快速模糊、高斯模糊、徑向模糊、銳化等效果都可以在 Blur & Sharpen 中找到喔!
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 2,主要是一些概念的補充,介紹了運算(賦值運算子、比較運算子、算術運算子、邏輯運算子……)。
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
After Effects 的內建效果種類繁多,讓人有時難以選擇該使用哪個功能或不清楚它們的具體用途。常看到的快速模糊、高斯模糊、徑向模糊、銳化等效果都可以在 Blur & Sharpen 中找到喔!
Thumbnail
這篇內容,將會講解什麼是「if else」,以及與「if else」相關的知識。包括if else的簡介、if、if else、else if、套娃式的if。
Thumbnail
這篇內容,將會講解什麼是表達式(Expression),什麼是陳述式(Statement)。有了這些概念,各位會更容易理解,要如何設計程式碼。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
此章節的目的是介紹Java程式語言中的流程控制結構,包括條件語句(if, else if, else)、三元運算子、switch語句,以及各種迴圈(for, foreach, while)。同時,也解釋了如何在迴圈中使用控制語句來改變程式的執行流程。每種主題都配有示例程式碼以幫助理解。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 2,主要是一些概念的補充,介紹了運算(賦值運算子、比較運算子、算術運算子、邏輯運算子……)。