时间戳

首页 > 解决方案 > 是否可以知道动画 SVG 的绘制路径是否已离开视口？

svg - 是否可以知道动画 SVG 的绘制路径是否已离开视口？

问题描述

我有一个长 SVG 的“线程”，它是将多个 Fullpage.js 水平幻灯片连接在一起的图形元素。（这是一个故事，所以对设计很有意义）

目前，当用户登陆页面并呈现第一张幻灯片时，SVG dashoffset 使用 GSAP 进行动画处理以绘制路径，这在第一张幻灯片上看起来很棒。

但是，当您切换到下一张幻灯片时，路径已经存在。如果我的时间正确，然后我移动到下一张带有动画的幻灯片，它看起来会好 100000%，线程继续路径的动画。

长话短说，是否可以在第一张幻灯片上开始动画，然后在路径离开视口时暂停它，然后在第二张幻灯片滑入视图时取消暂停以继续动画？

标签： svgfullpage.jsgsap

解决方案

fullPage.js 提供onLeave和afterLoad回调。这样您就可以访问您提到的两种状态：

  • 离开幻灯片 (onLeave)
  • 降落到一个新的幻灯片。（加载后）

有关如何使用此 fullPage.js 回调的更多信息，您可以查看此示例和文档： https ://github.com/alvarotrigo/fullPage.js#callbacks

推荐阅读