Question

我正在尝试使用前进和后退按钮控制GSAP动画。我想要的预期行为是：

当用户将鼠标悬停在前进按钮上时，动画将向前移动（以px为单位）。
当用户mouseleave按下按钮时，动画会暂停。
当用户将鼠标悬停在后退按钮上时，动画将以其他方式移动。

我遇到的问题是我尝试在原处添加一个动态定位变量，当用户将鼠标悬停在“前进”按钮上时该变量会增加。这不能按预期方式工作-而是只移动一次，而不是等到用户的鼠标停下来为止。

我尝试向按钮事件侦听器添加setInterval以增加位置，以便当用户将鼠标悬停在按钮上时，它会一次移动px，这确实起作用，但不会停止导致浏览器崩溃。我还添加了mouseleave来清除setInterval，但我认为这不是好习惯。

var masterTimeline = new TimelineMax();
var mousedown = false;
var forwardBTN = document.getElementById("forward");
var backwardBTN = document.getElementById("backward");
var pauseBTN = document.getElementById("pause");
var blueboxElement = document.getElementById("blueBox");
var direction = '+';
var counter = 0;
var distance = 0;
var value1 = direction + '=' + distance;
var tween;

forwardBTN.addEventListener("mouseenter", function(){
   // setInterval(function() {
  directionMove('moveForward');
    // }, 500); 
});

backwardBTN.addEventListener("mouseenter", function(){
      directionMove('moveBackward')
});

pauseBTN.addEventListener("click", function(){
      directionMove('pause');
});

function directionMove(playk) {
    if (playk == 'moveBackward') {
      var direction = '-';
      value1 = direction + '=' + distance;    // how to update value
      masterTimeline.to(blueboxElement, 0.1, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default
    }
    else if (playk == 'moveForward') {
      var direction = '+';
      value1 = direction + '=' + distance;  //how to update value
      masterTimeline.to(blueboxElement, 0.1, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default
    }
    else if (playk == 'pause') {
      masterTimeline.kill();
      console.log("killed");
      // 
    }
  }```

The expected behaviour is to move forward incrementally without stopping until the user moves off the forward button but at present it is just moving a single amount one time.

Here is a CodePen link if this helps:

https://codepen.io/nolimit966/pen/pXBeZv?editors=1111

Answer 1

我认为您对此有些复杂（至少在演示中）。 GSAP的重点是沿着时间轴移动事物。您要执行的操作实质上是强行使用时间轴以非时间轴的方式工作，这就是为什么我认为您遇到麻烦。

如果您退后一步，只考虑您的三个要求，我认为这将变得更加简单。像您所做的那样用词思考始终是一件好事，因为它可以帮助您简化并更好地理解它。

关键步骤是：

为框的移动创建时间线。
将鼠标悬停在前进按钮上时，向前播放时间线。

2b。不再悬停时暂停它。
当鼠标悬停在反向按钮上时，向后播放时间轴。

3b。不再悬停时暂停它。

在看起来像这样的代码中：

var tl = new TimelineMax({paused: true});
var forwardBTN = document.getElementById("forward");
var backwardBTN = document.getElementById("backward");
var pauseBTN = document.getElementById("pause");
var blueboxElement = document.getElementById("blueBox");

tl.to(blueboxElement, 10, {x: window.innerWidth - blueboxElement.clientWidth, ease: Linear.easeNone});

function pause() {
  tl.pause();
}

forwardBTN.addEventListener("mouseenter", function() {
  tl.play();
});

forwardBTN.addEventListener("mouseleave", pause);

backwardBTN.addEventListener("mouseenter", function() {
  tl.reverse();
});

backwardBTN.addEventListener("mouseleave", pause);

Demo

顺便说一句，您更有可能在the official GreenSock forums上获得更快的响应：）

Answer 2

你的意思是这样吗？

var tl = new TimelineMax({paused: true});
tl.to('.element', 3, {
  x: 800,
});
$(document).on({
    mouseenter: function () {
        if($(this).hasClass('forward')){
          tl.play();
        }
      else if($(this).hasClass('backwards')){
        tl.reverse();
      }
    },
    mouseleave: function () {
        tl.pause();
    }
}, ".btn");

.wrapper{
  width: 100%;
  padding: 40px;
}
.element{
  width: 100px;
  height: 100px;
  background: red;
}
.btn{
  display: inline-block;
  padding: 15px;
  background: #bbb;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element_wrapper">
    <div class="element"></div>
  </div>
  <div class="forward btn">Forward</div>
  <div class="backwards btn">Backwards</div>
</div>

有一个按钮来控制时间轴GSAP动态-定位增量计数器

2 个答案:

Demo