1.前言

大家好，我是土木君      

作为射击师，大家都知道动效设计对于产品是至关重要的。好的动效可以弥补静态页面的表达不足，赋予产品界面生命力和活力，促进用户与产品之间的交流。对于许多用windows系统的同学来说，寻找一款好的交互软件 还是比较困难的，那么今天给大家安利一下ProtoPie这款软件，无需代码。经过长期的使用，基本可以实现市面上绝大多数的动效效果。

2.软件原理

ProtoPie的概念模型是基于浅显易懂的交互原理所创建，以此可以替换复杂的编程语言。 自然界物体间的交互是由动作的对象，引起交互发生的触发动作，受触发动作影响而产生的反应动作，这三者组成。

ProtoPie就是利用将对象、触发动作、反应动作组合成交互的原理，制作出一个个完整的交互原型。如上图所展示的，图层就是交互对象，点击图层的动作就是触发动作，点击后图层发生的变化就是反应动作。

3.基本步骤

步骤1

导入素材文件【附件下载，感谢动效由@Alisa提供，我只是一个搬运工，以下是她的链接：https://dribbble.com/Alisa_33】

步骤2：滑动联动

如图，

1.绘制一个需要变化的矩形

2.设定滑动区域

3.设定初始状态：隐藏专辑信息

3.添加触发动作—：联动

4.设置锚垫：锚垫设置为中上

5.添加反应动作：透明度，移动，大小，

参数看下图

步骤3：点击

1.Night图标放置sel和def两种状态在同一位置。sel透明度0%，def透明度100%

2.进度条变为0

3.文案改变

参数看下图

步骤4：进度条联动

主要是绑定进度条位置

参数看下图

步骤5：时间循环【变量&范围&监听】

说明：ProtoPie支持变量功能。变量值的属性有文本、数字、颜色三种。通过使用“赋值”反应动作让变量的值发生变化，然后再通过“侦查“触发动作检测到变量发生了变化，只要有变化发生就会触发设定好的反应动作。另外，在反应动作的属性设置里，除了直接输入数值，还可以输入表达式，而表达式里面可以套用变量。也就是说现在调整动作属性变化的方式有两种，一种是直接输入数值，一种是通过含有变量的表达式。

1.先建立两个数字函数，用于表达时间

2.监听两个函数

3.设置函数范围

参数看下图

喜欢请点赞

源文件在这里下载：https://share.protopie.io/gpRtAEM9A3g