如何使用CreateJS / Tween来影响鼠标移动时Parallax的X和Y？

Question

我试图得到一些代码（我在教程中找到），它在X轴上实现视差，也会根据鼠标移动影响Y轴..只是我对JavaScript语法很新，不知道如何实现这个。我只有2层我想要相应移动（level0和level2）。到目前为止，我无法设法同时移动X和Y轴...它只想一次影响一个轴。

你能弄清楚如何影响Y轴和X吗？

我尝试在第一个被触发后加倍功能。不工作。

请请...任何提示都将受到高度赞赏。

stage.on("stagemousemove", throttle( function(evt) {

    var hOffset = (evt.stageX - env.compWidth/2) * 2;
    // the following bit I wrote (only this one line right here)    
    var hOffsetY = (evt.stageY - env.compHeight/2) *2;
    // Tween layers with distanceFactor 
    createjs.Tween.get(content.level0, {override:true}).to({x: env.level0_initialX - (hOffset / 25) }, 1072, createjs.Ease.cubicOut);   
    createjs.Tween.get(content.level2, {override:true}).to({x: env.level2_initialX - (hOffset / 18) }, 1072, createjs.Ease.cubicOut);
    },100));

Answer 1

您可以在每个图层的相同y调用中应用Tween.to()补间。

stage.on("stagemousemove", throttle( function(evt) {

    // Determine the horizontal and vertical offset
    var hOffset = (evt.stageX - env.compWidth/2) * 2;
    var hOffsetY = (evt.stageY - env.compHeight/2) *2;

    // Tween layers with distanceFactor 
    createjs.Tween.get(content.level0, {override:true}).to({
        x: env.level0_initialX - (hOffset / 25),
        y: env.level0_initialY - (hOffsetY / 25) // <------------------ here
    }, 1072, createjs.Ease.cubicOut);   
    createjs.Tween.get(content.level2, {override:true}).to({
        x: env.level2_initialX - (hOffset / 18),
        y: env.level2_initialY - (hOffsetY / 18) 
    }, 1072, createjs.Ease.cubicOut);

},100));

如果您只是复制两个补间它将无法工作，因为此示例设置为在运行时清除补间（使用override:true）。这可以防止多个补间尝试同时影响同一个对象。

请注意，补间并不是最适合这种情况的解决方案，在鼠标移动时您不断重新运行它。一个更好的解决方案是在tick上设置一个函数，不断地将图层移向目标，并在mousemove上更新。通常，视差效应也会直接对鼠标产生反应，而不是漂移到位。

干杯，