Principle制作可交互原型教程：数字变化+环形加载

移动端通常借助Principle来制作演示效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

掌握Principle的必要性

1. 简单易学

大概16个课时，每个课时半个小时（包含练习时间），大约抽2周的晚上就可以学完。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

教程推荐：BiliBili-靳浩 Principle教程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

2. 提高还原

交互说明演示+规范的动效说明，交互演示清晰地将用户交互传达给整个项目团队，动效说明则让开发能够尽可能地还原交互需求。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

3. 推动落地

对于某些用户交互，演示比口头表达更有落地性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

4. 体验顺畅

让用户体验更具有“舒适感”(用户交互与反馈出现的时机，动效反馈时长和速率等)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

在一些项目交互演示中，常常会用到数字变化和环形加载，接下来我将分享如何通过Principle来实现数字变化和环形加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

技巧一、数字变化

应用场景：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

1. 页面进场，数字变化
2. 数字响应用户操作变化，比如:主动领取奖励金后余额增加

下面介绍两种数字变化实操案例，分别是「数字递增」和「数字滚动」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操：数字递增

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

新建组件，在组件中复制出几组数字，数字之间创建Auto自动动画，此时预览效果是从第1位数字到最后1位，无过渡动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

为了让动画不跳过中间的数字变化，可以在每个数字面板上复制一个相同名称的矩形b，错开奇数面板和偶数面板中b的位置，再设置b每次位移动画的时长，比如0.5s。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第3步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

b的位移设置使得数字的过渡呈现出来，可以通过更改b每次位移动画的时长来控制数字之间的过渡时长，最后将所有矩形b的透明度改为0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

‍‍动画完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操：数字滚动

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

新建组件，在组件面板1中创建一个文本，输入数字串(比如从0到9)，给面板1创建Auto自动动画，生成面板2。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

移动面板2中数字串的位置，然后设置位移动画的时长，比如0.8s。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第3步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

将2个面板都勾上“Clip Sublayers”，只展示显示在面板上的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

扩展案例

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

可以尝试还原以上扩展案例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

技巧二、环形加载

应用场景：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

1. 圆环加载，例：正在加载中动画作为页面过渡
2. 圆环进度条，比如表示页面数据读取过程或审核过程

实操：加载圆环「半圈」

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

准备素材，画2个圆形成一个圆环，准备2个直径和圆环宽度相等的圆点。（ps：你也可以在Sketch画好素材后命名为“圆环”然后导入Principle中，通过这种方式Principle中的圆环就是位图了，不能再修改颜色。如果直接在Principle画圆环的画可以随意更改颜色。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

理解原理，参照对素材进行打组、调整大小、以及命名（名称带有旋转的是要设置旋转的，便于理解）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第3步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

面板1选择Auto动画，自动复制出面板2，面板2中将“旋转点、旋转环”设置为180度，设置旋转时长比如1s，完成圆环前进180度动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

思考：如何完成加载1圈？

法1：改变加载半圈的起点

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

通过上图可知，我们可以通过将“半弧形”和“遮罩“图层范围的调整（原来是右半边的矩形范围调整为左半边，原来是左半边的矩形范围调整为右半边）来改变加载半圈的起点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

你可以这样理解：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

• 上图第1种图层范围结构是遮住了弧形的右半边只显示左半边（看“半弧形”），限制显示范围为右半边（看“遮罩”），通过顺时针旋转，让左半边弧形在右半边逐渐显示，从而达到0～180度的加载效果
• 同理，上图第2种图层范围结构像“半弧形”和“遮罩”的范围进行了对调，即可以让右半边弧形在左半边逐渐显示，因为是顺时针旋转，故达到180～360度的加载效果

起点：0度、终点：180度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

起点：180度、终点：360度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

那么，我们将“起点0度、终点180度”和“起点180度、终点360度”组合起来，前者的旋转完成后，后者开始旋转，衔接起来，就看到一个完整的旋转360度的动画了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

局限性：若2个动画的速度（贝塞尔曲线）设置成非Linear（匀速），那么看起来像是两段动画，要都设置成Linear才行。（因为2段的速度非Linear的话，中间衔接处的速度也不一样，造成衔接处有卡顿感，这样看起来显然不是一段连贯的动画了）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操演示：加载完成「1圈」-法1（不提供实操演示，当作作业。）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

法2：加载环形的同时进行旋转

先理解下原理——文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

将上述视频中的环形颜色进行统一，从而完成“环形1圈加载”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

同样是通过“2段动画”组合在一起达到加载1圈的效果，不同的是这2段动画是同时开始与结束的。2段动画分别是“加载环形「半圈」的同时绕中心旋转180度”（简称“加载+旋转”）和“加载环形「半圈」”（简称“加载”）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

