10.锚点/Anchor

Dre发表于:2016年07月14日 17:38:06更新于:2019年03月27日 18:59:17


视频教程



一、案例效果

案例效果1

00159a5407fd6f92812bdeca3aa80fe

《2016万科滨水大宅新作


案例效果2

image.png

《来了就是深圳人案例教程》


二、场景应用

锚点,不同于以往时间线的触发方式,在交互维度上新增了一条空间线。

我们能用它来实现“滑动长页面到某一位置,才播放动画”的效果。必须通过滑动屏幕时使用,锚点位置跟随页面的移动而变化,从而在达到不同的位置时,去触发相应的动画行为等。常结合Layer长页面使用。

《两会报告解读

《2018中国创业创新博览会》


三、组件用法

基本用法

1.以长页面为例讲解

0015c9b3cb74b1d66dffd933c93d673


2.了解坐标系。页面坐标系,截图的是我们编辑器的内框,以左上角为坐标原点(0,0),滚动距离是以这个坐标系为基准的。

001578754626e733bc8a995147126a5

3.添加锚点

image.png


4.设置锚点坐标。选中锚点。页面中就会出现一个这样的小红点。我们可以在右侧面板看到它在坐标系中的坐标。

001578759659430d1f4cec08a8b4375


5.设置滑动到锚点时的触发动作。点击“+”号,设置触发条件。

00157875a4e0d172087bd7dd128e8c2


6.可以配置的触发基准点,是指手机屏幕视窗的上、下、左、右四条边框,以及视窗的中心点。

00157875b99c98ae7b44b51ee0cbeb0   


7.触发条件即滑动长页面的方向跟上面5讲到的触发基准点是有紧密联系的。比如,向上滑动长页面,一般锚点触发的是视窗的上边线时,我们去播放一个动画等。

   00157875b9d695d4db8140267556902


8.添加触发动作

00157875cb31458b0b96db14b1b2d9d

触发动作众多,这里就不赘述了。


9.触发器拓展部分:

用户滑动屏幕,锚点亦跟随长页面一起滑动,当锚点移动到我们预先设置好的触发基准点的时候,就会执行此时设置的触发动作。

触发条件详解:

  • 向上/下划屏时,锚点接触手机屏幕窗口上边缘时,触发动画播放等行为;

  • 向上/下划屏时,锚点接触手机屏幕窗口下边缘时,触发动画播放等行为;

  • 位于视觉中心,也就是说以整个手机屏幕中心为基点,去滑动屏幕,当锚点接触到这个中心时,触发动画等行为。

  • 向左/右划屏时,锚点接触手机屏幕窗口左边缘时,触发动画等行为;

  • 向左/右划屏时,锚点接触手机屏幕窗口右边缘时,触发动画等行为;


高级用法

1.在Layer中使用。这里的Layer容器就相当于一个小的手机屏幕,我们所说的视窗上下左右边线以及中心点都有了变化跟区别,在Layer容器中使用锚点时,其他的边线及中心点跟手机视窗的类似。

比如,视窗上边线的位置,长页面指的是手机窗口上边线,Layer指的是Layer容器窗口上边线。如图:

0015c9b5781936eefb279024056092e

回复(2)