在日常的设计工作中，难免会遇到一些制作交互原型的工作。与静态原型相比，交互式原型更直观。其次，在研究一些动态效果的时候，直接把参数调整给工程师会比口述更简单粗暴高效。

序

通常，在项目中，对于一些交互式演示，动态演示比口头描述更直观。

另一方面，移动终端通常借助Principle制作演示效果。

掌握原则的必要性

1.易学

课时约16课时，每课时半小时(含练习时间)，约2周晚上即可完成。

教程推荐:哔哩哔哩-金豪原理教程。

2.提高还原度

互动讲解示范+规范动态讲解。交互演示明确地向整个项目团队传达用户交互，而动态解释则使开发能够尽可能地恢复交互需求。

3.促进落地

对于一些用户交互，演示比口头表达更有基础。

4.体验顺畅

使用户体验更加“舒适”(用户交互和反馈的时机，动态反馈的持续时间和速率等。).

在一些项目交互式演示中，经常使用数字转换和铃声加载。接下来我就来分享一下如何通过Principle实现数字转换和铃声加载。

技能1。数字变化

应用场景:

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

这里有两个数字变化的实际案例，分别是“数字增量”和“数字滚动”。

实际操作:增加数量

步骤1

创建一个新组件，在组件中复制几组数字，并在数字之间创建自动动画。此时预览效果是从第一个数字到最后一个数字，没有过渡动画。

步骤2

为了使动画不跳过中间的数字变化，可以在每个数字面板上复制一个同名的矩形B，将B在奇数面板和偶数面板上的位置错开，然后为B的每次位移设置动画时间，比如0.5s。

步骤3

B的位移设置使得数字的过渡出现，数字之间的过渡时间可以通过改变B每次位移的动画时间来控制，最后将所有矩形B的透明度改为0。

动画完成。

实际操作:数字滚动

步骤1

创建新组件，在组件面板1中创建文本，输入数字字符串(例如，从0到9)，为面板1创建自动动画，并生成面板2。

步骤2

移动数字串在面板2中的位置，然后设置位移动画的持续时间，例如0.8s

步骤3

在两个面板上标记“剪辑子层”，以仅显示面板上显示的内容。

动画完成。动画完成。

扩展案例

您可以尝试恢复上述扩展案例。

提示2:环形加载

应用场景:

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

实际操作:加载圆“半圆”

步骤1

准备材料，画两个圆成一个环，准备两个直径和环宽相同的点。(ps:也可以将素描素材命名为“圆”，导入到《原理》中。这样，Principle中的圆就是位图，不能修改颜色。如果直接在Principle里画一个圆，可以随意改变颜色。)

步骤2

了解原理，分组，调整大小，参考材料命名(要设置带旋转的名称，便于理解)。

步骤3

面板1选择自动动画，面板2自动复制。在面板2中，“旋转点和旋转环”设置为180度，旋转时间设置为1s，从而完成环向前的180度动画。

动画完成。

思考:一圈怎么装完？

方法一:改变加载半圆的起点

从上图可以看出，我们可以通过调整“半圆弧”和“遮罩”图层的范围来改变加载半圆的起点(右半部分的原始矩形范围调整为左半部分，左半部分的原始矩形范围调整为右半部分)。

你可以理解这一点:

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

起点:0度，终点:180度

起点:180度，终点:360度

然后，我们将“起点0度，终点180度”与“起点180度，终点360度”结合起来。前者旋转后，后者开始旋转，连接起来，我们会看到一个旋转360度的完整动画。

限制:如果两个动画的速度(贝塞尔曲线)设置为非线性(匀速)，则看起来像两个动画，两者都必须设置为线性。(因为第二段的速度不是Linear，所以中间衔接处的速度不一样，造成衔接处的卡顿感，明显看起来不像连贯的动画。)

实际演示:“1圈”——加载后完成方法1(未提供实际演示，视为一次操作。)

方法2:加载环时旋转

让我们先了解一下原理——

统一以上视频中的铃声颜色，从而完成“铃声加载”。

