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

Question

我正在尝试获取一些代码(我在教程中找到(，这些代码在X轴上执行视差，以根据鼠标移动影响Y轴..只有我对JavaScript语法非常陌生，不知道如何实现这一点。我只有 2 层，我想相应地移动(级别 0 和级别 2(。到目前为止，我无法设法同时移动 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

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

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 (。这可以防止多个补间尝试同时影响同一对象。

请注意，补间并不是此类问题的最佳解决方案，因为当鼠标移动时，您会不断重新运行它。更好的解决方案是在刻度上有一个函数，不断将图层移动到目标，并在鼠标移动时更新。通常视差效应也会直接对鼠标做出反应，而不是漂移到位。

干杯