0

我有一个使用 jQuery 和 ScrollMagic 的网站。当用户滚动到特定元素时，ScrollMagic 会捕获该元素并使用 TweenMax 触发动画。

在 jQuery 中，代码如下所示

var scene = new ScrollScene({
    triggerElement: '#animation_start'
}).setTween(TweenMax.from('#demo', 0.5 ,{opacity:0}));

controller.addScene([scene]);

在新版本的站点中，页面的一部分包含更复杂的动画，可以通过 AngularJS 的双向数据盲法轻松处理，我想利用这一点。我是 AngularJS 的新手，但我用 AngularJS 编写了几个应用程序。我正在努力思考解决此问题的正确方法。本质上，这就是我想要发生的事情。当用户滚动到#animation_start时，AngularJS 驱动的动画就会开始。在伪 jQuery 中，它看起来像这样：

var scene = new ScrollScene({
    triggerElement: '#animation_start'
}).setTween(**AMAZING ANIMATION TO BE HANDLED BY ANGULARJS**);

controller.addScene([scene]);

我知道我想错了，因为我还在想 jQuery。我应该如何解决这个问题以及我应该如何构建代码？

任何帮助表示赞赏。

4

2 回答 2

3

正如 Jan 的回答中提到的，执行此操作的“正确”方法是使用包装 ScrollMagic 的指令，允许您在标记中定义您的行为。

我最近自己遇到了这个问题，找不到现有的指令，所以我自己写了。这是非常新的，尚未记录，但有一个例子，我希望尽快添加更多。任何反馈表示赞赏。

https://github.com/homerjam/angular-scroll-magic

简而言之，这允许您执行以下操作：

<body sm-scene="mainScene" duration="100%" trigger-hook="0.1">

  <div class="stylish-animation" sm-tween="mainScene" duration="1" to-vars="{opacity: 1, yoyo: true, repeat: 5}">
    <h1>Look at me go</h1>
  </div>

</body>

于 2015-12-02T20:31:12.640 回答
1

好吧，这取决于AMAZING ANIMATION HANDLED BY ANGULARJS组织的方式...

但是您可以例如使用 ScrollMagic 的事件来运行处理角度动画的回调。

例如像这样：

var scene = new ScrollScene({
    triggerElement: '#animation_start'
}).on("enter", amazingCallback);

在该回调中，您可以触发动画。

正确的AngularJS 方式是这样的：

您需要编写一个使用指令的模块，该指令允许您提供场景（和控制器）的所有选项作为元素（即触发元素）的属性，并相应地在内部创建 ScrollMagic 对象。这是一个很大的挑战，如果您决定参与其中，请分享您的结果，因为像这样的插件在 ScrollMagic 的长期 TODO 列表中。

请注意 ScrollMagic 2.0（目前处于 BETA 阶段）具有插件架构。

或者，您可以查看skrollr，它使用数据属性来配置其动画，因此已经非常接近“角度方式”。

于 2015-02-12T12:25:23.497 回答