Origami 移动端视频播放器交互动效制作

原型演示

移动端播放器交互制作，实现几个交互功能：视频播放控制、进度拖拽控制、音量控制和操作栏的隐藏显示以及视频的重播。

实现以上交互以及功能所需要的patch，看上去比较复杂，其实理清逻辑和功能之后还是很好理解的。

---

1.视频播放

点击‘播放按钮’图层组控制视频的播放，同时这个switch开关还控制播放/暂停icon的切换，通过option sender的布尔判断switch开关信号并连接播放/暂停icon的enable端口来做到按钮的显示切换。

另外，通过equals来判断视频的播放时间，当播放到最后1秒时切换播放icon。

然后是双击视频区域控制播放，重要的是double tap，这个patch可以判断交互动作是双击还是单击，然后通过逻辑or和之前的switch连接，这样点击按钮或者双击视频区域都可以播放或暂停视频。

---

2.视频播放进度以及进度条拖拽

视频在播放的时候，进度条会随着时间而增长，通过progress和transition来匹配视频时间和进度条移动。

视频layer有一个输出参数是current time，它的值就是视频当前的时间，将其与progress和transition连接，最终输出给进度条的 ‘滑块进度’属性，这样视频播放时，进度条就随之增长了。

进度滑块有一个输出参数“滑块进度”，同transition连接并输出给视频layer的scrub time端口。

这样当拖拽滑块时，视频的播放进度随之改变了。

但这里有个问题，视频播放时无法拖拽滑块，而拖拽滑块时视频必须是暂停的，影响这个问题的是视频layer里的scrub属性，它打开的情况下才能拖动视频进度，而关闭的时候就能正常播放。

所以这里的逻辑是这样的，当我按住滑块按钮时 scrub打开，当我松开滑块按钮后scrub关闭视频正常播放

---

3.音量控制

通过drag patch来监测热区的滑动动作，drag settings限制滑动极限在x轴正负100，再通过point unpack获取x坐标的参数，progerss和transition匹配参数，就可以做到音量和音量条的控制了。

另外，音量窗口的显示和隐藏逻辑是，按住屏幕右侧的热区时显示，松手2秒之后隐藏。

---

4.操作栏的显示和隐藏

之前double tap patch有一个端口是single tap，将这个端口连接到一个switch，再通过动画曲线和 transition patch链接到工具栏的opacity和enable端口，这样就可以通过点击视频播放区域显示和隐藏操作栏了。

再将single tap端口链接wait并设置8s持续时间连接到switch的关闭端口。这样点击区域显示操作栏8s后自动隐藏

操作栏显示之后点击播放/暂停以及拖动进度条继续延长8s的显示时间。

这里利用option picker的功能，在按下进度条的时候信号是1，option picker左侧的端口排序是0、1、2、3，所以输入信号1就代表第二个选项被输出，而这里我利用进度条拖动时输入的参数为正数来持续输出脉冲信号，持续激活wait的start端口，避免拖动时间过久后自动隐藏操作栏。

---

5.重播

通过equals判断输入时间是否与预设数值相等来控制重播icon的显示，而点击重播按钮打开视频layer的loop属性。