為Apple Watch設計APP的時候，首要的準則是讓它保持簡單。Uber 為 Apple Watch設計的APP是簡單的最好的例子，原因在于它只有3個頁面：

     1.給Uber發(fā)送需求

     2.等待回復

     3.讓你知道司機的信息和狀態(tài)

說到動畫，這個 APP每個界面都有不同的加載動畫，這些動畫原型都非常有趣，下面將用 framer實現(xiàn)這些動畫。

你自己可以跟著我一步步用 framer實現(xiàn)這個原型，下圖是將要實現(xiàn)的效果：

 

要開始，先下載 Sketch文件（在附件中），在開始前我已經(jīng)用 Sketch自帶的 Apple Watch GUI 在不同畫板之間創(chuàng)建了我們需要的界面，當我們把 Sketch文件導入 framer的時候，只有被編組的界面元素才會被 framer識別到，這里要特別注意圖層的組織。

在這個例子中，作為第一個屏幕，需要把加載的圓形和 “Request”按鈕分別編組，因為只有這兩個元素需要添加交互和動畫，現(xiàn)在，我們的Sketch文件已經(jīng)準備好了，讓我們導入到framer。

 

我們要做的第一件事是清除代碼編輯器，并將您的設備切換為蘋果手表。工具欄的右上角去Device ?- ??Apple Watch 42mm?-? 選擇其中一個選項。

保持Sketch處于打開狀態(tài)，在 framer中點擊工具欄上的導入按鈕或者用快捷鍵 Command+I喚出導入對話框，確認對話框中的 Sketch列表后面的 import按鈕處于激活狀態(tài)，點擊導入按鈕導入。

framer會自動為導入的原型添加注釋和代碼行，我們可以重命名導入文件的名稱使它變簡短，例如 這里重命名為Uber。

 

# This imports all the layers for "uber-watch" into 

uber= framer.importer.load "imported/uber-watch"

 

我們應該在右側(cè)的預覽窗口中看到request界面。我們也可以在中間的檢查面板中查看導入的其他的兩個界面（以淡一點的顏色顯示），因為它們是不可見的。

要創(chuàng)建加載脈動，我們將創(chuàng)建兩個動畫對象。第一個動畫用到 loadingCircle圖層scale 屬性增大10%。如果要訪問我們導入的任何圖層對象，我們只需輸入導入時的文件變量，后面加點，然后加圖層組名。按照這種方式，我們將使用uber.loadingcircle指定動畫的層。定義過度時間為1.5秒的脈沖動畫。

 

pulseUp = new Animation

    layer: uber.loadingCircle

    properties:

        scale: 1.1

    time: 1.5

 

第二個動畫是把放大的 loadingCircle圖層，恢復到原來的狀態(tài)，同樣是 1.5秒。

 

pulseDown = new Animation

    layer: uber.loadingCircle

    properties:

        scale: 1.0

    time: 1.5

 

下面將這兩種動畫串聯(lián)起來使得第一種狀態(tài)結(jié)束時自動開始下一種狀態(tài)。

為了串聯(lián)動畫，我們會監(jiān)聽 animationend事件，這個事件的意思當一種狀態(tài)結(jié)束時會被調(diào)用。要監(jiān)聽事件，我們將制定動畫對象上面的 “on”關(guān)鍵字來監(jiān)聽這個事件。

當pulseUp動畫結(jié)束時，我們希望 pulseDown動畫開始，用動畫對象的 start()函數(shù)，因為這是一個函數(shù)，所以要在后面加括號。

 

pulseUp.on Events.AnimationEnd, ->

    pulseDown.start()

 

反過來，當 pulseDown動畫結(jié)束時，我們希望 pulseUp開始。

pulseDown.on Events.AnimationEnd, ->

    pulseUp.start()    

 

需要做的只有開始動畫了。

pulseUp.start()  

 

我們現(xiàn)在應該可以看到脈沖動畫了。

 

為了切換到下一個界面，要給 requestButton圖層創(chuàng)建一個點擊事件。

requestButton.on Events.Click, ->

 

當導入Sketch文件，僅僅第一個畫板界面能看到，為了顯示出 Requesting界面，需要設置它的 visible屬性為 true，另外為了隱藏 Request界面，需要設置它的 visible屬性為 false。

 

uber.requestButton.on Events.Click, ->

    uber.request.visible = false

    uber.requesting.visible = true

 