加载一圈的效果是通过结合“两个动画”来实现的，不同的是这两个动画同时开始和结束。这两段动画分别是“加载一个环”半圆“同时绕中心旋转180度”(简称“加载+旋转”)和“加载一个环”半圆(简称“加载”)。

是否存在与方法1相同的问题，即速度(贝塞尔曲线)必须调整为线性(匀速)？我们先来看下一个分析-

这两个加载动画分别是“加载”和“加载+旋转”动画。将两个动画的起止时间和速度设置为一致。此时:

“加载”动画加载x度时，“加载+旋转”动画也加载x度，整个动画旋转x度(将“旋转环”旋转180度完成“加载+旋转”动画的加载，同时旋转180度，整个过程旋转角度和旋转时间相同)。

所以，在整个动画的任何一个瞬间，“加载”动画的环其实总是跟随着“加载+旋转”的环。

所以两个动画的速度(贝塞尔曲线)可以随意定制(Spring除外)，但要用相同的贝塞尔曲线(这样才能保证相同的速度和相同的加载旋转角度，不至于让两个动画脱节)。

实际演示:加载后“1圈”——方法2

前提条件:首先，了解“加载完整半圆”动画的原理。

步骤1

按照“加载半圆”完成前两步后，复制一个“180”文件。为了便于理解，重新调整命名。原“180”命名为“180加载”(指加载环的右半圆)，新“180”命名为“180加载+旋转”(指加载环的右半圆的同时进行整个再旋转)

(ps:命名也有技巧。比如我在需要旋转的素材上加了“旋转”这个词。不容易搞混。如果名字没有标注，很容易忘记要旋转哪个材质。)

为了便于区分，“180°加载+旋转”组中的元素被重新命名并统一命名为“xxx+”。

步骤2

面板1选择自动动画，面板2自动复制。在面板2中，“旋转点”设置为360度，“旋转环，旋转环+，180加载+旋转”设置为180度，旋转时间设置为2秒，完成圆环前进的360度动画。

思考:数字变化和铃声加载的花式游戏

实际操作:倒计时

动画概述:完成一个倒计时3秒的动画。

步骤1

复制数值增量动画和加载1圆动画。

步骤2

将“数字递增”动画调整为“数字递减”动画，比如原来从0增加到9，现在设置为从4减少到1，每次减少的时长为1s，保证总时长为3s，然后将4比3的透明度调整为0 ~ 100%，避免出现4个数字。

步骤3

将“加载1圈”的总动画时间调整为3s。

动画完成。

实际操作:加载动画

动画概述:循环动画重复循环。

步骤1

准备材料的三个“旋转环”和一个“背景环”，并重命名。详见源文件和实用视频。

步骤2

自动复制面板1，并将面板2中“旋转环1”的旋转设置为360度1秒；设置“转环2”旋转360度0.9s；将“旋转环3”设置为360度旋转0.8秒(三个旋转环的开始时间相同)

步骤3

面板2以反向自动方式指向面板1，并取消动画(即，它被设置为“无动画”)。

动画完成。

实际操作:进度加载+数字外观

动画概述:实现数字滚动+铃声加载。

步骤1

准备材料(本例有4个环)并重命名。详见源文件和实用视频。

步骤2

根据“数字滚动”动画调整每个数字动画的开始顺序，间隔100毫秒。比如10万位数字上的数字先开始动画，从数字5移位到7；100ms间隔后，万位上的数字开始动画化，从1移位到3；等等。

步骤3

根据“加载环”动画调整旋转角度，分别完成“加载20度”、“加载70度”、“加载240度”、“加载360度”的环动画。这种情况没有实际演示，视为作业。

你也可以尝试还原以下案例-

由库兹涅佐夫运球

劳拉·米运球

奥列格·弗罗洛夫运球

奥列格·弗罗洛夫运球

提雅运球得分

我的动画描述文档

1.基本结构

文档结构

清晰简洁的动态效果描述文档可以使开发更好的还原效果，动态效果描述文档主要有以下几个原则:

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

如果还有其他重要内容，可以在备注中说明。

属性颜色对比度

不同的属性可以用不同的颜色来区分。

实际操作:贝塞尔曲线

常用的速度曲线(贝塞尔曲线)如下:

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

2.样本文件

举个文档例子。