protopie相机原型01
用protopie软件制作仿真相机原型
写这篇文章主要是记录关于protopie的学习心得，共勉！
相机原型的主要元素
要实现基本的拍照功能，需具备摄像头显示区域、拍照按钮及照片预览入口三部分。
对应的基本交互逻辑是按下拍照按钮-摄像头捕捉画面-显示缩略图。
有了基本逻辑之后，我们开始一个简易相机原型的设计。
简易相机原型设计
01，打开protopie，置入相机，添加拍照按钮、画面缩略图。
设置参数：
相机。
锁定尺寸（否则照片缩小之后会发生变形），
相机锚点改为居中（其他元素最好统一锚点位置，便于添加位移相关交互动效），
打开自动开启开关（否则相机不能显示画面）。
拍照按钮。
按照自己喜好设计即可。
画面缩略图。
按照自己喜好设计即可。
如图，缩略图为圆角矩形，56px见方、圆角10px、2px 黑色边框 。
*记住这里的缩略图参数，之后我们需要为照片（相机捕捉到的画面）缩略图添加同样的参数。
02，添加交互。
按照基本的交互逻辑，添加交互动效。
对象：拍照按钮
触发动作：点击
反应动作：相机捕捉画面
捕捉画面缩小至缩略图大小
捕捉画面x轴、y轴分别移动至缩略图位置
为捕捉画面添加缩略图同样的圆角
为捕捉画面添加缩略图同样的边框
*相机有开启和捕捉画面两个动作，上一步我们设置了相机自动开启，捕捉当前画面，即拍照。
*移动、大小、圆角、边框等动作时长参数，根据想达到的效果自行设置。
03，预览动效。
（预览动图，待添加）
到这里，最基础的相机原型就算做完了。存在的问题也显而易见，不能二次或连续性拍照。
仿真相机原型设计
在简易相机原型模块，我们完成了基础设计，现在加大难度，解决上一模块的问题，向着仿真模型进阶！
01，分析问题。
简易相机原型的交互逻辑是相机区域捕捉到画面之后，自身变成了缩略图。因为没有相机，二次拍照中断。对于拍照中断的问题，我们需要相机完成拍照之后立马开始下一轮的工作，缩略图重新变成相机模式，即，相机重置。因此，我们需要为相机添加重置功能，使它可以重新拍照。
02，解决问题。
通过实际检验可知，相机重置需要一定的时间，即使时间极短，也会有极其明显的跳跃，造成交互动效不流畅。
假如有两个相机，第一个完成拍照之后，第二个立刻开始工作。但，第一个相机重置依然存在以上问题。
那假如有三个相机，01拍照完成，02开始工作，03重置；02拍照完成，03开始工作，01重置；03拍照完成，01开始工作，02重置；01拍照完成，02开始工作，03重置...
这样三个相机互相咬合，周而复始，就可以完美完成拍照的功能设计。
*特别模块，引入新概念。
为了完美解决问题，仿真相机原型得以复刻，我们将引入protopie组件和protopie变量的概念。
组件：
组件是由图层与交互构成的可复用集合。任意图层和交互构成的集合都可转換为组件，并通过创建子版组件将组仵复用于各场景的任意位置。该功能可以避免不必要的重复性工作、提升每一场景的易读性，从根本上提高原型设计工作流效率。
简而言之，任何图层和交互都能够转换为组件，组件可复用。
由于组件与组件之间、组件与场景之间相互独立，因此我们只能通过发送触发动作和接受反应动作的方式传递命令。
变量：
变量能储存你需要使用的值，例如名字、密码和账户余额等。变量跟随变化储存最新的值，从而表现出丰富的动态交互。在任何你能使用表达式的地方使用变量。
*之所以需要引入组件，是因为拍照按钮关联多个不同时间不同状态的图层容易出现混乱，当然不用组件也可以，细心一点，麻烦一点就是了。
*之所以需要引入变量，是因为我们需要对当前相机进行判断，需要对相机状态进行判断，针对不同相机，发出不同命令。
03，相机原型设计。
我们从大到小，先从整个场景开始搭建，再深入组件设计。
场景设计
根据我们之前的预想，需要三个相机，对应的我们需要一个控制相机显示顺序的变量current_camera以及一个控制相机启动的变量switch_on。则：
交互对象：拍照按钮
变量：数字变量current_camera，初始值1；文本变量switch_on，初始值off。
触发动作：点击
反应动作：先假设拍照所需时长为x秒，则：
当current_camera=1，switch_on=off时，
赋值switch_on为on，即开启以下操作;
相机01拍照；
相机02准备；
current_camera赋值为2；
x秒后，相机02图层置顶（为了在相机02拍照完成后，缩略图置顶）；
x秒后，相机03重置。
x秒后，为switch_on变量赋值off。
同理，当current_camera=2/3时，更改对应相机顺序即可。
组件设计
从上面的场景可知，我们需要一个相机组件，这个相机需要具备拍照、准备、重置等功能。
拍照：参考简易相机原型就行。
准备：开启相机。
重置：重置相机：添加反应动作“重置”，将相机状态归零。
调用组件后，通过发送触发动作和接收反应动作的方式，完成预想交互动作。
04，预览动效。
（预览动图，待添加）
结语
就到这里咯！！！下篇见
