2

我正在尝试使用 ScrollMagic 的这个特定动画

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

但是要正确加载文件非常困难。我正在尝试包含 ScrollMagic、GSAP 和 GreenSock，但不知何故 ScrollMagic 要求我之前加载 GASP，而 GSAP 说缺少主模块并要求我先加载 ScrollMagic。我正在使用 jQuery 进行异步操作，如下所示

$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
    $.getScript( "http://localhost/icons/scroll.js", function( data, textStatus, jqxhr ) {
        $.getScript( "http://localhost/icons/greensock.js", function( data, textStatus, jqxhr ) {
          //whatever
        });
    });
});

当 gsap 第一次出现时，它会记录我以下错误：

错误：找不到 ScrollMagic 主模块。请确保它在此插件之前加载或使用异步加载器，如 requirejs 错误：找不到 TweenLite 或 TweenMax。请确保在 ScrollMagic 之前加载 GSAP 或使用像 requirejs 这样的异步加载器。

这个是在喘息之前加载scrollmagic时的

错误：找不到 TweenLite 或 TweenMax。请确保在 ScrollMagic 之前加载 GSAP 或使用像 requirejs 这样的异步加载器。

以前有人遇到过同样的问题吗？你有一个工作的例子来展示吗？如何解决此加载问题并使示例正常工作？

4

2 回答 2

6

好吧，实际上您在这里混淆了名称，老实说：重命名 js 文件并没有帮助。

所以让我们理顺一下：

ScrollMagic main module通常ScrollMagic.js，在你的情况下，我猜scroll.js。
这是 ScrollMagic 的主库文件，如果使用同步加载，则应在所有其他 ScrollMagic 插件之前加载。

GSAP通常是TweenMax.js（取决于版本），在你的情况下我猜greensock.js。
这是Green Sock A nimation P平台，它可以提供、和对象（以及可能的其他对象）。TweenMaxTweenLiteTimelineMaxTimelineLite

ScrollMagic GSAP Plugin通常plugins/animation.GSAP.js，在你的情况下，我猜gsap.js。
这是一个 ScrollMagic 插件，可以将 GSAP 与 ScrollMagic 一起使用。它有点像他们之间的桥梁。

现在因为它作为桥梁工作，所以ScrollMagic GSAP Plugin需要加载ScrollMagic库和库。 所以加载它们的正确顺序是GSAP

  1. 滚动魔法
  2. GSAP
  3. ScrollMagic GSAP 插件

或者

  1. GSAP
  2. 滚动魔法
  3. ScrollMagic GSAP 插件

为了避免这类问题，我首先建议不要重命名 javascript 库文件。虽然如果你一个人工作可能没问题，但对其他人来说会很困惑。

其次，如果您使用同步加载，请不要使用 JavaScript 来加载它们。
使用 html 标签，这使得它们的加载顺序更加明显。
您在脚本中所做的根本不是异步的，因为您的脚本一个接一个地加载文件，而不是同时加载。

如果您想在 js 中管理加载，请使用异步加载器，例如require.js（如错误消息中所建议）。

使用 require.js，您不必关心加载文件的顺序，因为它会自动处理。如果你绝对想要的话，你甚至可以重命名库文件（尽管我不推荐它），因为同事会在你的 requirejs 配置中获得参考，以查看哪个模块在哪个文件中。

于 2015-04-30T12:49:43.783 回答
4

好的，我来这里是为了找到 CDN 链接...在这里，对于其他想要相同的人来说，它们的顺序是正确的....这些是 ScrollMagic 演示工作所必需的。

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
于 2017-08-11T01:38:16.987 回答