用Principle繪製小動畫

Principle可以實現快速繪製小動畫，但它最大的作用在於互動點選上的完美呈現，學會這個小動畫基本就掌握了這款軟體的快速運用了。

Principle這款軟體互動友好，視覺化操作，調節方便，適用於簡單快速的動效需求；尚未接觸的同學可以檢視 Principle 中文，仔細琢磨後就能輕鬆駕馭目前最好用的移動端 UX 原型設計軟體，搭配 Sketch 那簡直雙劍合璧！

下面是網上自學的一隻小貓的動效，練習完這隻小貓基本就掌握了這款軟體啦，已上傳原始檔，下面簡要說下繪製要點，一起學習下～

首先，我們先用Sketch畫出大體造型，形象很簡單，會用sketch的童鞋應該都能畫出來。尾巴部分需要注意下，轉動部分畫一個半弧形的尾巴，在principle裡透過轉動角度來實現，尾巴上方加一個白色圖形進行遮罩。遮罩功能時principle中比較常用到的功能。

在sketch中畫好圖形可以實現直接匯入到principle軟體中。點選principle軟體靠左的鑽石圖示預設匯入當前sketch檔案。

匯入檔案後，第一步要做的是建立觸碰區域，也就相當於熱點，有熱點區域才能挪動影象。

熱區就是左上角的矩形控制元件，將矩形形狀覆蓋在貓的臉上，然後在給這個形狀新增移動屬性，x軸y軸都選擇Scroll。

新增完屬性後點Drivers

相當於給這個觸碰區域設定一個可以運動的賽道，在賽道上才能進行翻轉、變換等各種動畫效果。所以下面要做的事情就是點選需要變換的圖層，然後挪動Drivers賽道距離透過配合賽道含有的各大屬性來實現效果。

例如：選中臉部的編組，在x軸0的位置上點加號新增一個關鍵幀，點選藍色按鈕選擇X，表示在水平位置上控制臉的左右移動。移動指標到 85打一個X的關鍵幀（即點選0處的藍色按鈕），此時形成一條藍色的線，挪動線我們可以看到“控制元件”區域向左位移了，此時再調整左側工作區中x軸數值，使得臉左移。

同理移動指標到 -80 再打一個X的關鍵幀，調整左側工作區x軸數值，臉隨著右移。

然後操作y軸，在scrlll y 軸0的位置上點加號新增一個關鍵幀，同x軸一樣，左右打關鍵幀，在左側工作區的y軸上調整臉上下位置的挪動即可。

透過在賽道上對x、y軸在各種模式下的左右挪動，配合工作區上、下、左、右、角度、不透明等數值變改變達到變化的效果。

接著就是時間軸的控制了，時間軸用來控制兩個頁面之間的跳轉時間變換和形式。點選跳轉的線條，下方出現時間軸，需要進行手動調節。

最後，就是錄製了，點選錄製的按鈕，有三種錄製形式：含圈圈、含滑鼠、沒有觸碰點

當錄製按鈕閃爍時表示正在錄製，再次點選錄製結束可以選擇gif、mov格式儲存；

手機端下載mirror，可以同步檢視動畫效果，非常方便！

以上就是這歌動畫的基本操作步驟了，大家舉一反三，還可以變變造型，並且可以運動到app頁面的互動跳轉中來，實現完美互動體驗。