《Ae教學》【搞什麼系列】番外2-Ae運算 (運算子)_AE表達式(expression)

更新 發佈閱讀 9 分鐘
【搞什麼系列】番外2-Ae 運算(運算子)

【搞什麼系列】番外2-Ae 運算(運算子)


叮咚! 村長的補課時間!今天來說明運算的那些事!



1+2 "1+2" 兩個咒語的差別在哪裡?
建立 2 個文字圖層,在 Source Text 分別使用上面兩個咒語,結果如下:

raw-image
運算與字串

運算與字串

1+2 是運算,而用 "" 引號中為字串。
提到運算,就會有運算元、運算子。


什麼是運算元、運算子?

1+2
意思就是:運算元(1) 運算子(+) 運算元(2)



在表達式中做運算需要宣告變數,不僅可以讓做的事情更多,也比較不容易產生錯誤,那如何宣告變數呢?

宣告變數的方法

let 是什麼?

宣告一個只作用在當前區塊的變數,初始值可選擇性的設定。


var 是什麼?

宣告一個全域性變數,同時可以非強制性地賦予一初始值。


var、let 差異?

let 可以宣告只能在目前區塊、階段或表達式中作用的變數。而 var 則是定義了一個全域變數,或是在整個 function 而不管該區塊範圍。


運算子常用類型

賦值運算子(如:=)

一個賦值運算子將基於其右方的運算元的值賦予其左方的運算元。
最簡單的賦值運算子是等於(=),它將賦予左方運算元與右方運算元相同之值。 也就是,x = y 會把 y 的值賦予給 x。

基礎類型

類型 簡化表達式 意義

  • 賦值  x = y x = y
  • 加法賦值 x += y x = x + y
  • 減法賦值 x -= y x = x - y
  • 乘法賦值 x *= y x = x * y
  • 除法賦值 x /= y x = x / y
//賦值
var a = 10;
a
//加法賦值,意思為 a = a + 15
var a = 10;
a += 15
//減法賦值,意思為 a = a - 15
var a = 10;
a -= 15
//乘法賦值,意思為 a = a * 15
var a = 10;
a *= 15
//除法賦值,意思為 a = a / 10
var a = 10;
a /= 10
賦值運算子

賦值運算子



比較運算子 (==、>=……)

比較運算元並基於比較的結果回傳邏輯值。
運算元可以是數字,字串,邏輯,或物件的值。

  • 等於 (==)
    假如運算元等價就回傳 True。不管比較運算元的兩邊是否為同型態。
//等於 (==),比較運算元的兩邊為相同型態
var a = 10;

if ( 10 == a ){
true
}else{
false
}
//等於 (==),比較運算元的兩邊為不同型態,""引號內型態為字串
var a = 10;

if ( "10" == a ){
true
}else{
false
}

不等於 (!=)
假如運算元不等價就回傳 True。不管比較運算元的兩邊是否為同型態。

//不等於 (!=),比較運算元的兩邊為相同型態
var a = 10;
var b = a-5;

if ( a != b ){
true
}else{
false
}
//不等於 (!=),比較運算元的兩邊為不同型態,""引號內型態為字串
var a = 10;
var b = a-5;

if ( "a" != b ){
true
}else{
false
}
等於 (==)、不等於 (!=)

等於 (==)、不等於 (!=)


  • 嚴格等於 (===)
    假如運算元具有相同型態且等價則回傳 True。
== 與 === 的差別
===(嚴格相等) 比較兩個值,而被比較的兩個值都不會轉換成其他型別。如果值是不同型別,就會被視為不相等
//嚴格等於 (===)
var a = 10;

if ( 10 === a ){
true
}else{
false
}
//嚴格等於 (===),因比較運算元的兩邊為不同型態,""引號內型態為字串
var a = 10;

if ( "10" === a ){
true;
}else{
false
}
  • 嚴格不等於 (!==)
    假如運算元具有相同型態但不等價,或是具有不同型態,回傳 True。
