Origami 教程 - radio button, star

Origami是很好用的交互原型的demo工具，逻辑判断，app级交互，动效一样不缺，sketch 复制粘贴，全矢量支持，比大多数收费工具都好用。（比如principle 没有逻辑判断，framerX要会写rect的代码，protopie只能贴位图）
Origami的简单介绍可以看鹅厂的说明。
可惜国内用的人很少，每次盘点demo工具都没有Origami。
我会整理一些origami的技巧到这里，大多是origami社区里看来的，给自己留个记录。

为什么会把Radio button 和 Star rating 放一起说呢，因为在做之前，我也没想到他们的实现逻辑是一样的。接下来会以star rating 为主说明怎么实现，完全学懂后 radio button也就会了。（如果不会说明没学透哦）

1. 先复制粘贴一颗星星到origami里，粘贴完以后右边层组是这样的

   
   star.png

2. 然后用 loop 循环出5颗星，如图前三个patch分别是：
   

   loop.png

loop - 循环5次，注意loop是从0开始算即 [0,1,2,3,4]
x - 乘号，计算下一个星的位置，每颗星的坐标间距45
+ - 加号，这组星星的初始位置，从坐标60开始
这三个patch 依序连接起来，最后连到右边Star组属性的x坐标上，蓝色的patch position x会自动出现。全部连好后，预览里就能看到5颗星了。

stars.png

3. 点到第几个星，就要亮起几个星，就是Tap 第4个星，那么前4个星星都要亮起。

   
   loop option.png

Interaction - 在右边Star组touch里选择Tap，会自动建好Interaction patch。
Loop option switch - 这里的星星是loop循环出来的，所以要用到Loop option switch去识别点到第几个星。
Less or equal - 小于等于点的第几个星。比如 loop option输出3，就是点 (Tap) 到 loop生成的第4个星，loop option相当于是输出了一个loop的index的值。小于等于就是点到第4个星，那么前4个都在变化范围内。
Transition - 默认是数值，在patch上右键，type里选择color，就可以设定初始颜色灰色，点亮的颜色橙色。
最后transition的输出连上star的color属性。

star1.png

4. 恢复默认被高亮的第一个星到灰色状态
   要用到 loop 里 any 这个patch。
   Any 通常用来判断Loop的图层有没有被tapped，任意图层被tapped，输出True，没有被tapped，输出False。把Any和前面tap星星的判断连起来，当star组没有被tap时，输出 False，即星星不会被点亮。
   star rating.png

刷新一下预览，就可以看到大功告成，star rating就是这么简单。Radio button的做法一摸一样，只是把 less or equal换成 = 就可以了，不妨自己试试。