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

Fei

發佈於搞什麼系列-從0開始學AE表達式

2025/03/31 更新2024/04/01 發佈閱讀 7 分鐘

【搞什麼系列】第六章-地鼠之亂(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 拖曳至形狀圖層上

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

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

//判斷checkbox
if(checkbox == 1){
	100;
}else{
	20;
}

在 Opacity 中使用 if/else

解析程式碼的意思

^{①拖曳方法，之前有教過，忘記了可以}^點這看看^。

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

假如變數 checkbox 為 1(是)，透明度數值為 100；否則，透明度數值為 20。

用 Checkbox 控制 Opacity

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

Null Object 控制 Opacity

製作未勾選 / 已勾選框

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

在 Effect & Presets 中找到 " 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

要怎麼做出效果？
先設 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 試著做看看！

^{(村長補充：此地鼠動畫的素材，最少需準備 1 隻地鼠、1 個坑。)}

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

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

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

_{----------基礎學完了！如果還想繼續升級，請往下看！----------}

2.小進階技巧

Opacity 根據時間變化

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

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 = 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
}