Origami Studio自定义slider组件

有些时候官方组件不能满足我们的使用需求时就需要我们自制组件了。

Origaimi可以自定义组件和模块，组件可以在layer中使用，比如官方的iOS slider，组件一般是带有视觉效果和可交互的，类似封装的js插件；还有一种是patch模块，一般自定义的patch均为灰色的，这种模块类似代码中的function。

这次我们自制一个slider组件，官方的slider不能修改按钮的大小和滑块条的高度，在使用上很不方便。

左边官方，右边自制

首先设计滑块的基本样式

新建一个Group命名为“进度滑块”，宽度300、高度50，然后在这个组中新建一个Oval命名为“滑块按钮”和两个Rectangle分别命名为“滑块背景”和“滑块进度”，设置如如下图

打包组件

在创建各种patch之前，我们先将上面创建的组打包成一个真正的组件，选中滑块组的情况下快捷键control+command+g（菜单栏layer-create component），将这个组打包成一个组件，你可以随意命名该组件，我们这里命名为Slider Demo。

patch逻辑

直接双击这个组件进入内部开始下面的步骤。

首先我们要实现滑块按钮横向拖动，选中按钮并点击touch选择drag，现在可以在模拟其中拖动按钮了，不过我们只需要Y轴拖动，所以这时候删除蓝色的按钮patch，接着连接按钮x轴。之后在选中drag patch settings的情况下回车输入drag，选择drag settings patch，把clip勾上、max x300 y0，这样做是为了把滑块的滑动限定在范围内。

这时去模拟器中试试，我们发现按钮的移动到右边会出界，因为我们把按钮的原点设置在了左端，如果我们把原点设置在右端和中间均会出现类似的情况，所以我们需要用progerss和transition的配合，把滑动的范围限定在0-270，就是移动到右端减去按钮的大小，看下图

-号的两个输入端口是连接输入参数的，当组件参数改变时，滑动范围也会随之改变。

接着我们让进度条也跟随按钮拖动，新建progerss和transition输出给“滑块进度”的width，下图

progerss重复是避免之后连线太乱，-号和/号运算也是预留给参数输入的。这时候你可以把按钮的opacity调低看看进度条的位置，进度条永远跟随在按钮的中间位置。

到目前为止我们的滑块组件看上去好像完成了，因为它能滑动也像个滑块的样子，但是别忘了组件是可以随意用在其他项目中的，而且它可以很方便的修改样式，也可以输出参数的。

所以我们继续，接下来才是重头戏。

添加输入端口

现在我们退出组件内部，快捷键command+↑（点击界面左上角的汉堡icon），选中组件command+i，然后开始add input，总共添加11个输入端口，设置如下图

tag要求不能重复，不过我有些没有设置也不影响组件的使用，但是Enable端口的tag必须对应，否则无效，另外所有0的值需要重新输入一遍，否则无效，不过滑块长度中最大值的0不要去修改，总之多跳几次坑就知道为什么了。

添加好输入端口后，除了enable端口，其他端口修改参数模拟器中的滑块均没有变化，那是因为这些端口还没和组件内部的layer属性对应。

所以我们再次进入组件内部，我们会发现面板中多了一列紫色的patch，这些就是输入端口了。

除了enable不要动以外，其他都要对应layer属性，具体看图

还有一下端口需要和之前的patch配合

解释一下，滑块长度更改的时候组件的滑动范围也要随之更改，所以滑块长度与end value相连，其他的其实也没什么好解释的，自己多尝试尝试。

滑块进度的输入

上面这部分就是把进度转换成滑动范围

这部分输入进度参数时判断信号，只要数值持续输入就能持续打开reset端口，和上面的patch配合就能修改滑块的进度了。比如视频播放时间持续输入，进度就持续增加。

最后我们的这个滑块组件除了能控制自身滑动进度以外，还要能控制其他文件的进度，如视频和音频，那么就需要输出端口

还是选中组件command+i，add output

进入组件内部找到蓝色的输出端口连接patch就行。

到目前为止组件基本已经完成，剩下的就是将组件保存进库中，以便之后使用。不过在保存之前最好command+i添加文档说明。

选中组件快捷键option+command+c或者右键add to user patch library，这样组件就进入库中了，点击+就可以在library中找到我们自定义的组件了。

如果要修改已经保存到库中的组件，我建议不要直接从组件库打开修改（菜单栏patch→show patch folder），而是新建一个文档，然后调用组件再修改，这样可以修改包括文档说明和端口等内容，而不是单单patch的修改。修改好之后再次add to user patch library就能更新修改的内容了。

最后可以检测一下组件是否好用，新建一个文档，添加之前的组件，新建一个video file，选择一部短视频，不要太长，几分钟的就行，然后什么都不要更改，我们不是来做视频播放器的。

然后选中视频layer，点击touch选择current time，这个是视频的时间输出端口。

然后这样连接

progress的end value是视频的总时间（s）

现在你可以边看视频边观察进度条是否正常走动了（视频播放到底，进度条也要走到底），但不要拖动进度条。

接着还要测试拖动进度条更改视频进度，选中slider demo，点击touch选择 滑块进度，然后如下图连接

并且视频layer的scrub要勾选，这样才能拖动进度条并更改视频进度。如果还要继续播放只需要把scrub的勾去掉就行。

如果到目前为止一切正常，那么你的滑块就算真的做好了。

下次将展示制作视频播放器所用到的patch，非教程。