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

01-31

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

知乎專欄是不會播放 GIF 動畫的
如果瀏覽 GIF 動畫正常的版本請跳轉：用「吃到」Demo 向你介紹酷酷動效的製作辦法

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

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

最終效果

Also Check in Dribbble

前言

若要使用 Principle ，請認識清楚一下大概流程步驟。

1. 在 Sketch 繪製效果圖；

2. 建立專用的動效用版本，其中，以需要變化的圖形，並提至最高層。將大於畫布的圖形，使用蒙版工具，限制在畫布之內。

3. 啟動 Principle 工具，導入 Sketch 文件；

4. 點選對應圖形，類似 Xcode 拖動到下一場景。

大致流程如上，還有一個注意點。

Principle 自動變形處理依賴相同的圖層名稱，如果發生動畫跳動，就是一般在相同畫布內，有兩個同名圖層。

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

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

啟動 Principle 並導入

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

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

開始動畫：畫布 A0 到 A1

或許你會在疑惑，為什麼會這樣做？

我們也可以把這裡設定為 A0 auto 的過場效果，只是，如果使用 Tap 的話，將會更方便我們最後要錄製動畫。

點擊美食：畫布 A1 到 A3

我們注意頂部的線條，這裡記錄了動畫運動方向。

從 A1 過度到 A3 的動畫，為什麼會有 A2 畫布呢？

這是因為，我想製作一個主圖先放大，接著其他信息才出現的狀態。所以，就補充了 A2 畫布。

那麼，我們在設定動畫時候，先設定為點擊圖片，跳轉到 A2 畫布，再自動跳轉到 A3 畫布，就達到這個效果了。

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

我們剛才完成了進入動畫。接著，我們來完成返回動畫。

這裡，我們注意到上圖，是從 A3 返回到 A1-2，再從 A1-2 返回到 A1。

為什麼是這樣的流程呢？其實剛才也提及過了，是為了製作一個兩段式動畫。

而且，最關鍵的事情是，主要在 Principle 圖層名稱相同，他們就會自動創建之間的補間動畫。同時間，我把 A1-2 裡面的「Group 4」圖層往上拖了一下，那麼，它等下就會自動從頂部滑下咯。

動畫細緻化設定

在這裡，我們注意到，我把寬高的轉換 ease 方法改為 Both。

這樣是為了略微吸引注意力的變化效果。

往往而言，其實所有設計師都會為了調整一些效果，調整參數好久好久哦。記得把調整好的參數給程序員。

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

Enjoy 一下吧。