嚴格等於 (===)

嚴格等於 (===)

  • 大於 (>)
    假如左方運算元大於右方運算元,回傳 True。
  • 大於或等於 (>=)
    假如左方運算元大於或等於右方運算元,回傳 True。
  • 小於 (<)
    假如左方運算元小於右方運算元,回傳 True。
  • 小於或等於 (<=)
    假如左方運算元小於或等於右方運算元,回傳 True。

備註: => 不是運算子,是 箭頭函式。


算術運算子 (如:+ - * /)

以數值(文字或變數也可以)作為其運算元,並回傳單一數值。
最常見的算術運算元是 加法 (+),減法 (-), 乘法 (*),及除法 (/)。

除了標準的算術運算子外 (+, -, * /),下面再舉例幾種

  • 增加 (++)
    一元運算子。 將運算元增加 1。假如使用在運算元之前 (++ a),會運算元回傳增加 1 後的值;假如使用在運算元之後 (a ++), 會回傳運算元加 1 前的值。
//11
var a = 10;
++ a
//10
var a = 10;
a ++
  • 減少 (--)
    一元運算子。 將運算元減少 1。回傳值的情況與增加運算元相同。
//9
var a = 10;
-- a
//10
var a = 10;
a --
增加 (++)、減少 (--)

增加 (++)、減少 (--)

  • 減號 (-)
    一元運算子。回傳運算元的負數 例如 a 是 10,-a 回傳 -10。
//-10
var a = 10;
- a
  • 加號 (+)
    一元運算子。嘗試將運算元轉換成數字,假如它還不是數字的話。例:+"10" 回傳 10。 +true 回傳 1
//10
var a = "10";
+ a
  • 指數運算子 (**)
    計算以 a 為底的 b 次方。例如:a ** 2 回傳 a2 的運算結果。
//100
var a = 10;
a**2
減號 (-)、加號 (+)、指數運算子(**)

減號 (-)、加號 (+)、指數運算子(**)


邏輯運算子 (&&、||、!)

通常被用於布林(邏輯)值; 使用於布林(邏輯)值時,它們會回傳布林型態的值。
然而,&& 和 || 運算子實際上是回傳兩指定運算元之一,因此用於非布林型態值時,它可能會回傳一個非布林型態的值。

  • AND (&&)
    && 在兩個運算元都是 True 時才會回傳 True,否則回傳 false。
// && 兩邊都是true​,回傳 true​
var a = 10;
var b = 30;

if ( a == 10 && b == 30 ){
true;
}else{
false
}
// && 一邊為 true,一邊為 false​,回傳 false
var a = 10;
var b = 30;

if ( a == 10 && b == 20 ){
true;
}else{
false
}
  • OR (||)
    || 在兩個運算元有任一個是 True 時就會回傳 True,否則回傳 false。
// || 一邊為 true,就會回傳 true
var a = 10;
var b = 30;

if ( a == 10 || b == 20 ){
true;
}else{
false
}
  • NOT ( !)
    ! 運算式假如單一個運算元能被轉換成 True 時,回傳false,不然回傳 true。
//只要 true 時,就回傳 false
var a = 10;
var b = 30;

if ( ! ( a == 10 && b == 30) ){
true;
}else{
false
}
邏輯運算子

邏輯運算子



✴️村長的宣傳時間✴️

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


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


