使用 fullPage.js 在部分之间剪切路径转换

Question

我想要一个带有 SVG 剪辑路径的剪辑动画，它会在使用 fullPage.js 制作动画时隐藏第一部分并显示第二部分。

所以这类似于这个问题： fullpage JS animation on section

但我希望有具有特定持续时间的受控动画（因此过渡是平滑的）。

我现在知道或尝试过的：

1. FullPage.js 必须使用 onLeave 和 afterLoad 回调。如果我阻止在 onLeave 事件中滚动，我只能在 afterLoad 事件中调用silentMoveTo，但我需要接下来两点中的内容。
2. 两个部分不能在 fullPage.js 中活动（CSS 类）（例如，当动画显示时，我会将第 2 部分的不透明度从 0 更改为 1，而第 1 部分将被隐藏反之亦然，背景剪切路径将移至顶部以隐藏第 1 节图像 (SVG)。
3. 我尝试为剪切路径设置动画（有类似的工作示例），但当然不会显示下面第 2 节的内容。在动画不可用后调用 silentMoveTo 以显示第 2 部分，因此它必须与动画持续时间的 50% 同步。

最好的方法是什么？我必须使用 fullPage.js（根据要求，使用内置的 WordPress 主题）。理想情况下，我计划在 GreenSock javascript 库中使用一个时间轴，并在动画结束时进行回调，以正确地向 fullPage.js 主对象发出活动部分现在应该是 #2 的信号。

添加：您可以在此处查看使用 GreenSock 转换的一种方法：

https://youtu.be/gE-Yuu2eEio?t=1694

然而，这是第二部分加载后的动画。我想要第一部分内容的动画，同时显示第二部分（我知道 Fading Effect fullPage.js 扩展，而不是解决方案）。

Answer 1

所以我想我必须自己回答这个问题。

简短的回答：使用 fullPage.js 设计的同时显示两个部分是不可能的。

长答案：您至少可以模仿某种交互，例如第一部分的动画较长，然后快速显示第二部分。像这样（由于删除了不必要的讨论部分，您无法运行此代码）：

        var fullPageOBj = new $('#fullpage').fullpage({
            ...
            onLeave: function (origin, destination, direction) {
            		dir = direction;
                    ...
            		if(origin == 1 && destination == 2){
                    $.fn.fullpage.setAutoScrolling(false);
                    document.body.style.overflow = "hidden";
                    ...
                    TweenMax.to(bSvg, 2.7, { }, "section1");
                    ...
                }
                $.fn.fullpage && $.fn.fullpage.setLockAnchors && $.fn.fullpage.setLockAnchors('false');
            },
            afterLoad: function (origin, destination) {
                console.log("aL - origin: " + origin + ", destination: " + destination + ", direction: " + dir);
              	if(destination == 1){
                    $("vc-section1").addClass("active");
                    ...
                }
                if(destination == 2){
              	  	TweenMax.to(bSvg, 0, { display: "block", onComplete: Delay2, delay: 3.2});            		
                	function Delay2() {
  	                	$.fn.fullpage.setAutoScrolling(true);
	                	$.fn.fullpage.silentMoveTo(2);
                    }
                }
            }
        }

上面的想法是 fullPage.js 中的 afterLoad 事件实际上是在 onLeave 事件之后立即产生的，因此您必须确保在 onLeave 事件函数中等待动画在 afterLoad 函数发生之前完成。因此，上面的代码包括生成在动画完成后运行的 Delay2 函数。 afterLoad 函数中的时间设置为尊重 onLeave 函数中动画持续时间的时间。

您必须把握时机。 fullPage.js 中各部分之前的默认转换时间似乎是 700 毫秒。

最后一个想法可能是将动画移动到第 2 节 - 但页面已经没有第 1 节中的对象（以动画过渡到第 2 节）。

欢迎您加入讨论。