Origami studio制作B站APP下拉刷新
下拉刷新教程
先看一下完成后的patch，理清功能和逻辑之后并不复杂。
一、内容布局
二、交互动效
1.list scroll及文案变化
2.下拉后刷新中的文案变化及小脸的显示和隐藏
3.天线和电波动画
4.小脸表情动画
一、内容布局
你也可以下载附件跳过布局直接开始交互动效的制作。
新建一个Gradient Fill再command+g建组命名list，这个list就是需要下拉的内容，list高度可以自由设置，这取决于你列表内容的多少，不过要注意的是anchor要设置在top center
新建Rectangle作为loding条的背景，height30、anchor bottom center，建组命名为loding，loding组的height200、anchor top center。
接着在loding组中创建两个圆角矩形作为天线，width6、height34、radius100、position x分别14和-14、pivot bottom center，接着选中两个圆角矩形建组命名为天线，anchor bottom center、width100，摆放在合适的位置。
接着创建两个圆角矩形作为电波圈，width150、height75、color-opacity0、stroke-width2，建组并命名为电波，anchor bottom center、width375、height200、摆放到合适的位置（圆角矩形的中心位置在天线的顶端）
之后是小电视的脸，直接创建一个50x50的Group，再在里面创建两个圆角矩形作为眼睛，position x分别为10和-10，width10、height3、radius100、rotation z分别为20和-20。嘴巴是在sketch中制作后复制进origami的，很简单的。
先不管笑脸的组，再创建text layer，设置如下
之后同时选中小脸和text layer建组，命名为正在更新，摆放到合适的位置。
在loding组之外新建text layer，设置如下
到此为止界面内容设置完毕
二、交互动效
1.list scroll及文案变化
先设置list position y 0、loding position y -200
选中list点击touch选择scroll y交互方式，可以看到屏幕中出现scroll patch和list position y patch了，这时候在模拟器中可以上下拖动list。
接着我们要做的是list下拉超过一定距离，松手后list在60px位置停顿2秒模拟数据更新。
先在界面中回车输入scroll，找到scroll settings patch，将其与scroll patch的settings端口连接，修改最后一行参数为60和jump style为instant，然后按住jump to y看看，这就是我们需要的停顿效果。
我们需要判断list下拉>60px,松手后jump to y，2秒后取消，我先告诉你这不完全正确，但先一步步做下去。
scroll→greater than（快捷键shift+>）→switch（shift+s）→scroll settings
我这里为了界面清晰干净，所以用到了信号发射器和接收器，它们的作用就是代替连线。快捷键w=信号发射器，shift+w=信号接收器。
我们再去模拟器看看效果，把list拖动到60px就会触发jump y，之后就再也无法拖动了，很显然这么做是错误的。而且仔细看完成后的下拉刷新，下拉>60px松手并不会触发2s刷新，还需要继续下拉>140，松手后才会触发，因为B站的下拉刷新，在60px-140px之间还有一个天线伸出的过程，当天线完全伸出后（也就是list下拉>140px）再松手才会触发2s刷新，在>140之前松手都只会触发jump to y0.5s。
搞懂逻辑之后我们继续修改并完善patch，先解决下拉后松手才能触发判断的逻辑
down+not用来模拟松开list，松手之后列表收回，当list y等于60px时，满足判断逻辑，触发jump to y
你可以试试把equals换回greater than。
接着设定停顿的时间
松手后触发jump y的同时触发了延时0.5s关闭jump y
很显然option picker是预留来判断停顿0.5s（<140）还是2s（>140）
option picker输入1时输出左边第二个参数，输入0时输出左边第一个参数，这里利用switch的开关信号0-1，当list下拉>140并松手时打开turn on输出1，这样list就能停顿2s了，如果小于140就不会达成判断条件，也就默认停顿0.5s。
松手信号发射器有大用处。
接着我们补上loding栏和下拉提示文字在下拉刷新时的变化
首先loding需要跟随list的移动，所以只需要将位移对应就行。
提示文字的位移稍微有点不同，因为它并不是全程跟随list的，而只在list下拉到100px才开始跟随移动，到140px之后停止移动，所以不能单单把progress和transition连接就行，而是要加上cilp patch，他的作用就是把100-140的幅度转换成0-1的变化。如果还不懂可以试试吧cilp去掉之后下拉列表看看。
文字的变化就简单很多了，利用option picker在list下拉大于140时切换就行。
天线下拉时的展开和天线的摆动动画有牵扯，放在后面做。
到目前为止下拉过程中的变化都完成了，接着制作松手后的一些变化。
2.下拉松手后文案的变化及小脸的显示和隐藏
上面部分是松手后如果list y大于140px则显示正在更新组，list y小于10px则隐藏。
下面部分是松手后如果list y大于140px，文案更改“正在更新”，同时小脸显示。
松手后如果list y等于60px，1.8s后文案更改为“更新完成”，同时小脸隐藏。
看一下现阶段的效果，如果你的效果和我略有不同或者有些效果无法实现，看看是不是逻辑错误或者参数错误，逐步检查不要心急。
3.天线和电波动画
3-1电波扩散动画
电波扩散是两次一组，中间有明显的停顿。
循环动画的核心是repeating animation patch，连接逻辑：
repeating animation→transition→size→layer size
repeating animation→progress→clip→transition→layer opacity
具体参数：repeating animation中duration 3、curve quadratic out，transition end分别为300和150，progress end value 0.4，delay duration0.4。
循环的信号是0～1的变化，0时电波圈宽度和高度为0 不透明度为1，0.4时不透明度为0，1时宽度为300 高度为150。
另一个圈的动画参数是一样的，加上delay就可以让两个圈的动画错开。
现在扩散的间隔时间太长，所以需要加上判断然后reset
repeating animation→greater than→wait→repeating animation reset
动画起止的控制，list下拉>140时才开始播放
3-2天线的摆动动画
然后是动画的起止
但是天线摆动两次之后中间需要有停顿，不过这里不是用大于140之类的判断就能解决的，需要用到计数器
解释一下这里的逻辑，list下拉>140后天线开始循环动画,通过equals判断天线摆动角度，每摆动到0度就计数1次，counter patch就是用来计数的，因为初始数值为1，所以计数输出等于3时循环动画停止，这时因为counter的jump端口连接之前电波循环动画中的wait，所以停顿0.4s之后重置计数，这样就能做到天线和电波的动画契合了。
至此天线和电波在下拉时的动画都完成了，不过天线在下拉过程中还有一个过渡的效果需要继续完善。
先回到之前scroll patch，list下拉从60px开始天线慢慢立起直到140px完全展开，所以progress start value 60、end value 140。
然后再回到天线的循环动画，把天线过渡的左右接收器各连接到option picker第二个数据端口。
之前解释过option picker的作用，这里通过list下拉距离来判断输出不同的参数，这样就能做到下拉时的过渡和下拉大于140后的摆动动画。
4.小脸的表情动画
前一个curve是quadratic in-out，后一个cubic in-out，其他的参数如上图。
switch右边的那些patch连接是很标准的origami动画逻辑，switch→动画曲线→过渡→layer属性。
siwtch左边的是让动画循环的逻辑，循环信号=1时动画开始（眯眼），0.1s后动画反向播放（睁眼），repeating animation里的0.4s是每次循环的间隔。
然后是动画起止的控制
解释一下，list下拉大于140px并且松手后,switch输出信号1，循环动画开启。
当list等于60且松手的情况下，延时2s后循环动画停止。
最后是完整的下拉刷新动画
最后发现要把自己制作时的想法和思路用文字复述出来还是有难度的，所以如果有哪些步骤交代的不清楚的还请见谅，有些patch连接搞不懂可以尝试断开连线一步一步尝试效果，就像电路排查一样，我刚开始学习origami也是下载官方demo一点点琢磨的，当然了相比patch的用法，逻辑思维更重要。
