可以用PPT制作,在 PPT 動畫這個問題上,首先你要糾正2個觀念:
1】【PPT動畫太簡單了】不,它并不簡單,它非常強大。先發個國外牛人用PPT做的動畫視頻你們感受一下
designed by apple in california(PPT臨摹版)
(* Sina Visitor System 這是作者的微博,有提供原文件分享)
2】【PPT動畫很難?】不,PPT 動畫很好上手,從開始摸索,到做出這個核心玩法的 demo之間約為4個工作日,我幾乎是0基礎自己摸索自學的,前面的2天我還做了一系列的 UI 動效 和 另一個版本的demo
demo
demo是用PPT做的,耗時約為2個工作日(* 動畫内部分 UI 元件是通過Axure畫好之後輸出PNG,再用PS除背景得出的,因為答主有像素級的強迫症,正常人類可以忽略這條,PPT提供的元件類型已經可以滿足絕大部分的需要)
基本上隻要不是特别變态的核心玩法demo都可以快速做出來。
可以做一些用以示意的細節,但不要太較真,此類demo的核心價值應該是:快速驗證玩法邏輯!
回到問題的源點---------怎麼用PPT制作一個核心玩法demo?
1. 你必須有一個清晰的玩法模型在你的腦海之中,不然還整個屁啊 (メ`ノД´)ゴルァァァァ―
2. 分解模型,一般而言,動畫裡同一秒間都會并發好幾個事件,答主的思路是以事件為單位,逐個事件完成
3. 實例部分,以答主這個demo為例,在制作之初,我選擇了一個最能說明“時間”的事件來開始
(* 這裡是這段動畫事件所需用到的素材)
-------------------------------------------------------------
首先,我們插入素材
然後,我們看到的界面大概是這個樣子的,緊接下來,把動畫窗格也打開,這對于一段簡單的事件動畫來說沒什麼必要性,但它是一個好習慣,好習慣應該從入門的時候就先适應起來
(* 點擊綠色方框,可以對元件進行改名,當你的動畫複雜到有數十個元件的時候,你會發現對它們改名管理的重要性)(* 點擊綠色方框右側的眼睛标志,可以 隐藏\顯示 該元件,這個功能在制作一些比較複雜的動畫時會經常用到,因為元件一旦多起來,非但不易選中,而且很混亂)
再然後,我們開始添加第一個動畫了,打開PPT的動畫編輯界面,考慮到蠻多很可能新手不知道,我就送佛送到西,附張尋寶圖:
然後選擇一個動畫樣式,還記得我demo裡這兩個方塊怎麼移動的嗎?不記得了?快回去重新看demo,你試圖臨摹一個動畫之前,首先你必須把它所有表現細節看得滾瓜爛熟,這樣你才可以在制作動畫的時候了然于胸
「尼瑪,我已經把demo看得滾瓜爛熟了,我要繼續翻滾頁面閱讀」
好,我們來找一個跟需求相符的動畫模型
(* 如果你在選取動畫模型這一步過程中發現模型全都是灰的不能點擊,那說明一個問題-------你還沒選中元件啊,蠢貨,快去選上!)
添加完動畫模型之後,你會發現方塊已經可以動起來了,接下來要做的就是把它的運動路徑、速度、播放順序,調整到符合你要求的樣子
先是運動路徑,如果你跟答主一樣是個像素級精準的強迫症患者,你可以把 PPT 内的網格線、參考線、标尺全部打開,如果你是一個五大三粗的摳腳大漢,可以跳過這一步。
接下來,留意下圖綠色框的兩個箭頭,它們分别代表起始點和結束點,你可以通過鼠标點擊拖動來調整它們的位置,按住Shift來拖動,可以确保兩點始終維持水平的狀态
調整好運動路徑之後,我們再把方塊的移動速度和移動順序調整一下
(* 小技巧1:如果你希望 PPT 可以自動播放,那麼隻要把【動畫窗格】内第一個動畫的開始方式調整為“與上一動畫同時”即可)
(* 小技巧2:如果你的 PPT 動畫不是很複雜,沒有什麼并發的事件,那麼我推薦把動畫窗格内的事件都選用“上一動畫之後”,這樣的好處是你不需要逐一去調整事件的延遲時間,前提是你必須确定這段動畫沒有其它并發事件的存在,否則還是老老實實通過調“延遲時間”來控制播放順序吧)
調好之後,你現在看到的頁面應該是這樣的
2個方塊的運動軌迹設計跟10個方塊的運動軌迹設計是沒有區别的,所以做成這個樣子也毫無難度
可能看到上圖的時候你腦海中會出現2個疑問:
1. 為什麼有些方塊的運動軌迹是兩段的呢?2. 為什麼動畫窗格中除了 “―”這種動作外,還有一些 “紅色星星” 和 “綠色星星” 的動作呢,它們分别代表什麼,有什麼用?
讓我們回顧一下demo,demo有幾個事件:
1. 每隔一段時間刷出新的方塊,然後向右靠攏2. 方塊是會被點擊動作消滅的,如果被消滅的方塊處于中間位置,那麼在它左側的方塊會向右靠攏
ok,那麼問題解決了:
1. 為什麼有些方塊的運動軌迹是兩段的呢?
因為這些方塊右側的方塊在動畫過程中将被消滅,所以它會向右靠攏,第二段移動動作就是發生在此時的,這個視乎你自己的設定,也有可能某個方塊會發生三段甚至四段的移動。
(* 對單個元件添加多個動畫的方法很簡單,如下圖)
2. 為什麼動畫窗格中除了 “―”這種動作外,還有一些 “紅色星星” 和 “綠色星星” 的動作呢,它們分别代表什麼,有什麼用?首先我說明一下,PPT 把動畫模型分為了4個大類:出現、強調、消失、路徑,對于大部分元件來說,出現和消失都是必須的。動畫模型會在動畫窗格中根據自身的類型标記出來:
出現=綠色星星強調=黃色星星消失=紅色星星線條=運動路徑
還記得我們動畫裡方塊的出現是有一定的時間規律的麼,對就是這樣,所以你要給後面出來的方塊都添加上“出現”的方式,并設置好"出現時間",然後再給它們設定“消失”的方式,以及"消失時間"
都添加好之後,你就會看到類似于這樣的結果
(* 思考題:為什麼答主要把方塊垂直放置,而不是堆疊?從這個事件動畫的最終表現形式來看,這些方塊之間的關系應該是堆疊才對啊)
「心目中有自己的答案了麼?滾動看答主的動(jie)機(kou)」
原因很簡單,因為元件堆疊之後,運動路徑也會堆疊,這樣的話,如果在檢驗動畫(播放動畫)的時候發現有需要調整的地方,而想調整的時候就會發現,很難選中你想要選擇的原件
但是,這樣的問題在動畫制作到後期時會非常頻繁的遇到,難道就沒有其它更加科學的解決方法嗎?當然是有的
當我們需要制作比較複雜的動畫時,尤其是并發事件的時候,隐藏掉不必要的原件是非常有必要的,點擊上圖中紅框範圍内的“眼睛”圖标即可
那為什麼答主有這樣的方法還是要把方塊垂直排開而不堆疊後,隐藏元件來進行處理呢?
那樣做确實是可以的,隻不過因為答主比較懶,為了确保方塊之間的間距能夠符合預期,所以把它們垂直排開,調好動畫時間之後,逐一調整運動路徑确保它們之間的間距符合預期。
最後都調好了,再把它們疊一起,變成這樣
--------------------------------做好【方塊的出現\移動\消失\再移動】事件之後,我們來開始做第二個事件【角色運動】
其實非常簡單,從原理上來說,它跟方塊的移動,是一個道理,上圖你們看一看就明白了
幾個要點:(* 确認角色運動的起始時間點:由于我們把事件分拆來逐一處理了,所以給自己一個方法理清楚事件的并發事件非常重要,為什麼我在做demo的時候選擇先做【方塊的出現\移動\消失\再移動】事件,因為它對我來說就是一個時間軸-------當某方塊消失的瞬間,即是角色運動的起始時刻)
(* 确認角色運動的結束時間點:重要甚至比起始點更重要,它的意義在于讓你明确這個動畫事件的最大允許持續時間,亦即是決定了動畫播放速度)
(* 運動方式:視乎遊戲類型不同,對于運動方式的處理難度也不同,比如說我的demo裡這種程度的運動,簡直是小case,隻要拉個弧形運動路徑,調整一下就行了,調整方式詳見下圖)
圖1. 在這裡打開 【頂點編輯】 模式
圖2. 如果你會用PhotoShop的鋼筆工具,那麼恭喜你,這個是一樣的
圖3. 事實上你還可以直接拉伸白色圓點進行縮放,或者點擊綠色圓點進行旋轉
補充說明:做完這個運動路徑之後,你會發現角色可以在預定的時間點跳出去了,但不要忘了補一個角色回歸原位的運動路徑讓他“回家”
前幾天有人私信我問 “如果想做更複雜的角色動作怎麼辦,要用序列幀麼?” ,這個問題有點低級,但我還是回答一下吧,如果你對 Flash 動畫有所了解,你應該明白它主要是通過設定元件的運動路徑來實現角色運動的
我舉個栗子,如果你需求實現一組複雜的角色動作,首先你應該先把角色的模型弄得稍微複雜一點具體複雜度視乎你需要該角色做出怎樣複雜的動作了,“建模”完成後,記得給角色的各個部位命名,比如說這樣:
(* 就用 PPT 裡面插入幾個圓柱形實現的)
然後,就是給各個部件設置運動路徑啊,如果想做得流暢而富打擊感,那麼确實是挺複雜的,可是!!!你!别!深!陷!啊!快醒醒,這是一個demo,展現玩法邏輯的低保真demo,整那麼複雜幹嘛,能讓别人看懂你想做什麼不就得了
火柴人動畫有很多做得相當不錯的案例,但我實在不建議非美術專業人士去嘗試,我就轉給你們看看,别較真
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!