creator 数字翻页效果_如何用ProtoPie做翻页计时器？(内附源文件)

先看看效果

 是不是有内味了？

那我们开始吧～

附：ProtoPie源文件，对着源文件看教程更容易理解哦～

链接: https://pan.baidu.com/s/1RRMX2XEYvcakuezXFxfeeQ 提取码: v62k 

一、首先我们研究下翻页计时器是怎么动的运作的

从侧面看实体机械计时器，应该是这样子的，每两扇页片之间就是一个数字，数字1上面的叶片向下关闭后，数字2就会打开。

但在软件产品开发上，肯定不会真的建这么多页片，占用资源不说，页片图层顺序和翻转角度也很难处理，除非做个3d模型～但没这个必要吧？

实际上仅仅是在2D平面展示翻页效果，不用这么复杂，以下是我的理解，将动画元素进行拆分：

【数字5】展示时上部分卡片名为【A上】，下部分卡片名为【A下】，【数字6】展示时的上部分卡片名为【B上】，下部分卡片为【B下】。

我们可以注意到，当卡片【A上】向下翻转时，卡片【B下】同时往下翻转。所以在翻转之前卡片【B下】在上方，翻转之后卡片【A上】翻转到下方。

如刚刚所说，翻页数字有10个数字，我们做10组卡片肯定有点麻烦？但我们有更好的办法——赋值。我们只需要2组卡片就行了，每当一个翻转动作完成之后，立即给上一个数字赋一个新值。

以此内推，就可以做到用2个卡片循环～不过还有很多细节需要注意的，大家看下面的示意图更容易理解～

注意：以下示意图是“侧面视角”哦～

这就是翻页计时器的基本原理。那么基于这个原理，我们用protopie做一个翻页计时器吧～

二、开干

1.准备好图层

如上节的原理分析，我们组装好卡片。如下图所示：

要点：

1.容器层A和容器层B分别代表两个数字卡。

2.【A】分为上下两个部分【A上】和【A下】。

由于卡片是从上往下翻转的，翻转时【A下】是要盖住【A上】的，所以【A下】的图层要在【A上】上面。

3.【A上11】和【A下11】是两个文本控件展示同一个数字，分别展示数字上部分和下部分。

我们可以通过“剪切子层”的功能分别截取数字的上下部分。

4.【A上2】和【A下2】是用来剪切子层的容器层。

而两张卡片又是绕着上下对称中心旋转的，所以【A上】以卡片底部为中心翻转。【A下】以卡片顶部为中心翻转。但上下两个张片之间是有缝隙的，所以通过【A上2】和【A下2】剪切子层而不是直接用【A上】和【A下】这两个图层剪切。

5.同理，【B】的图层逻辑和【A】一致。

2.卡片初始化

根据上章原理示意图，【B上】的初始位置是经过翻转180度的。所以设置事件：

3.设定卡片翻转事件

然后根据上章示意图设定事件。

注意事项：

1.同时需要用到两个变量，一个变量【GW】用0和1记录图层位置状态，一个变量【NUM】给文本赋值。

2.由于只能展示0～9这几个数字，赋值时所以要对数字进行处理。通过运算符“%”取数字的个位数：NUM%10。

3.这里的赋值是给下一位数字赋值，而不是当前卡片展示的数字的数值，所以卡片初始显示的值是0，则NUM的默认值是1。

这样，我们个位数翻页效果基础事件就做好了～

4.触发事件-数值自动变化

给【按钮GO】添加一个时间，点击后每隔一秒钟数字自动+1。监测到数字变化后，卡片自动翻转。

5.十位数

基础打好后十位数就很好做了，我们先将个位数的图层和事件复制一遍，然后设定监听事件：每当十位数+1时，十位数的卡片翻转一下。

那么怎么获取十位数呢？如下表达式：floor((NUM-1)/10%10)+1

我一一给大家拆解这个表达式：

(NUM-1)，表示当前卡片显示数据。

(NUM-1)/10，表示取十位及以大于十位数。如：188/10=18.8。

(NUM-1)/10%10，表示取这个数字的个位及小于个位的数。如：18.8%10=8.8。

floor((NUM-1)/10%10)，表示向下取整数，如：floor(8.8)=8。

floor((NUM-1)/10%10)+1，以保证当前卡片展示的十位数与下一个卡片的展示的十位数差1(上节我们知道当前变量的数值只能赋给下一张卡片要展示的数)。所以NUM2的默认值也是1。然后我们通过对NUM2监听事件，当NUM2变化时，卡片翻转，翻转完后赋值。

OK大功告成！

项目截个图～

有兴趣的同学可以利用这个原理，做一个完整的时钟。

还未使用ProtoPie的同学请点阅读原文，注册账号可以有30天的免费试用哦~