如果仔細觀察原型，你會發(fā)現(xiàn)過度不平滑，因為僅僅是界面瞬間的隱藏和顯示。我們可以做的更好，在 requesting完全顯示之前， 通過設置 Request界面的透明度的過度動畫為 0.3，然后設置 requesting的透明度過度到 1。與其創(chuàng)建另一個動畫對象，并告訴它開始，倒不如我們可以直接在事件里面通過圖層名稱.animate啟動的圖層的動畫，然后指定過度動畫的屬性。

 

uber.requestButton.on Events.Click, ->

    uber.requesting.opacity = .3

    uber.request.visible = false

    uber.requesting.visible = true

    uber.requesting.animate    

        properties:

            opacity: 1

 

現(xiàn)在原型的效果如下：

在真實的Apple Watch中，點擊 request按鈕后就是展示加載界面，最后才是顯示下一個界面。

在Requesting界面中一致播放脈動加載條的動畫直到有司機確認，但是這里有一個回到 request界面的取消按鈕。這里我們不處理取消按鈕的事件，但是你可以自己練習著完成它。

為了創(chuàng)建這個脈動加載條，先設置加載條的開始位置，這個加載條就是在 Sketch文件中命名為 requestingLoad的圖層組，這里設置開始位置通過 scaleX屬性為 0.1且它的不透明度為 0。

 

uber.requestingLoad.scaleX = .1

uber.requestingLoad.opacity = 0  

 

為加載條創(chuàng)建動畫對象，我們想要它從初始狀態(tài)過度到原始的狀態(tài)，且伴隨不透明度的增加。這里要通過 repeat選項，重復動畫幾次。

 

requestingPulse= new Animation

        layer: uber.requestingLoad

        properties:

            opacity: .8

            scaleX: 1

        repeat: 5   

 

現(xiàn)在回到第一屏的 request按鈕的點擊事件，切換到過度界面

 

uber.requestButton.on Events.Click, ->

    uber.requesting.opacity = .3

    uber.request.visible = false

    uber.requesting.visible = true

    uber.requesting.animate    

        properties:

            opacity: 1

    

    requestingPulse.start()   

 

現(xiàn)在來添加一個延遲直到想我們希望看到的一樣。

 

requestingPulse= new Animation

        layer: uber.requestingLoad

        properties:

            opacity: .8

            scaleX: 1

        delay: .4

        time: .9

        repeat: 5

 

這里Uber的 requesting界面的效果如下：

為了過度到下一個界面，需要設定脈沖加載動畫的重復次數(shù)。每一次 requestingpulse動畫結(jié)束的時候觸發(fā)的animationend 事件，是添加邏輯最好的地方。

首先創(chuàng)建一個 requestingCount變量，它的作用是記錄脈沖次數(shù)，設置初始值為0。我們把它放在animationend事件代碼塊外面，而不是在里面，因為如果把它里面將每次重置為0，結(jié)果是一個無限循環(huán)。

 

requestingCount = 0

 

在AnimationEnd事件中，它被調(diào)用一次增加計數(shù) 1次，這里我們設置變量等于它本身加 1即可。

 

requestingPulse.on Events.AnimationEnd, ->

    requestingCount = requestingCount + 1

 

一種簡單的寫法是在變量后面帶兩個加號，效果和上面是一樣的。

 

requestingPulse.on Events.AnimationEnd, ->

    requestingCount++

 

在計算次數(shù)等于希望的動畫重復播放次數(shù)，添加切換到下一個界面的邏輯，這里我們設定希望動畫重復的次數(shù)為 3。

 

requestingPulse.on Events.AnimationEnd, ->

    requestingCount++

    if requestingCount is 3

 

當計算次數(shù)為 3的時候，我們要做和 Request界面切換到 Requesting界面一樣的切換效果來切換到下一個界面。首先設置下一個界面（ enroute）的不透明度為 0.3， requesting圖層的 visible的屬性為 false， enroute界面的 visible的屬性為 true，在讓透明度的過度更平滑一些。

 

requestingPulse.on Events.AnimationEnd, ->

    requestingCount++

    if requestingCount is 3

        uber.enroute.opacity = .3

        uber.requesting.visible = false

        uber.enroute.visible = true

        uber.enroute.animate    

            properties:

                opacity: 1

 

