火星網校
AE交互動畫：動態長投影製作
發布時間：2018-11-17 19:57:24
AE表達式，天生具備數字的嚴謹和唯美，它帶給動畫靈動的生命力。在這篇文章裏我們一起來探尋數字掌控畫麵之美的技巧。
最終效果圖
技術要點
Ps 形狀工具、路徑查找
AE 表達式基礎、表達式綁定控製層、文字-編號、投影疊加深度疊加、 圖層混合模式
準備工作
在Ps或者AI繪製好圖形元素（如此處的鍾表和dribbble logo），按照這篇教程的思路整理好圖層，並導入AE得到素材合成。
構圖
Ctrl+N新建一個400x300的合成，將dribbble logo和時鍾拖到位置；
新建一個空文本圖層，添加效果-文本-編號，設置如下：
這樣我們就得到了一個可以自定字符樣式的時間碼；
此時的合成視圖應該是這樣的：
舞台視圖：
新建一個空對象作為控製層，並且添加效果-表達式控製-角度控製
在效果控件窗口對應屬性右擊，使屬性在時間軸上顯示，方便我們添加表達式。
在時間軸窗口按住Alt，左擊角度左側的秒表，給角度屬性添加如果所示的表達式Math.floor(time*10),表示對當前時間的十倍取整，我們隻需控製時間軸，使得到的值在0~360°之間即可。在該實例中，我們將投影的方向參數與之綁定（具體方法qing請翻看係列一），即可得到一個隨時間360°旋轉的投影；此外，大家注意到gif圖中的鍾表也在旋轉，它們也是和該值綁定的：
舞台效果圖如下
時間軸效果圖
注意到minute圖層的旋轉表達式最後乘了12，顯然，分針的速度是時針的12倍。
而在如下實例中：
該表達式所得值還可以和中間度數的文字源內容綁定。
下麵我們一起來做這個尖銳幹淨的動態的長投影
隻發布不說話，大家默默感受感受下（構圖完成後所得的"start"合成ctrl+D複製出來作為"shadow"合成，接下來操作均在"shadow"合成裏操作，保留"start"合成作為表層）
其實這樣做了以後，17個圖層是不夠的，我是以5px為單位疊加，會得到如下的結果
鋸齒感很明顯，追求完美的你怎麼能罷休呢？難道我們以1px為單位，像若幹年前前在PS裏麵做偽3D效果一樣？答案是否定的，因為從GUI到交互動畫設計的朋友PS都很熟悉，而AE又號稱是動態的PS，要消除這個鋸齒，靜態圖片的處理方法大家思考下。我的思路是，高斯模糊使鋸齒間距混合，Alpha色階調整使邊緣幹淨銳利。所以，新建兩個調整圖層，分別添加高斯模糊和色階效果：
得到如下效果：
添加上之前的構圖合成，可以得到：
可以看出邊緣有輕微的發光效果，是因為"shadow"合成裏使用了高斯模糊的緣故，除投影外源圖層是白色，不同於陰影的顏色所以發光了，解決的辦法很簡單，將shadow合成顏色疊加，統一原圖層和陰影的顏色。
新建一個合成，將"start"和"shadow"都扔進去，並且添加一個背景，添加顏色疊加效果，該效果綁定一個控製圖層，該控製圖層，添加 效果-表達式控製-顏色控製，並且添加關鍵幀動畫
大功告成！
PS
·大家可以給shadow添加蒙版並羽化使之有衰減效果；
·男神tczhang說這樣可以產生如太陽般光輝的長投影效果
我很喜歡，很風騷。男神就是男神！！但，我還是願意守住這份可控的、輕微的，小清新……
分享
上一篇 AE表達式製作手表指針動畫
华体会hth体育网
賞析
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
解析UI設計培訓的收費情況，為您提供明晰的培訓預算規劃建議。
-
本文討論了如何選擇最好的VR培訓中心，並特別介紹了火星時代教育的教學方法和優點。
-
在火星時代教育的專業插畫課程中，尋找成為優秀插畫師的最佳途徑。
-
火星時代的專業訓練能力，由經驗豐富的講師，深入淺出的教你如何學習或提高你的UE4設計技能。
-
UI設計學習培訓班哪家好: 選擇火星時代教育- 不僅傳授技術，更引領設計潮流
對於想要專業掌握UI設計的朋友們，選擇一個優秀的培訓班是關鍵。在這篇文章中，我們將解析火星時代教育為什麼是您理想的選擇，為您在......
-
探究全球頂尖的UE4數字展廳培訓基地，了解如何通過UE4實現虛擬現實、3D建模等技術來創造出充滿真實感的數字展廳。
