.

13.关联控制组件

老赵发表于:2016年05月27日 12:59:51更新于:2019年07月19日 14:22:16


一、案例效果

0015ca19091a6cba968a75cd33a25ca

《关联控制案例》



二、场景应用

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

《视差官网产品展示》


三、素材准备

文末附件下载素材,非商用,仅供学习使用。


四、组件原理

1.手指在手机上滑动屏幕的【距离】,控制动画从开始播放到结束播放的【时间】,用距离控制时间,其实是比较抽象的。

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

blob.png


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

0015747d903d717dd3bb0ba3c3f7ae7


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

image.png


五、组件教程


基本用法

1.在正常的微信PLUS页面上(不要用长页面)添加图片、文字等元素都页面中,给这些元素添加等待触发的动画,比如直线运动。

0015ca192dcab764888b1cb3fc6582d


2.点击高级组件中的【关联控制】,添加到页面中

0015747d1ba4446517fce310d7fc0aa


3.在逻辑小面板或者直接点击选中关联控制组件,在右侧的添加联动设置里,将动画添加进来

0015ca1a2cdc6595430b2549f3b0acc


4.我们要求手指向上滑动屏幕400个像素,在这个期间,让小球的动画过程从开始到结束。选中关联控制组件,设置长度的值。

0015ca1a9ff202d861a67bd5d2e3292


5.预览,用鼠标向上滑动屏幕查看效果。

0015ca1aa631739fc15139283e14e75


高级用法

1.其他设置讲解

(1)主控方式:目前只有“手势滑动”方式


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

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

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

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

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


(3)四个关联控制的参数设置

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

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

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

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


(4)单向控制和开启惯性

  • 单向控制

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

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


  • 开启惯性:

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

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


2.另外一个高级用法是不能滑动的长layer容器,放在普通的微信PLUS画布上进行滑动控制。如该案例的效果视差官网产品展示

0015ca1b8f530589fab64c736e60267

制作关键要点:

(1)在layer页面内设置一个长页面,因为layer页面尺寸可以自定义。

0015ca1b9a581e82e0c148c4a3914ff


(2)layer页面内可以添加多个关联控制,多个等待触发的动画,分别跟关联控制绑定,设置相关参数,具体参数细节可以自己尝试下。

0015ca1ba31246d04c03aa8319ef0a4


(3)将layer容器添加到页面,让layer 容器尺寸跟layer内容尺寸高度一致,不可滑动。并给layer容器设置一个向上的直线运动动画,设置为等待触发

0015ca1bbecb655bbf83b70fc0d7ae3


(4)再加一个关联控制,来控制这个动画,目的是在滑动长 layer时,layer容器整体向上运动。

0015ca1bc2fe2fbbf252ff0ca7d86d4


(5)再结合layer页面本身也添加了多个关联控制组件,在滑动手机屏幕时,可以达到一个滑动动作对layer 容器内所有动画跟layer容器本身的直线运动都有效。


3.总结要点

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

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

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

附件:关联控制案例素材.zip • 1.09MB • 下载

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