iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

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

鐵人賽Day19-中秋特輯!大家中秋節快樂!

大家好~又到了一年一度的中秋節啦!

蛤?你說是昨天?

昨天是準中秋節啦!沒看到今天月亮比較圓嗎?

今天應該算是複習單元吧。

昨天我們還放了一張賀圖(預告函)呢,那麼我們開始摟~

https://ithelp.ithome.com.tw/upload/images/20201002/20130312TtH9k1zVEc.jpg

1.打開AE,建立一個新的專案集合,我叫他月兔嘛哇嚕~

https://ithelp.ithome.com.tw/upload/images/20201002/20130312gDDf9jr6Ay.png

2.畫一隻兔子和一顆月亮....,放進AE裡面。

https://ithelp.ithome.com.tw/upload/images/20201002/201303127DfC6MT5ly.png

3.一樣,我們將要使用的圖層往左下角放。對了,今天比較特別,沒有要使用特別的特效或者移動描點其實要不要Create shapes from vector layer都沒太大問題。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312kA72BTzI3n.png

4.那我們將這裡都按一下,就能讓他在AE裡縮放還是能跟在AI裡面一樣的畫質。

https://ithelp.ithome.com.tw/upload/images/20201003/20130312JlGU395Y2C.png

5.那我們先移動月亮,讓他上下移動吧!

找到月亮-Transform-Position。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312q3b0GJRrK1.png

6.在動了兩下後我們給他雙向循環,偷懶一下。

Alt按著按要循環的指令的碼錶,貼上loopOut(type="pingpong")

https://ithelp.ithome.com.tw/upload/images/20201002/20130312b9hkRP3fnj.png

7.再來我們調整雲的透明度,畢竟雲的厚度會改變嗎!

找到雲4-Transform-Opacity。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312VjE5jitO7O.png

8.這裡做完一段也給他雙向循環,並且也要調整他的Position,讓他有漂浮的感覺。

這裡我給他的透明度是100%-20%-60%

https://ithelp.ithome.com.tw/upload/images/20201002/20130312ifGHyrrNro.png

9.這裡我們讓他到處飄再飄回來。記得飄慢點喔。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312gJ4jdgzGa2.png

10.當然,厚薄度還有大小問題呢!

找到Scale,我這裡給的數值是80%-150%-100%。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312Lk9XzXxp2a.png

11.我最喜歡偷懶,所以你會看到我都給他們雙向循環。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312oQY70VP2j3.png

12.這時我才想到,我想讓月兔的耳朵動起來,於是我還是把月兔Create shapes from vector layer了。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312zqB4sDhHjO.png

13.我們在我們在月兔旁邊下拉,找到兔子耳朵的部分,我們要旋轉他。

月兔-Content-Group15、16-Rotation。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312e4Eq7Yklfb.png

14.這時我們在上排工具列,找到這個圖示,這可以將控制的中點移動到想要的位置,我們將控制中點移動到兔子的耳根吧!

https://ithelp.ithome.com.tw/upload/images/20201002/20130312DKNf5MmzYo.png

15.在上排工具列找到這個旋轉圖是,開始進行旋轉。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312yrAZrS2cCk.png

16.Group15、16的都轉好以後,長這樣。在這裡解釋為什麼會是15、16,因為他的線跟色塊是分開算的。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312Lg0tdBg5hm.png

17.我想讓玉兔用跳的進來上月亮,我們先讓他出去一下下。

https://ithelp.ithome.com.tw/upload/images/20201002/201303126xaDiBAwqU.png

18.我要移動路徑,並且旋轉他,因此我們調整Position跟Rotation。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312yAnTexJUsW.png

19.我們置入星星及星星空圖層,我只想讓他在月兔跳上月亮時再閃爍,因此我將他的時間條直接拉短,從該秒開始。並且調整他的透明度讓他閃爍,只要0%-100%讓再讓他雙向循環就好了!

https://ithelp.ithome.com.tw/upload/images/20201002/20130312HOIVI9cJKl.png

20.我們整體做好就像這樣。

https://ithelp.ithome.com.tw/upload/images/20201002/20130312BB8tWF2n4R.png

21.我們這個算是Lottie動畫,還記得怎麼輸出嗎?

最上排Menu-Windows-Extensions-Lottiefiles,選擇你這個作品的專案集合名稱並Upload就可以嘍!

https://ithelp.ithome.com.tw/upload/images/20201002/20130312roHpbgqogf.png

這樣~就完成摟,成品會長這樣!

https://lottiefiles.com/share/iq4bzoys

這是送給各位的中秋節禮物,晚些我會將這包禮物(我畫的素材)放進來,大家中秋連假快樂摟!記得CC就好~

https://drive.google.com/file/d/11BRkZRlFOFVjkgLYRHEoq_-8kFXTv8kl/view?usp=sharing


上一篇
鐵人賽Day18-第八章:動畫4.3-蝌蚪蛻變過程2(研究過程插曲-Duik Bassel)
下一篇
鐵人賽Day20-第八章:動畫4.4-蝌蚪蛻變過程4
系列文
做動畫?!抱歉了時間,但我真的需要那個酷東西 ฅ^•ω•^ฅ30

尚未有邦友留言

立即登入留言