“時鐘”是我們每個人的手機上都會有的一款工具類應(yīng)用，幫助用戶查看時間或進行時間管理，一般包含時鐘、鬧鐘、秒表、計時器等功能，本次教程將通過Protopie來實現(xiàn)時鐘應(yīng)用中的時鐘、秒表及計時器的功能，教程將分為三篇進行講解。

前言 Protopie簡介

目前市面上有非常多可做交互型動效（可實際操作交互的效果）的軟件，常見的有：

Principle、Flinto——上手快速，高效實現(xiàn)邏輯簡易的交互動效；

Framer、Origami——有學(xué)習(xí)門檻，需要一定的代碼知識，和開發(fā)銜接便利，可實現(xiàn)邏輯復(fù)雜的交互動效。

上圖為外媒評價的市面上主流制作交互軟件的分布，橫坐標(biāo)為保真度，縱坐標(biāo)為制作速度。

在我們實際應(yīng)用一些案例之后，認(rèn)為Protopie這款交互型動效軟件綜合優(yōu)勢更大，它入門簡單，邏輯清晰，相較于Principle，它能完成自定義程度更高的高保真原型，又比Origami、Framer等軟件的學(xué)習(xí)難度低，同時可以實現(xiàn)傳感交互和跨屏幕交互。目前該軟件持續(xù)更新中，增添了控件定義等功能，大大方便團隊的合作開發(fā)，谷歌、一加等設(shè)計團隊均在使用它。

在Protopie的官網(wǎng)上，有基礎(chǔ)教程供大家學(xué)習(xí)，本篇是進階教程，建議有一定基礎(chǔ)的童鞋學(xué)習(xí)，幫助大家更深入地應(yīng)用這款軟件，挖掘更多可能性。

時鐘模塊交互動效教程

“時鐘”是我們每個人的手機上都會有的一款工具類應(yīng)用，幫助用戶查看時間或進行時間管理，一般包含時鐘、鬧鐘、秒表、計時器等功能，本次教程將通過Protopie來實現(xiàn)時鐘應(yīng)用中的時鐘、秒表及計時器的功能，教程將分為三篇進行講解。

• 時鐘——幫助用戶查看當(dāng)前時間，主要動效包含石英表盤及數(shù)字兩部分，實現(xiàn)以秒為單位的時間顯示。
• 秒表——從零開始進行計時操作，支持開始、暫停、計次、復(fù)位，時間精度為百分之一秒。
• 計時器——用戶可以設(shè)定24小時以內(nèi)的某一具體時間值進行倒計時，開始計時后時間倒數(shù)，界面顯示剩余時間，同時圓環(huán)顯示剩余時間百分比。支持開始、暫停、繼續(xù)、取消操作，時間精度為秒。

時鐘——幫助用戶查看當(dāng)前時間，本案例中具體實現(xiàn)的時鐘包括石英表盤及數(shù)字動態(tài)顯示兩部分組成。主要利用時、分、秒三個變量對賦值計算，實現(xiàn)以秒為單位的時間顯示。

具體實現(xiàn)效果

案例源文件預(yù)覽&下載：https://cloud.protopie.io/p/e21709791b

（源文件中有三個不同場景，對應(yīng)“時鐘”、“秒表”、“計時器”）

實現(xiàn)時鐘模塊涉及到的Protopie基本功能

觸發(fā)：自動加載、監(jiān)聽

反應(yīng)：賦值、旋轉(zhuǎn)、文本

變量：數(shù)字變量及其計算表達

制作前主要思考過程

時鐘的實現(xiàn)主要分為三個部分：

1. 時間計算

首先最佳的實現(xiàn)時鐘動態(tài)方案應(yīng)該是直接獲取設(shè)備的系統(tǒng)時間，這樣不用自行做時間計算，但Protopie目前還無法實現(xiàn)該功能。所以退而求其次，利用變量計算獲取動效文件的運行時長，進行累計計算以實現(xiàn)時鐘的時間計算。

以這個實現(xiàn)邏輯，需要理清時、分、秒三者之間不同的關(guān)系：秒每秒+1，每60秒歸零一次；分每60秒+1，每3600秒歸零一次；時則每3600秒+1，每86400秒歸零一次。