代替計算次數(shù)的做法，你也可以選用在 requesting界面經(jīng)過幾秒之后自動切換到下一個界面（提示：使用 Utils.delay 來做）。記住這是一個原型，所以它不必是完美的，所有選用那種方式更快或更好才是關(guān)鍵。

效果如下：

對于Uber的erneute界面，在Sketch文件中命名為 enRouteProgress進度條是有旋轉(zhuǎn)動畫的。創(chuàng)建旋轉(zhuǎn)動畫設置旋轉(zhuǎn)角度為360度， 給旋轉(zhuǎn)動畫添加AnimationEnd事件監(jiān)聽，使旋轉(zhuǎn)結(jié)束繼續(xù)開始下一次旋轉(zhuǎn)，重復次數(shù)可以多一些，也可以設定旋轉(zhuǎn)一圈所用的時間。

 

enRouteRotate = new Animation

    layer: uber.enRouteProgress

    properties:

        rotation: 360

    repeat: 30

    time: 2

 

可以在前面提到的切換到第三個屏幕的的時候開始播放這個動畫。

 

requestingPulse.on Events.AnimationEnd, ->

    requestingCount++

    if requestingCount is 3

        uber.enroute.opacity = .3

        uber.requesting.visible = false

        uber.enroute.visible = true

        uber.enroute.animate    

            properties:

                opacity: 1

        

        enRouteRotate.start()

 

如果你觀察原型，會發(fā)現(xiàn)不是很平滑。

 

這是因為動畫曲線默認是 “ease-in-out”曲線，我們設置動畫的曲線為 linear。

enRouteRotate= new Animation

    layer: uber.enRouteProgress

    properties:

        rotation: 360

    repeat: 30

    curve: "linear"

    time: 2

 

現(xiàn)在看起來已經(jīng)平滑多了：

 

這個屏幕如果可以滑動應該還有更多內(nèi)容。如果你觀察 Sketch中的這個畫板，你會看到這樣的結(jié)構(gòu)，可以滾動的內(nèi)容被加上了蒙板。

添加滾動事件是通過在 Sketch中命名為 content的組上創(chuàng)建 ScrollComponent 的wrap 函數(shù)來完成的。

 

scroll= ScrollComponent.wrap uber.content

 

這里禁用水平方向滾動

 

scroll.scrollHorizontal = false

 

現(xiàn)在原型中的第三個界面應該能滾動了。

 

為了讓這個 framer原型更具真實，現(xiàn)在來做汽車的移動。

 

創(chuàng)建一個小汽車在一條路徑上通過轉(zhuǎn)彎到另一條路徑?？梢酝ㄟ^改變 x， y的坐標實現(xiàn)移動，通過轉(zhuǎn)動角度來變化路徑，讓它看起來像沿著路徑運動。

 

moveCarDown= new Animation

    layer: uber.delorean

    properties:

        x: 130

        y: 95

    time: 20

 

moveCarLeft= new Animation

    layer: uber.delorean

    properties:

        rotation: -100

        x: 125

        y: 125

    time: 10    

 

通過監(jiān)聽moveCarDown動畫的結(jié)束事件來開始 moveCarLeft動畫建立一個動畫序列。

 

moveCarDown.on Events.AnimationEnd, ->

    moveCarLeft.start()

 

這里需要在開始 moveCarDown 動畫開始的時候，開始 enRouteRotate動畫

 

requestingPulse.on Events.AnimationEnd, ->

    requestingCount++

    if requestingCount is 3

        uber.enroute.opacity = .3

        uber.requesting.visible = false

        uber.enroute.visible = true

        uber.enroute.animate    

            properties:

                opacity: 1

        

        enRouteRotate.start()

        moveCarDown.start()

 

小汽車已經(jīng)沿著路徑移動了，為了展示，只制作了簡短的 gif動畫避免gif過大，效果如下：

最后，在5秒之后更新標簽 ““En Route”為“Arriving Now” ，這里用延時函數(shù) delay 函數(shù)實現(xiàn)，它的意思是在操作執(zhí)行之前等待幾秒。

 

moveCarDown.start()

        Utils.delay 5, ->

 

在5秒之后，隱藏當前的標簽顯示需要展示的標簽，這里都用到了 visible屬性。

 

 Utils.delay 5, ->

            uber.enRouteTitle.visible = false

            uber.arrivingNowTitle.visible = true

 

恭喜您，我們在 framer中已經(jīng)實現(xiàn)he Uber Apple Watch app的效果了。