具有控制时间轴的按钮GSAP动态-定位增量计数器

Question

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

1. 当用户将鼠标悬停在前进按钮上时，动画将向前移动(以 px 为单位)。

2. 当用户mouseleave按钮时，动画将暂停。

3. 当用户将鼠标悬停在向后按钮上时，动画会以另一种方式移动。

我遇到的问题是，我试图添加一个动态定位变量，当用户将鼠标悬停在"前进"按钮上时，该变量会增加。这没有按预期工作 - 相反，它只是移动一次，而不是等到用户的鼠标离开停止。

我尝试向按钮事件侦听器添加一个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的全部意义在于沿着时间线移动事物。你试图做的本质上是强行使用时间线以非时间线的方式工作，这就是为什么我认为你遇到了麻烦。

如果你退后一步，只考虑你的三个要求，我认为它会变得简单得多。像你一样用文字来思考它总是好的，因为它可以帮助你简化它并更好地理解它。

关键步骤是：

1. 为盒子的移动创建一个时间线。

2. 将前进按钮悬停时向前播放时间线。

   2b. 当它不再悬停时暂停它。

3. 将倒车按钮悬停时向后播放时间线。

   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);

演示

顺便说一下，您更有可能在官方GreenSock论坛上获得更快的响应:)

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>