意派Epub360高级教程：关联控制.docxVIP

关联控制，是Epub360特色组件，可以将各个组件进行逻辑上的关联、通过手势进行统一控制。目前还仅限于对动画的关联控制，后续会增加支持更丰富的交互效果。可以先看一个案例了解一下：关联控制案例展示/v2/manage/book/kkdrkj/present/设置方法在添加“关联控制”组件后，具体设置方法如下：主控方式：目前只有“手势滑动”方式方向限定：针对“手势滑动”的滑动方向设置Y＋，上下滑屏控制，起始从下往上（一般的上下翻页的下一页手势）X＋，左右滑屏控制，起始从右向左（一般的左右翻页的下一页手势）Y－，上下滑屏控制，起始从上往下（与一般的上下翻页手势相反）X－，左右滑屏控制，起始从左向右（与一般的左右翻页手势相反）长度：用来计算手指在屏幕上的滑动距离，设置数值后，规定了滑动区间范围，即滑动多少距离后，动画被触发播放。初始：动画初始状态，例如长度为400的动画，初始为200时，那么这个动画开始就是已经到执行了一半的状态。延迟：在动画触发前预留一段滑动距离，例如长度设置为400，手指已经滑动了400，这时动画应该被触发播放了，但是设置了延迟，这个动画会推迟播放，延迟的数值越大，动画播放推迟的时间越久。延长：在动画执行完后滞留一段滑动距离。主要针对双向滑动的情况，? ? ? ? 例如：当手势向下滑动到一定距离后动画播放完毕，这时手势要反向滑动，动画应该是立即反向执行，但是设置了延长值，就要推迟一会，推迟的时间就是由延长的数值决定的（动画播放完毕后，延长才起作用，动画播放途中手势反向滑动，延长无效果）。单向控制：默认不勾选。来回滑动都可以影响动画播放如果勾选，则仅限于从起始向结束单向播放动画开启惯性：默认勾选，这样手势停下来，动画会继续运行一段如果不勾选，滑动动作一旦停止、动画会立即停止设置原理相当于给动画规定了一个播放控制条（如上图所示），通过手势滑动，控制动画播放的进度。延迟、与延长，是指在此区间滑动，不会触发动画。以开篇的案例为例，大家可以认为，有这么一个播放控制条：长度为1200，滑动到不同位置时，动画播放状态如上图所示。这里需要特别说明：关联控制播放动画的初始状态，在位置 0，可以设置为其他值，以上图为例，如果初始位置设置为600，那么一开始就是中间图片的状态；通过延迟／延长，可以对多个关联控制进行时间轴的同步处理（ 如下图所示 ）添加动画现在关联控制的动画，建议都采用等待触发的方式，否则，如果动画开始执行过程中进行手势操作，可能会出现冲突、导致位置错乱。总结要点关联控制播放动画的初始状态位于位置0；长度值决定了手势滑动区间。值越大，执行动画所需要滑过的距离越长；多个关联控制的时间同步，可以用延迟／延长统筹控制；关联控制的动画，现阶段只能采用“等待触发”的方式意派Epub360-专业H5设计工具意派Coolsite360-专业响应式网站/微信小程序设计工具