点击播放优酷视频教程
一、案例效果
案例效果1
案例效果2
二、场景应用
锚点，不同于以往时间线的触发方式，在交互维度上新增了一条空间线。
我们能用它来实现“滑动长页面到某一位置，才播放动画”的效果。必须通过滑动屏幕时使用，锚点位置跟随页面的移动而变化，从而在达到不同的位置时，去触发相应的动画行为等。常结合Layer和长页面使用。
三、素材准备
文末附件下载素材，非商用，仅供学习使用。
四、组件用法
基本用法
1.以长页面为例讲解
2.了解坐标系。页面坐标系，截图的是我们编辑器的内框，以左上角为坐标原点（0,0），滚动距离是以这个坐标系为基准的。
3.添加锚点
4.设置锚点坐标。选中锚点。页面中就会出现一个这样的小红点。我们可以在右侧面板看到它在坐标系中的坐标。
5.设置滑动到锚点时的触发动作。点击“+”号，设置触发条件。
6.可以配置的触发基准点，是指手机屏幕视窗的上、下、左、右四条边框，以及视窗的中心点。
7.触发条件即滑动长页面的方向跟上面5讲到的触发基准点是有紧密联系的。比如，向上滑动长页面，一般锚点触发的是视窗的上边线时，我们去播放一个动画等。
8.添加触发动作
触发动作众多，这里就不赘述了。
9.触发器拓展部分：
用户滑动屏幕，锚点亦跟随长页面一起滑动，当锚点移动到我们预先设置好的触发基准点的时候，就会执行此时设置的触发动作。
触发条件详解：
向上／下划屏时，锚点接触手机屏幕窗口上边缘时，触发动画播放等行为；
向上／下划屏时，锚点接触手机屏幕窗口下边缘时，触发动画播放等行为；
位于视觉中心，也就是说以整个手机屏幕中心为基点，去滑动屏幕，当锚点接触到这个中心时，触发动画等行为。
向左／右划屏时，锚点接触手机屏幕窗口左边缘时，触发动画等行为；
向左／右划屏时，锚点接触手机屏幕窗口右边缘时，触发动画等行为；
高级用法
1.在Layer中使用。这里的Layer容器就相当于一个小的手机屏幕，我们所说的视窗上下左右边线以及中心点都有了变化跟区别，在Layer容器中使用锚点时，其他的边线及中心点跟手机视窗的类似。
比如，视窗上边线的位置，长页面指的是手机窗口上边线，Layer指的是Layer容器窗口上边线。如图：
五、相关Q&A
暂无
回复(2)