一、案例效果
二、场景应用
关联控制，是Epub360特色组件，可以将各个组件进行逻辑上的关联、通过手势进行统一控制。目前还仅限于对动画的关联控制，后续会增加支持更丰富的交互效果。
三、素材准备
文末附件下载素材，非商用，仅供学习使用。
四、组件原理
1.手指在手机上滑动屏幕的【距离】，控制动画从开始播放到结束播放的【时间】，用距离控制时间，其实是比较抽象的。
相当于给动画规定了一个播放控制条（如上图所示），通过手势滑动，控制动画播放的进度。延迟与延长，是指在此区间滑动，不会触发动画。
2.以开篇的案例为例，大家可以认为，有这么一个播放控制条：长度为1200，滑动到不同位置时，动画播放状态如下图所示：
3.通过延迟／延长，可以对多个关联控制进行时间轴的同步处理（ 如下图所示 ）
五、组件教程
基本用法
1.在正常的微信PLUS页面上（不要用长页面）添加图片、文字等元素都页面中，给这些元素添加等待触发的动画，比如直线运动。
2.点击高级组件中的【关联控制】，添加到页面中
3.在逻辑小面板或者直接点击选中关联控制组件，在右侧的添加联动设置里，将动画添加进来
4.我们要求手指向上滑动屏幕400个像素，在这个期间，让小球的动画过程从开始到结束。选中关联控制组件，设置长度的值。
5.预览，用鼠标向上滑动屏幕查看效果。
高级用法
1.其他设置讲解
（1）主控方式：目前只有“手势滑动”方式
（2）方向限定：针对“手势滑动”的滑动方向设置
Y＋，向上滑屏控制，起始从下往上（类似一般的上下翻页的下一页手势）
X＋，向左滑屏控制，起始从右向左（类似一般的左右翻页的下一页手势）
Y－，向下滑屏控制，起始从上往下（与一般的上下翻页的下一页手势相反）
X－，向右滑屏控制，起始从左向右（与一般的左右翻页的下一页手势相反）
（3）四个关联控制的参数设置
长度：用来计算手指在屏幕上的滑动距离，设置数值后，规定了滑动区间范围，即滑动多少距离后，动画在这个距离内执行播放。动画执行速度跟手指滑动的速度关联，滑动越快，动画执行的越快，反之，则越慢。
初始：动画初始状态，例如长度为400的动画，初始为200时，那么滑动开始时，被关联的动画就是已经到执行了一半的状态。
延迟：在动画触发前预留一段滑动距离，例如长度设置为400，延迟设置为400。手指滑动了400像素以后，动画才被触发播放。延迟的数值越大，动画播放推迟的时间越久，所以一共是滑动屏幕800PX，动画才执行完。
延长：在动画执行完后滞留一段滑动距离。主要针对双向滑动的情况。例如：当手势向下滑动到一定距离后动画播放完毕，这时手势要反向滑动，动画应该是立即反向执行，但是设置了延长值，就要推迟一会，推迟的时间就是由延长的数值决定的（动画播放完毕后，延长才起作用，动画播放途中手势反向滑动，延长无效果）。
（4）单向控制和开启惯性
单向控制
默认不勾选。来回滑动都可以影响动画播放
如果勾选，则仅限于从起始向结束单向播放动画，反向滑动屏幕没有效果。
开启惯性：
默认勾选，这样手势停下来，动画会继续运行一段；
如果不勾选，滑动动作一旦停止、动画会立即停止。
2.另外一个高级用法是不能滑动的长layer容器，放在普通的微信PLUS画布上进行滑动控制。如该案例的效果《视差官网产品展示》。
制作关键要点：
（1）layer页面尺寸可以自定义。在layer页面内设置一个长页面，摆放文字图片等内容。
（2）layer页面内可以添加多个关联控制，多个等待触发的动画，分别跟关联控制绑定，设置相关参数，具体参数细节可以自己尝试下。
（3）将layer容器添加到页面，重点：让layer 容器尺寸跟layer内容尺寸高度一致，确保不可滑动。并给layer容器设置一个向上的直线运动动画，设置为等待触发
（4）再加一个关联控制，来控制这个动画，目的是在滑动长 layer时，layer容器整体向上运动。
（5）再结合layer页面本身也添加了多个关联控制组件，在滑动手机屏幕时，可以达到一个滑动动作对layer 容器内所有动画跟layer容器本身的直线运动都有效。
3.总结要点
长度值决定了手势滑动区间。值越大，执行动画所需要滑过的距离越长；
多个关联控制的时间同步，可以用延迟／延长统筹控制；
关联控制的动画，现阶段只能采用“等待触发”的方式。