ProtoPie进阶教程1-1：动效时钟

“时钟”是我们每个人的手机上都会有的一款工具类应用，帮助用户查看时间或进行时间管理，一般包含时钟、闹钟、秒表、计时器等功能，本次教程将通过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

新建文文档导入素材，实现基本视效。

这部分的注意点：