10.锚点/Anchor：滑动页面至指定位置播放动画

一、案例效果

案例效果1

《2016万科滨水大宅新作》

案例效果2

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

二、场景应用

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

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

《两会报告解读》

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

三、素材准备

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

四、组件用法

基本用法

1.以长页面为例讲解

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

3.添加锚点

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

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

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

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

8.添加触发动作

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

9.触发器拓展部分：

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

触发条件详解：

向上／下划屏时，锚点接触手机屏幕窗口上边缘时，触发动画播放等行为；

向上／下划屏时，锚点接触手机屏幕窗口下边缘时，触发动画播放等行为；

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

向左／右划屏时，锚点接触手机屏幕窗口左边缘时，触发动画等行为；

向左／右划屏时，锚点接触手机屏幕窗口右边缘时，触发动画等行为；

高级用法

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

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

五、相关Q&A

暂无

附件：锚点素材.zip • 318.75KB • 下载

上一篇 8.拖放目标组/DragDropGroup：拼图小游戏

下一篇 11.碰撞检测：接物体小游戏/抓娃娃