10.锚点/Anchor

Dre发表于:2016年07月14日 17:38:06更新于:2019年01月07日 17:52:39


锚点组件视频教程


  • 锚点组件简介

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

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

常结合Layer长页面使用。

  • 案例效果

00159a5407fd6f92812bdeca3aa80fe

体验案例:2016万科滨水大宅新作

案例二:横屏模式image.png

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

  • 添加锚点

image.png

  • 以长页面为例讲解

1.我们单击画布空白处,勾选“启用长页面”。将其拉长。0015787595f3c64682dccdec6d2c96f  001578759629de8f3758052cbbba4e6

2.了解坐标系

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

001578754626e733bc8a995147126a5

3.设置锚点坐标

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

001578759659430d1f4cec08a8b4375

4.设置滑动到锚点时的触发动作

点击“+”号,设置触发条件。

00157875a4e0d172087bd7dd128e8c2

00157875b99c98ae7b44b51ee0cbeb000157875b9d695d4db8140267556902

可以配置的触发基准点有内框的上下左右四条边框和中心点,我们还可以指定滑动的方向触发某一动作,可以指定为单向和双向。

设置完成,点击橘色的对勾,出现以下面板。

5.添加触发动作

00157875cb31458b0b96db14b1b2d9d

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

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

  • 触发条件详解:

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

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

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

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

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


常规用法二(在Layer 中使用):这里的Layer容器就相当于一个小的手机屏幕,我们所说的视窗上下左右边线以及中心点都有了变化跟区别。详细请看下面文字:

视窗上边线的位置:

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

image.png

延伸:在Layer容器中使用锚点时,其他的边线及中心点跟手机视窗的类似,如下图:

image.png

锚点除了可以触发动画外,还可以触发音频。

回复(2)