fbpx

《AE教學》投票開票百分比條動畫教學!表達式算式運用!

哈囉!又到了快樂的教學時光,

提醒大家1月11日就是總統大選啦!

記得返鄉投票哦~

今天要來教大家如何用表達式作出

簡易算式來製作開票的即時百分比換算長條圖!


首先先匯入素材:

你可以自己幫開票畫面排版,留出一些空位來放數字以及長條圖。

用文字工具在畫面上先打上0,

安排好位置並讓文字靠右對齊。

可以先把兩個文字圖層命名為A、B,

方便職之後辨識。

接著替A加入Slider效果。

可以右鍵Slider > Rename幫Slider重新命名為A。

接著打開A圖層Text > Source Text,按住Alt右鍵點擊小碼錶叫出表達式視窗。

利用與表達式同排的Parent工具拖曳至Slider「A」上。

如此一來只要改變Slider「A」的數值文字就會跟著變化了!

式著設置兩個關鍵影格看看,可以發現小數點在亂跳。

可以在剛才的表達式最後發加上.value.toFixed()。

數字就不會出現小數點囉!

底下的另一組數字也是同樣的作法,

可以將Slider命名為B,

設置一些關鍵影格讓數字開始會動,

A、B這兩組數字就算完成囉!

接下來要製作長條圖的部分,先用矩形工具拉出兩個長方形,

拉出的長度為預想100%的最大長度。

選取長方形點擊S叫出Scale。

Alt+右鍵小碼錶叫出表達式視窗,

我們需要讓長條的x軸為A在A、B兩個數字相加中所佔的百分比長度,

因此我們先輸入前兩排來定義A、B分別為甚麼,可以先打出等號待會再來個別定義他們。

A =
B =
x = (A/(A+B))*100;
y = value[1];
[x,y]

第三排的那組算式代表x為A在A+B中的百分比,之後會隨著A、B的變化來改變長度,

第四排y = value[1]代表y為原本的數字,另外[0]代表原x值、[2]在3D物件中代表z值。

最後一排[x,y]是要告訴AE這裡的x、y座標我們分別用x、y來表示。

接著將游標停在A = 之後,並用Parent工具拖曳至Slider「A」,

停在B = 之後拖曳至Slider「B」,

完成定義A、B的動作。

目前表達式為這樣:

最後記得在每一排的最後補上「;」來區分每一排的表達式,

檢查沒有出現黃色三角形警示符號,表達式就算完成囉!

可以將表達式複製到另一個長方形上,

並將第三排的x = (A/(A+B))*100;

改為x = (B/(A+B))*100;

這麼一來這兩組數字的鰾話就會帶動長條的百分比長度鰾話囉!

在做點裝飾就算大功告成囉!

另外也可以製作三組候選人的開票效果!

只需要定義3組數字A、B、C

並將各組的x算式改變一下,

例如第三組「C」的算式為x = (C/(A+B+C))*100

就完成囉!

此教學專案檔下載(cc 2018以上):

Share on facebook
分享至FB
Share on telegram
分享至TG

解鎖站內所有需密碼的內容

時事特效教學 | 讓你學會最新特效

隨機文章