iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
1
自我挑戰組

做動畫?!抱歉了時間,但我真的需要那個酷東西 ฅ^•ω•^ฅ系列 第 10

鐵人賽Day10-第六章:動畫2.3-移動中的車子3

那麼,今天就來將我們的車子做得更加完善精緻吧~

10.先來幫車窗玻璃加點光點吧~

(1).先畫好光點的圖,一樣扔進去做好該做的事(也可以直接在上面畫啦,看個人習慣)

https://ithelp.ithome.com.tw/upload/images/20200923/20130312fwiJ7PbdS3.png

(2).將兩個光點預集合(你也可以先做完再預集合也許會更輕鬆W)

https://ithelp.ithome.com.tw/upload/images/20200923/201303126rruzRZH19.png

(3).再來我們要讓光點有種跟著車子移動、晃動的感覺,所以我們要移動光點,找到Position,在時間線最一開始的地方打開碼表。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312XvZ5NO3Gkn.png

(4).到下一個時間線將你的光點往右拖拉獲取下一個關鍵針

https://ithelp.ithome.com.tw/upload/images/20200923/20130312VD5CvicAcG.png

(5).循環剛才做好的部分,這次我們用雙向循環loopOut(type="pingpong")
https://ithelp.ithome.com.tw/upload/images/20200923/20130312cQENJFlwf1.png

(6).當然光點在實際畫面上移動時大小一定不同,於是我們進到光點裡去調整,找到Scale,一樣我們碼表開在時間線最開始。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312GjcgcvLScp.png

(7).在與前面移動的第二個時間點調整大小

https://ithelp.ithome.com.tw/upload/images/20200923/20130312y7DvLDjWMp.png

(8).這時候發現他的位子有點偏移,調整他的Position至適當位置。當然,時間點跟剛才一樣。

https://ithelp.ithome.com.tw/upload/images/20200923/201303126R16mACqEH.png

(9).這兩個步驟我們一樣使用雙向循環。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312yp9etXqsFX.png

(10).再來我們回到主集合裡面的光點預集合圖層,我們要調整他的透明度讓他看起來更貼近現實。時間點一樣。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312nady8eUAJ0.png

(11).下一個時間點調整到10%

https://ithelp.ithome.com.tw/upload/images/20200923/20130312SK216RGk1u.png

(12).一樣做雙向循環,這樣光點的部分就完成啦!

https://ithelp.ithome.com.tw/upload/images/20200923/20130312J7IshdFoZp.png

11.最後,如果你覺得昨天做的速度感效果很麻煩的話,也有較簡單的方式

(1).畫三條藍色系粗細不一的線在車後面

https://ithelp.ithome.com.tw/upload/images/20200923/20130312lxzFIHRa8O.png

(2).選擇“速度上”,一樣找到他的Transform,箭頭下拉找Position跟Scale。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312Ke2J0saOda.png

(3).這兩個我同時一起做,首先先將他位置往後拉。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312SiMsr0M0f8.png

(4).將Position第一個關鍵針拉到第二個時間,並將時間線拉到最前面調整Scale。

當然,這兩個一樣做循環,這次我使用的是單向循環loopOut(type = "cycle")。
https://ithelp.ithome.com.tw/upload/images/20200923/201303128Gpem60dAY.png

(5).其他兩個也做同樣的事並調整。

https://ithelp.ithome.com.tw/upload/images/20200923/20130312nNv8UVO0oO.png

12.最後,讓輪子也上下動幾下就完成了!當然循環不能少喔!

這裡我使用雙向循環loopOut(type="pingpong")
https://ithelp.ithome.com.tw/upload/images/20200923/201303128sV54otncT.png

完成品長這樣~

https://lottiefiles.com/share/mihzvyft

那今天就先這樣摟,明天我們將進入下一個主題~有任何指教或想法都可以在下面留言給我喔!!!


上一篇
鐵人賽Day9-第六章:動畫2.2-移動中的車子2
下一篇
鐵人賽Day11-第七章:動畫3.1-倒滿水杯1(lottie版)
系列文
做動畫?!抱歉了時間,但我真的需要那個酷東西 ฅ^•ω•^ฅ30

尚未有邦友留言

立即登入留言