中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

前言 Protopie簡介

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

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

Framer、Origami——有學習門檻，需要一定的代碼知識，和開發銜接便利，可實現邏輯復雜的交互動效。

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

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

在Protopie的官網上，有基礎教程供大家學習，本篇是進階教程，建議有一定基礎的童鞋學習，幫助大家更深入地應用這款軟件，挖掘更多可能性。

時鐘模塊交互動效教程

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

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

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

具體實現效果

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

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

實現時鐘模塊涉及到的Protopie基本功能

觸發：自動加載、監聽

反應：賦值、旋轉、文本

變量：數字變量及其計算表達

制作前主要思考過程

時鐘的實現主要分為三個部分：

1. 時間計算

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

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

2. 指針旋轉角度計算

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

3. 數字時鐘表達

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

具體實現步驟

Step1

新建文文檔導入素材，實現基本視效。

這部分的注意點：

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

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

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

Step2

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

Step3

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

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

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

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

Step4

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

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

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

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

作者：Annie；編輯 ：JJ

本文由 @Annie 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議