留言
avatar-img
🛸 Fei 起來的動態館 🛸
97會員
96內容數
嗨~我是 Fei,動態設計師。 會在這裡放一些跟動態製作(Ae)相關的文章,歡迎來看看喔! - 合作信箱|x.fei.4044@gmail.com
2024/08/05
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
2024/08/05
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
2024/07/01
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
2024/07/01
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
2024/06/03
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
2024/06/03
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
看更多
你可能也想看
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
賽勒布倫尼科夫以流亡處境回望蘇聯電影導演帕拉贊諾夫的舞台作品,以十段寓言式殘篇,重新拼貼記憶、暴力與美學,並將審查、政治犯、戰爭陰影與「形式即政治」的劇場傳統推到台前。本文聚焦於《傳奇:帕拉贊諾夫的十段殘篇》的舞台美術、音樂與多重扮演策略,嘗試解析極權底下不可言說之事,將如何成為可被觀看的公共發聲。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
柏林劇團在 2026 北藝嚴選,再次帶來由布萊希特改編的經典劇目《三便士歌劇》(The Threepenny Opera),導演巴里・柯斯基以舞台結構與舞台調度,重新向「疏離」進行提問。本文將從觀眾慾望作為戲劇內核,藉由沉浸與疏離的辯證,解析此作如何再次照見觀眾自身的位置。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
本文深入解析臺灣劇團「晃晃跨幅町」對易卜生經典劇作《海妲.蓋柏樂》的詮釋,從劇本歷史、聲響與舞臺設計,到演員的主體創作方法,探討此版本如何讓經典劇作在當代劇場語境下煥發新生,滿足現代觀眾的觀看慾望。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
《轉轉生》為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,融合舞蹈、音樂、時尚和視覺藝術,透過身體、服裝與群舞結構,回應殖民歷史、城市經驗與祖靈記憶的交錯。本文將從服裝設計、身體語彙與「輪迴」的「誕生—死亡—重生」結構出發,分析《轉轉生》如何以當代目光,形塑去殖民視角的奈及利亞歷史。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第八章-畢業考試,搞什麼系列,最終章,學會了你就可以從新手村畢業囉! Ae 表達式(expression) - Math ˙如何只出現整數? ˙Math.round() ˙Math.ceil() ˙Math.floor()
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第七章-懸賞,快來幫幫村長!學會 Ae 表達式 - function ˙function (函數)是什麼? ˙函數應用在文字圖層上 ˙函數應用在 Position 上 ˙將位置限制在 Composition 範圍內
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 3,主要是一些概念的補充,介紹陣列。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 2,主要是一些概念的補充,介紹了運算(賦值運算子、比較運算子、算術運算子、邏輯運算子……)。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習AE表達式。】 本文是番外篇 2,主要是一些概念的補充,介紹了運算(賦值運算子、比較運算子、算術運算子、邏輯運算子……)。
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第六章 請勇者們前往驅離地鼠。學習 if / else 如何使用! ˙if/else 是什麼 ˙Checkbox 控制 Opacity ˙Null Object 控制 Opacity ˙Position 控制 Opacity
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第六章 請勇者們前往驅離地鼠。學習 if / else 如何使用! ˙if/else 是什麼 ˙Checkbox 控制 Opacity ˙Null Object 控制 Opacity ˙Position 控制 Opacity
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第五章 煉金術!賺錢致富! ˙index 是什麼? ˙index 應用在 Rotation 上 ˙index 應用在 Position 與 Scale 上 ˙如何製作 Fake 3D? (偽 3D 圖形)
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習 Ae 表達式。】 - 第五章 煉金術!賺錢致富! ˙index 是什麼? ˙index 應用在 Rotation 上 ˙index 應用在 Position 與 Scale 上 ˙如何製作 Fake 3D? (偽 3D 圖形)
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習Ae表達式。】 - 第四章 出門探險,必備燈! ˙random( 最大值 ) ˙random( 最小值 , 最大值 ) ˙random() 應用在 Scale 上 ˙gaussRandom() 是什麼?
Thumbnail
【這個系列,目標是以比較輕鬆的方式讓大家一起學習Ae表達式。】 - 第四章 出門探險,必備燈! ˙random( 最大值 ) ˙random( 最小值 , 最大值 ) ˙random() 應用在 Scale 上 ˙gaussRandom() 是什麼?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News