五天Principle從入門到精通01-簡單的Toast動畫制作

小編:五天Principle從入門到精通,一起來學習吧~

今天我們練習做一個非?;鏡畝?,熟悉Principle最基本的操作和界面布局。那么課程開始啦。

在這里,我們選擇做一個toast動畫。設計師們有了自己設計的toast體系,就可以告別系統原生的toast。同時,我們也可以拿著實際效果,在開發小哥面前演示toast動效,再也不用比劃半天也說不清楚。

 

toast動畫

軟件打開后,有一個300*300的Artboard在界面中,使用過Illustrator和Sketch的人應該理解。這是一個畫板的概念,我們設計的各種元素都應該在這個畫板上。工具欄也沒幾個按鍵,剛一開始的話,不容易被理解。即使對于有AE基礎的人來說,開始也要先了解Principle的動畫制作邏輯的。我們一步一步地講并配以截圖,第一節講得詳細一點,力求打好基礎~

初次打開Principle

 

第一步

選中某元素,在界面的左側是該元素的屬性欄。首先把Artboard的大小設成常規的手機屏幕大小“750*1334”。接著,我們點擊左上角的“Rectangle”,頁面中會新建一個方塊,我們再點一下“Text”,然后屏幕中又出現一個方塊和兩個單詞。

 

第二步

在左側屬性欄可以修改方塊大?。ǖ比灰部梢岳嬌楸咴蹈謀浞嬌櫬笮。?。鼠標選中文字,左側邊欄可以修改文字的屬性,雙擊文字可以修改文字內容。如下圖:

 

屬性欄

 

第三步

現在來到了我們關鍵的一步:怎么出現動畫效果。

選中Artboard1,它周圍出現綠色的框,右側出現一個??閃電圖標,這個就是動作觸發的條件編輯入口。

我們點擊這個閃電,出現一個菜單,這些就是動作觸發的條件們。

后面會對這個動作觸發條件做詳細的講解。

重點來了!我們選中“Tap”并拖動,發現一個藍色的箭頭,將箭頭指向Artboard1并松開鼠標。然后如圖,工作區又新增了一個畫板,自動命名為Artboard2: 

然后,我們將Artboard2上的toast(方塊和文字)向下拖動一段距離,使其和Artboard1上的toast有位置變化,如圖 :

這個時候,我們的設計就會動了!

查看動畫方法:鼠標選回第一個畫板,右側的動效預覽窗口會回到初始狀態,在預覽窗口中,鼠標點擊一下(即我們剛剛選擇的Tap觸發條件),就看到toast動起來了。動效如下:

我們也可以數據線接到手機上,打開裝的Principle mirror查看動效。

通過上面這個toast的動效例子,我們可以理解Principle的動畫原理。如圖:

其中1,2,3步我們已經做到了,第4步并不是必須的。下一節我們會針對動畫的形成邏輯有更深入的講解。

 

總結:

第一天,我們學習了:

· 新建文字,文字的修改

· 新建矩形,矩形的修改

· 動畫的觸發

· 矩形和文字的【移動】動畫

· 動畫的預覽

 

預告:

第二天,我們將會學習

· Sketch文件的導入

· 補間動畫邏輯

· 透明度動畫

· 縮放動畫

· 時間軸的控制

· 動畫的其他觸發條件

 

作者: 紫豆子的開發(微信公眾號:紫豆子設計站)

來源:學UI網

上一篇: 未來編程的十一個預測

下一篇: UI設計需掌握的細節及技巧

分享到: 更多
斗地主炸金花百人牛牛 pk10必赢客好用吗 赛车全天人工计划群 3分pk10计划软件网页版 澳门博彩十大平台 网络推牌九压庄技巧口诀 哪个手机炸金花能赢钱 天津时时不一样开奖 分分pk拾计划软件下载 通比牛牛怎样看走势规律 2017赛车pk10官网直播 全天北京pk赛车两期计划 幸运28有什么技巧 ag电子游戏网投 j江西时时走势 pk10稳定计划软件免费