时间戳

首页 > 解决方案 > 有一个按钮来控制时间线 GSAP 动态定位增量计数器

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

问题描述

我正在尝试使用前进和后退按钮控制 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

标签： javascripttimelinetweengsap

解决方案

我认为你有点过于复杂了（至少在演示中）。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 官方论坛上获得更快的回复:)

推荐阅读