13.关联控制

老赵发表于:2016年05月27日 12:59:51更新于:2019年01月07日 19:03:39

视频教程


  • 组件简介

关联控制,是Epub360特色组件,可以将各个组件进行逻辑上的关联、通过手势进行统一控制。目前还仅限于对动画的关联控制,后续会增加支持更丰富的交互效果。

  • 案例效果

blob.png

关联控制案例展示

  • 组件添加

0015747d1ba4446517fce310d7fc0aa

  • 设置方法

在添加“关联控制”组件后,具体设置方法如下:

blob.png

  • 主控方式:目前只有“手势滑动”方式

  • 方向限定:针对“手势滑动”的滑动方向设置

    • Y+,上下滑屏控制,起始从下往上(一般的上下翻页的下一页手势)

    • X+,左右滑屏控制,起始从右向左(一般的左右翻页的下一页手势)

    • Y-,上下滑屏控制,起始从上往下(与一般的上下翻页手势相反)

    • X-,左右滑屏控制,起始从左向右(与一般的左右翻页手势相反)


  • 长度:用来计算手指在屏幕上的滑动距离,设置数值后,规定了滑动区间范围,即滑动多少距离后,动画在这个距离内执行播放。动画执行速度跟手指滑动的速度关联,滑动越快,动画执行的越快,反之,则越慢。

  • 初始:动画初始状态,例如长度为400的动画,初始为200时,那么这个动画开始时,就是已经到执行了一半的状态。

  • 延迟:在动画触发前预留一段滑动距离,例如长度设置为400,手指已经滑动了400,这时动画应该被触发播放了,但是设置了延迟,这个动画会推迟播放,延迟的数值越大,动画播放推迟的时间越久。所以一共是滑动屏幕800PX,动画才执行完。

  • 延长:在动画执行完后滞留一段滑动距离。主要针对双向滑动的情况。

例如:当手势向下滑动到一定距离后动画播放完毕,这时手势要反向滑动,动画应该是立即反向执行,但是设置了延长值,就要推迟一会,推迟的时间就是由延长的数值决定的(动画播放完毕后,延长才起作用,动画播放途中手势反向滑动,延长无效果)。

  • 单向控制:

    • 默认不勾选。来回滑动都可以影响动画播放

    • 如果勾选,则仅限于从起始向结束单向播放动画,反向滑动屏幕没有效果。


开启惯性:

  • 默认勾选,这样手势停下来,动画会继续运行一段

  • 如果不勾选,滑动动作一旦停止、动画会立即停止


  • 设置原理

blob.png

相当于给动画规定了一个播放控制条(如上图所示),通过手势滑动,控制动画播放的进度。延迟、与延长,是指在此区间滑动,不会触发动画。


0015747d903d717dd3bb0ba3c3f7ae7

以开篇的案例为例,大家可以认为,有这么一个播放控制条:长度为1200,滑动到不同位置时,动画播放状态如上图所示。


  • 特别说明

  • 关联控制播放动画的初始状态,在位置 0,可以设置为其他值,以上图为例,如果初始位置设置为600,那么一开始就是中间图片的状态;

  • 通过延迟/延长,可以对多个关联控制进行时间轴的同步处理( 如下图所示 )

image.png

  • 添加动画

现在关联控制的动画,建议都采用等待触发的方式,否则,如果动画开始执行过程中进行手势操作,可能会出现冲突、导致位置错乱。

0015747d1cea2db4c1d1ba59274732e

  • 总结要点

  • 关联控制播放动画的初始状态位于位置0;

  • 长度值决定了手势滑动区间。值越大,执行动画所需要滑过的距离越长;

  • 多个关联控制的时间同步,可以用延迟/延长统筹控制;

  • 关联控制的动画,现阶段只能采用“等待触发”的方式

--------- 不了解设计的程序员不是好客服 ---------------