练习1
根据官网上的视频教学，开始了Origami的学习。教学是以一个类似Facebook的社交App的时间轴界面为例子，首先拖拽图片，自动生成一个图片图层，接下来插入一个ScrollPatch，直接连接图片的图层就实现了滚屏的效果。然后就是添加剩余的界面元素，按照设计稿的位置排布。
因为这个教程的交互比较简单，就没有考虑到交互添加的顺序问题，基板上是按照从底层到上层，从上往下的顺序。想必在设计比较复杂的界面时要考虑得更完善一些。
首先做的是标题栏的收缩，这个交互的逻辑是，首先用Transition设定标题栏要收缩的高度（32px），再取时间轴图片滚动时的Y坐标，用Progress同样设定32px的距离，连接到标题栏的Transition，发现标题栏会完全消失，这是由于没有限定Transition的值导致超过1，然后在滚动的Progress和标题栏的Transition之间加一个Range，限定为0～1的值，效果达成。对于标题栏上的文字和按钮，将Range的输出直接连到标题栏组的模块上，会生成一个新的节点，在标题栏组里将这个节点分别连上文字和按钮的Scale和Opacity过程，就完成了。测试时发现顶部状态栏会被截掉，这是由于标题栏组的对齐锚点在中心，改成顶部居中，问题解决。
其余的两个交互动作分别是：首页点击某张照片弹出详情页；发布新状态。第一个效果是先添加一个HitArea，再添加Interacion，讲Tap节点连接到使详情页出现的Swipe动作上面，同时添加首页的渐进渐出效果。
第二个效果是最复杂的，分为两部分，一是点击加号按钮弹出新状态编辑页面，这个比较好做，用Interacion连接两个元素，记得要用Switch来保证弹出后不会消失。二是点击编辑页面的Post按钮后，编辑页退出，首页下降一定的高度，留出空白，接着新发布的状态出现。过程是，先给编辑页的两个按钮加上HitArea，是用w快捷键添加Wireless模块，再在上一层添加WirelessReceiver，用Logic模块设定按两个按钮之一都能使编辑页关闭；接下来添加点击Post按钮时新状态出现的效果，并且将首页的高度增加900px（正是新状态需要的高度）以留出空白。此时发现，留出空白和新状态出现是同时的，并没有先后顺序，这就需要复制这个动画模块，并且使用Delay模块延迟新状态的出现，达到效果。
最后一个效果是现在还没完全弄懂的，只是照着做。就是当新状态增加了之后，标题栏并没有按照原先设定的高度进行收缩，需要进行调整。首先复制原先让标题栏收缩的Progress模块，同样连接上Scroll模块的Y坐标节点，将Start和EndValue改成添加新状态后的坐标值和坐标值＋32，将初始首页连接Transition的StartValue，将添加后的首页连接EndValue，Progress连接留出空白的动画模块，效果达成。
此外，我觉得Origami中有些概念比较关键，比如0和1的概念，0表示关闭、无效果，1表示打开、有效果。很多时候都需要用到这个思路。还有一些技巧，比如按住Option拖移模块和连接线可以复制；连接操作模块和图层可以只对该图层进行操作。
网友评论