Как использовать CreateJS / Tween, чтобы повлиять на X и Y для параллакса при движении мыши? - PullRequest
Новая
       45

Как использовать CreateJS / Tween, чтобы повлиять на X и Y для параллакса при движении мыши?

0 голосов
/ 30 марта 2019

Я пытаюсь получить немного кода (я нашел в руководстве), который выполняет параллакс на оси 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));

1 Ответ

0 голосов
/ 31 марта 2019

Вы можете применить анимацию 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).Это не позволяет нескольким подросткам пытаться воздействовать на один и тот же объект одновременно.

Обратите внимание, что подростки не являются действительно лучшим решением для чего-то подобного, когда вы постоянно перезапускаете его, когда мышь движется.Лучшее решение - просто иметь на тике функцию, которая постоянно перемещает ваши слои к цели, которая обновляется при перемещении мыши.Часто эффекты параллакса реагируют непосредственно на мышь, вместо того, чтобы дрейфовать на место.

Приветствия,

...