滚动魔术多场景
我第一次使用卷轴魔术，总的来说，我对JavaScript/jQuery非常陌生。我让它工作了，但它是非常混乱和重复的代码。
这里是小提琴。这就是乱七八糟的代码(我刚才给出了一个例子，在我的项目中，有大约50个场景是以这种方式出现的！)：
var controller = new ScrollMagic.Controller();
var tween1 = TweenMax.to('#animation1', 0.7, {
opacity: 0
});
var scene1 = new ScrollMagic.Scene({
offset: 200,
reverse: true
})
.setTween(tween1)
.addTo(controller)
.addIndicators();
var tween2 = TweenMax.to('#animation2', 0.7, {
opacity: 1
});
var scene2 = new ScrollMagic.Scene({
triggerHook: 'onEnter',
offset: 500,
reverse: true
})
.setTween(tween2)
.addTo(controller)
.addIndicators();有什么办法可以让这段代码变得更枯燥吗？
回答 1
Code Review用户
发布于 2015-05-29 17:24:59
我发布这篇文章时假设JsFiddle遗漏了什么，因为它抛出了一个"setTween不是函数“错误。但根据你的密码..。
您真正想要的是一个工厂对象，它得到一些配置数据。也许是这种格式的东西：
{
"tween": {
"duration": 0.7,
"options": {
"opacity": 0
}
},
"scene": {
"options": {
"triggerHook": "onEnter",
"offset": 500,
"reverse": true
}
}
}让我们把这个叫做“动画工厂”AnimationFactory：
function AnimationFactory() {
this.controller = new ScrollMagic.Controller();
this.scenes = [];
}
AnimationFactory.prototype = {
controller: null,
scenes: null,
constructor: AnimationFactory,
createAnimation: function(element, args) {
element = typeof element === "string"
? document.getElementById(element)
: element;
var tween = TweenMax.to(element, args.tween.duration, args.tween.options),
scene = new ScrollMagic.Scene(args.scene.options);
scene.setTween(tween)
scene.addTo(this.controller)
scene.addIndicators();
this.scenes.push(scene);
return this;
}
};然后使用它：
var animationFactory = new AnimationFactory();
window.onload = function() {
animationFactory
.createAnimation("animation1", {
tween: {
duration: 0.7,
options: {
opacity: 1
}
},
scene: {
options: {
offset: 200,
reverse: true
}
}
})
.createAnimation( ... );
};不是你有一个很好的干净API可以使用。但是你说页面上有50个，我想这个数字可能会改变。此外，动画和需要它们的元素之间有一个断开连接。为什么不使用HTML5自定义数据属性将这两者结合在一起呢？
function AnimationFactory() {
this.controller = new ScrollMagic.Controller();
this.scenes = [];
}
AnimationFactory.prototype = {
controller: null,
scenes: null,
constructor: AnimationFactory,
createAnimation: function(element, args) {
...
},
createAnimations: function(element) {
var tween = null,
scene = null,
elements = element.querySelectorAll("[data-animation]"),
i = 0,
args;
for (i; i < elements.length; i++) {
args = JSON.parse(elements[i].getAttribute("data-animation"));
this.createAnimation(elements[i], args);
}
}
};并利用这一点：
var animationFactory = new AnimationFactory();
window.onload = function() {
animationFactory.createAnimations(document.body);
};还有一些HTML来表示良好的度量：
<h1 data-animation='{
"tween": {
"duration": 0.7,
"options": {
"opacity": 1
}
},
"scene": {
"options": {
"offset": 200,
"reverse": true
}
}
}'>Animation 1</h1>
<h1 data-animation='{
"tween": {
"duration": 0.7,
"options": {
"opacity": 0
}
},
"scene": {
"options": {
"triggerHook": "onEnter",
"offset": 500,
"reverse": true
}
}
}'>Animation 2</h1>这给了你无限的潜力。创建动画的信任就嵌入在标记中。如果不同的页面有不同的动画，不需要保留不同的JavaScript文件。每一页都是不同的。
由于AnimationFactory封装了所有的动画，如果您遇到性能问题，可以调整幕后的工作流程，比如创建Tweens，这样页面上就不会有50条不透明透视图一次运行(我认为这可能会从CPU中吸取足够的电能来驱动一台小特斯拉)。
如果在某些HTML中使用AJAX，然后在页面加载后将其插入到DIV中，则可以调用AnimationFactory#createAnimations方法，并传入刚刚替换了其innerHTML的HTML元素，您将在AJAX之后获得动画，而不仅仅是页面加载。
// xhr is an XMLHttpRequest object that just got some HTML from the server
var div = $("#someDiv").html(xhr.responseText);
animationFactory.createAnimations(div[0]);https://codereview.stackexchange.com/questions/92144
复制相似问题
腾讯云开发者
