用「吃到」Demo 向你介紹酷酷動效的製作辦法

學會程序員會把你打死系列之 Principle 動效製作

Principle 是一個可以很快速製作 Cool 動畫的 App,學會這個神奇,程序員一定很樂意把你打死。我們在這裡,將使用我正在進行的項目「吃到」來介紹怎麼使用。

在往常的項目,一般使用 After Effect 這個軟件製作特殊動畫。當然,AE 是某些動畫的最佳選擇(軌跡動畫、特殊變形等)。但是,這裡將會介紹一個更為輕量和快速的過場動畫製作工具﹣Principle,它更為合適製作過場動畫,例如放大、簡單變形、半透明變化等,並且關心 ease。

最終效果

2016-12-30 15_54_43
Also Check in Dribbble

教程

前言

若要使用 Principle ,請認識清楚一下大概流程步驟。
1. 在 Sketch 繪製效果圖;
2. 建立專用的動效用版本,其中,以需要變化的圖形,并提至最高層。將大於畫布的圖形,使用蒙版工具,限制在畫布之內。
3. 啟動 Principle 工具,導入 Sketch 文件;
4. 點選對應圖形,類似 Xcode 拖動到下一場景。

大致流程如上,還有一個注意點。
Principle 自動變形處理依賴相同的圖層名稱,如果發生動畫跳動,就是一般在相同畫布內,有兩個同名圖層。

在 Sketch 繪製效果圖,以及建立動效專用版本;

Sketch 如何繪製效果圖就不多說了。

啟動 Principle 并導入

螢幕快照 2016-12-30 下午6.41.33

為了更方便大家學習,我錄製了一個簡短的視頻教程。

視頻

在線檢閱 https://youtu.be/tq9bSM7OTK8

開始動畫:畫布 A0 到 A1

或許你會在疑惑,為什麼會這樣做?
我們也可以把這裡設定為 A0 auto 的過場效果,只是,如果使用 Tap 的話,將會更方便我們最後要錄製動畫。

P1

點擊美食:畫布 A1 到 A3

我們注意頂部的線條,這裡記錄了動畫運動方向。
從 A1 過度到 A3 的動畫,為什麼會有 A2 畫布呢?
這是因為,我想製作一個主圖先放大,接著其他信息才出現的狀態。所以,就補充了 A2 畫布。
那麼,我們在設定動畫時候,先設定為點擊圖片,跳轉到 A2 畫布,再自動跳轉到 A3 畫布,就達到這個效果了。

P2

返回列表:畫布 A3 到 A1-2 到 A1

我們剛才完成了進入動畫。接著,我們來完成返回動畫。
這裡,我們注意到上圖,是從 A3 返回到 A1-2,再從 A1-2 返回到 A1。
為什麼是這樣的流程呢?其實剛才也提及過了,是為了製作一個兩段式動畫。
而且,最關鍵的事情是,主要在 Principle 圖層名稱相同,他們就會自動創建之間的補間動畫。同時間,我把 A1-2 裡面的 “Group 4” 圖層往上拖了一下,那麼,它等下就會自動從頂部滑下咯。

P3

動畫細緻化設定

A1

在這裡,我們注意到,我把寬高的轉換 ease 方法改為 Both。
這樣是為了略微吸引注意力的變化效果。
往往而言,其實所有設計師都會為了調整一些效果,調整參數好久好久哦。記得把調整好的參數給程序員。

END

這個快速而簡單的 Principle 過場動畫就製作完畢啦。
Enjoy 一下吧。

P-END