使用sketch+principle聯動製作智能家庭動效設計（搬運）

使用工具：sketch、principle、segmented circles（sketch插件 ）、chromatic sketch（sketch插件）

首先

我們在sketch中創建一個大小為

375*667的矩形

畫出表達廚房選項的文字和箭頭（注意使用顏色區分主要信息與次要信息）（字體：gotham rounded）

再畫出代表著信息的圖標

和下面的指示條

畫出圓角矩形等元素

接下來是重點，我也花了一點時間才搞明白，很多朋友可能不知道怎麼樣在sketch中畫出完美的時鐘刻度，其實sketch的功能性與可玩性就是體現在了精簡上，有豐富的插件可以供我們選擇

這裡我是在http://sketch.im中找到的segmented circles插件

http://cdn.sketch.im/Segmented%20Circles.zipcdn.sketch.im

點擊就可以下載了，，很是方便點進去以後是全英文界面，不過我這裡有一套教程

design4use/gb-sketch-segmentcirclegithub.com

上面是教程的網址，不過我這裡繼續貼出來

1、Create segmented circle

2、Create variable segments circle

3、Create tickmarks circle

4、

接下來直接做第二個界面，（心疼知乎編輯器已經吞了3次字了）

這個不難，主要是上面三個園的疊加與漸變效果的實現可能有一點難度

接下來打開principle點擊工具欄上的額

從sketch中導入（注意，將元素與畫板都放好哦）

放好以後就是這樣咯

在我們需要的幾個點上加上tap動作

我這裡反了，不過沒關係

這時候已經有了交互，但是沒有動效，不夠生動，所以我們來添加點動效

（知乎的編輯器再次吞了我的字）看這三個圈圈，將畫板2上的挪到畫板1上，將透明度調整到0%，（記住要在組內調整，而不是選擇組然後調整）

再將畫板2中的con挪到畫板1的畫板稍稍下部，這樣點擊後就會有個從下向上的漸漸過渡的動效

ok，最後的效果是這樣：

質量好差，我把源文件放在百度網盤算了

鏈接: https://pan.baidu.com/s/1cPsOdo 密碼: i6qa

感謝各位，今天弄斧到這裡，皮一下很開心

對了這是maex的視頻，我只是搬運

https://www.youtube.com/channel/UCSdp5logiFTM3SyLJrHabOQwww.youtube.com

推薦閱讀：