AngularJS工作ScrollMagic
我有一个使用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。我应该如何处理这个问题，以及如何构造代码？
任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
发布于 2015-12-02 20:31:12
正如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>
Stack Overflow用户
发布于 2015-02-12 12:25:23
这取决于AMAZING ANIMATION HANDLED BY ANGULARJS是如何组织的.
但是，例如，您可以使用ScrollMagic来运行一个回调，以处理角动画。
例如：
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).on("enter", amazingCallback);在那个回调中，您可以触发动画。
不过，适当的 AngularJS方式应该是：
您需要编写一个模块，该模块使用指令，允许您提供场景(和控制器)的所有选项作为元素的属性(即触发器元素)，并在内部相应地创建ScrollMagic对象。这是一个很大的挑战，如果你决定进入，请分享你的结果，因为像这样的插件在ScrollMagic的长期列表中。
请注意，ScrollMagic 2.0 (目前处于测试版) 具有插件体系结构。。
或者，您也可以查看斯克罗尔，它使用数据属性来配置动画，因此已经更接近“角度方式”了。
https://stackoverflow.com/questions/28467553
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号