那是否存在同法1一样的问题，速度（贝塞尔曲线）一定都要调整为Linear（匀速）呢？我们先看下下段分析——文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

2段加载动画分别是“加载”和“加载+旋转”动画。将2段动画的起止时间设为一致，速度也设为一致，此时：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

当“加载”动画加载x度时，“加载+旋转”动画也加载了x度，同时整体也旋转了x度（“加载+旋转”动画的加载是通过旋转“旋转环”180度完成，同时自身再旋转180度，全程旋转角度相同，旋转时间相同，因此某时刻旋转的角度也是相同的）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

因此在全程动画的任意时刻，“加载”动画的环形实际上是一直紧贴“加载+旋转”的环形后面在前进的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

故2段动画的速度（贝塞尔曲线）可以随意自定义（除了Spring），但是要用相同的贝塞尔曲线（这样才能保证加载和旋转的速度一致，保证加载和旋转的角度相同，从而不会使2段动画不衔接）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操演示：加载完成「1圈」-法2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

前提：先理解「加载完成半圈」动画的原理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

根据「加载完成半圈」完成前2步之后，复制一个“180”文件，为了便于理解，重新调整下命名，原“180”命名为“180 加载”（指完成圆环右半圈的加载），新“180”命名为“180 加载+旋转”（指完成圆环右半圈的加载的同时整体再旋转180度）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

（ps：命名其实也有技巧了，比如我将需要旋转的素材加入了“旋转”字样，不容易搞混，不对名称进行一定的标记的话很容易忘记哪个素材是要进行旋转操作的）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

为了便于区分，再对“180 加载+旋转”的组内元素进行重命名，统一命名为“xxx +”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

面板1选择Auto动画，自动复制出面板2，面板2中将“旋转点”设置为360度，“旋转环、旋转环 +、180 加载+旋转”设置为180度，设置旋转时长比如2s，最终完成圆环前进360度动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

思考：数字变化和环形加载的花式玩法

实操：倒计时

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画概述：完成一个倒计时3秒的动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

复制「数字递增」动画和「加载1圈」动画。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

将「数字递增」动画调整为「数字递减」动画，比如原来是从数字0递增到9，现在设置为从数字4递减到1，每次递减时长为1s，保证总时长为3s，然后4到3的透明度调整为0～100%，避免看到4数字的出现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第3步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

将「加载1圈」动画总时长统一调整为3s。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操：loading动画

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画概述：转圈动画重复循环。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

准备素材3个“旋转环”和1个“背景环”，并重新命名，具体参看源文件与实操视频。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

Auto复制面板1，在面板2中设置“旋转环1”的旋转360度，时长1s；设置“旋转环2”的旋转360度，时长0.9s；设置“旋转环3”的旋转360度，时长0.8s。（3个旋转环的起始时间是相同的）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第3步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

面板2反向Auto指向面板1，并将动画取消（即设置为“no animation”）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操：进度加载+数字出场

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

动画概述：实现数字滚动+环形加载出场。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第1步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

准备素材（该案例有4个环形），并重新命名，具体参看源文件与实操视频。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第2步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

根据「数字滚动」动画调整每位数字动画开始的顺序，间隔100ms。比如：十万位上的数字最先开始动画，从数字5位移到7；间隔100ms后万位上的数字开始动画，从数字1位移到3；以此类推。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

第3步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

根据「环形加载」动画调整旋转的角度，分别完成“加载20度”、“加载70度”、“加载240度”和“加载360”的环形动画。该案例无实操演示，当作作业。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

你还可以尝试还原以下案例——文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

From dribble,by Gleb Kuznetsov文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

From dribble,by Laura M文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

From dribble,by Oleg Frolov文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

From dribble,by Oleg Frolov文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

From dribble,by Teaya文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

我的动效说明文档

1. 基本结构

文档结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

清晰简明的动效说明文档可以让开发更好地还原效果，动效说明文档主要有以下原则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

• 包含”触发条件”，比如是通过点击、滑动等操作还是页面进出场触发
• 包含“对象”，截图表明哪部分元素对应的名称是什么，和下表中的对象名称进行对应
• 包含“动效描述”，有“变化属性、贝塞尔曲线、持续的时长”，通常我会在变化持续时长那条直线上表明对应属性的变化值

如有其他重要内容，可以在备注中进行说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

属性颜色对照文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

不同的属性，可以通过不同的颜色做区分。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

实操：贝塞尔曲线文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

常用的速度曲线（贝塞尔曲线）如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

• Default：速度越来越快，然后越来越慢
• Spring：最后有弹跳效果
• Linear：匀速
• Ease in：速度从0开始加速
• Ease out：速度慢慢减速到0
• Ease Both：速度从0开始加速，然后慢慢减速到0

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

2. 文档示例

给一个文档示例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html

作者：辛小仲文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/19497.html