Protopie教程(一)先导篇

Protopie是什么？

无代码原型工具，轻松组合即可制作交互动效，摆脱代码束缚体验感应式交互。

官网了解一下：http://www.protopie.cn/features/

总结出以下几点protopie的优势：

1、自带容器滚页、滑页，操作简便；各种范围和手势的关联作用，好用得不行；

2、交互手势丰富，支持3D touch、倾斜等传感触发；关联、条件设置等超级好用，笔芯；

3、变量、表达式和函数解决各种数据问题，你值得拥有；

4、自带电脑预览窗口，移动端有对应预览app，实时查看可通过扫二维码、连接设备IP地址、usb端口三种方式连接，还可以保存成离线状态文件；

后续的教程中会陆续涉及到以上几点，今天先简单介绍下载和界面分布。

一、Protopie工具下载

小伙伴们可以到上面提到的官网直接下载protopie试用版，链接在此http://www.protopie.cn/download/

一般试用为7天，注册后加10天试用时间，过了试用期需要购买正版软件（支持正版），我的是在淘宝上荔枝数码买的中文版，299元（不是广告谢谢），国际版跟中文版一样，但是价格是2倍，我也不知道为啥，😂

另外，官网偶尔会做做活动，已然错过了半价时间，哭戚戚。。

二、界面简介

1、元素选择

可添加图片、视频、矩形、圆形、文本、输入文本、容器

2、尺寸/场景切换

支持ios、安卓、平板及自定义尺寸；可切换和管理不同的场景

选择设备

切换场景

3、作品演示（触发除外）

预览窗口、设备连接、播放（连接到手机后）、云端（显示最新一次上传结果）、上传至云端（直接上传本次文档）

云端和上传都是建立在有账号的基础上哦～

4、图层区

显示本场景下的所有图层的名称、顺序、包含关系，直接双击名称可修改，位置可拖动进行调整。

各图层均可进行锁定/解锁和显示/隐藏操作。

图层下有变量设置区域，可添加两种变量，一是适用于所有场景，而是仅适用于当前场景，变量如何使用，后面还会有章节详细描述。

变量创建

5、屏幕展示区

仅在屏幕区域内的内容能被看到，无论是预览窗口还是手机app。

6、添加交互+触发区

Protopie的核心功能区域包含添加触发动作、动作形式、动画时间轴，每一个操作对应的属性在图层属性区进行编辑。触发动作丰富，如下：

添加触发

另外单个动作下可选择不同的动作形式，灵活运用效果非常强大。

7、图层属性区

显示每个图层属性，包括有位置、大小、锚点、旋转、透明度、圆角、填充色（不可设置描边）、文本大小、位置、默认文本等，容器有选择是否可滚页、滑页、是否剪切子层内容等功能。

以上，了解了界面后，我们开始拿实际项目做一下吧～