2. 指針旋轉(zhuǎn)角度計算

關(guān)于指針旋轉(zhuǎn)計算的思考是指，需要以12點為0度方位，明確具體時間下對應(yīng)的時針、分針、秒針的旋轉(zhuǎn)角度。秒針由于每秒跳動一格，共60格，每格為6度，則其秒針對應(yīng)的角度為秒數(shù)*6°；分針的對應(yīng)角度應(yīng)該是分鐘數(shù)*6°再加上(秒數(shù)/60)*6°；時針對應(yīng)的角度為小時數(shù)*30°再加上(分鐘數(shù)/60)*30°。

3. 數(shù)字時鐘表達

數(shù)字時鐘表達方面可以直接用時分秒的數(shù)值對應(yīng)上，但會出現(xiàn)一個問題當(dāng)時分秒為個位數(shù)字時需要進行補位的設(shè)置，在個位數(shù)字前面添加一個“0”，以保證數(shù)字時鐘的時鐘以00:00:00六位的形式顯示。

具體實現(xiàn)步驟

Step1

新建文文檔導(dǎo)入素材，實現(xiàn)基本視效。

這部分的注意點：

（1）數(shù)字時鐘的時、分、秒的數(shù)字都需要使用文本控件，后面涉及到文本值的變化，直接導(dǎo)入Sketch文檔后需要將其轉(zhuǎn)化為文本圖層（在圖層位置參數(shù)設(shè)置上方）

（2）石英表盤的素材指針的素材均為指向12點位置的指針，這樣便于之后的計算

（3）Protopie中圖片中心點位置是可以調(diào)整的但是其數(shù)值上是以切圖的百分比位置進行調(diào)整，所有建議石英表盤的素材指針的素材在尺寸上最好使用與表盤一致的大小的尺寸，便于定位到中心點。

Step2

建立三個變量分別命名為hour、min、sec，對應(yīng)時、分、秒的值。（此處建立僅適用于當(dāng)前場景的變量即可）本案例設(shè)定的初始時間是11:58:00，所以初始值分別為11、58、00。

Step3

添加觸發(fā)“自動加載”，基于前文的分析對變量hour、min、sec賦值。

（1）對于變量sec賦值2次，一次使其在開始后每秒增加1；一次使其每60秒做歸零賦值。

（2）對于變量min賦值2次，一次使其在開始后每60秒增加1；一次使其每3600秒做歸零賦值；同時本案例中我設(shè)定的初始時間是11:58:00；所以增加1的賦值操作需要延遲60秒進行（當(dāng)前秒數(shù)為00待秒數(shù)再次到達00后再做+1操作）；而歸零操作需要延遲120秒進行（當(dāng)前分鐘數(shù)為58過120秒后才第一次做歸零操作）。

（3）對于變量hour賦值1次，一次使其在開始后每3600秒增加1，同時初始時間是11:58:00，所以同樣延遲120秒進行；鑒于案例僅表現(xiàn)基本原理，應(yīng)該沒有會較真測上12小時的用戶，在我這邊歸零的設(shè)置項就做簡化。

Step4

添加觸發(fā)“監(jiān)聽”，監(jiān)聽不斷變化的變量sec，將石英表盤及數(shù)字表盤值與變量hour、min、sec的關(guān)系建立起來。

（1）石英表盤的部分，添加時針、分針、秒鐘圖層的“旋轉(zhuǎn)”反應(yīng)，使其進行順時針旋轉(zhuǎn)，旋轉(zhuǎn)至位置使用表達式，時針：(hour*30)+(min/2)；分針：(min*6)+(sec/10)；秒針：sec*6。

（2）數(shù)字時鐘部分，對于分鐘數(shù)及秒數(shù)增加條件判斷，當(dāng)數(shù)值小于10時使用表達式 “0”+sec 和 “0”+min ；當(dāng)數(shù)值大于等于10時直接使用變量hour、min、sec的值。（時鐘數(shù)值的部分由于從11開始計算，為了省事就沒有增加位數(shù)判斷）

大功告成?。。】梢灾苯釉陬A(yù)覽窗中查看效果~~

作者：Annie；編輯 ：JJ

本文由 @Annie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議