Question

我正在尝试在点击页面时补间/循环页面背景的颜色。当点击被抬起时，循环停止并且背景颜色保持在最后一个循环值。再次单击时，该过程将继续。

检查此处的示例以查看我所说的循环颜色http://www.javascript-fx.com/development/colorcycle/spancycle.html

时的内容

在浏览解决方案的过程中，我遇到了一些像JSTween或GSAP这样的库，但是由于我非常脆弱的javascript体验，我在实现示例以满足我的需要时失败了。

有关如何执行此操作的任何建议都会有所帮助，最好没有任何库，因为它有助于我更好地理解javascript。我不是在寻找确切的代码，对这个过程的伪代码解释也会很棒。

最佳，安德烈

Answer 1

因此，使用TweenJS或TweenMax（或TweenLite）可以轻松实现补间颜色。我将使用TweenMax显示这一点，主要是因为当没有伪代码逻辑时，伪代码很难。假设你有一个文本元素：

<p id="text">This is some text to colorize</p>

您可以在两秒钟内将文字的颜色补间为红色（#f00），如下所示：

var textEl = document.getElementById('text');
TweenMax.to(textEl, 2, {color: '#f00'});

就循环而言，您可以向补间发送onComplete处理程序，该补间程序将在补间完成时触发。这将导致它在红色和黑色之间循环：

var textEl = document.getElementById('text');

function toRed() {
  TweenMax.to(textEl, 2, {color: '#f00', onComplete: toBlack});
}

function toBlack() {
  TweenMax.to(textEl, 2, {color: '#000', onComplete: toRed});
}

toRed();

这是CodePen showing this in action。

如果你想让它更紧凑，你可以通过翻转colorFrom和colorTo来循环：

function cycle(colorFrom, colorTo) {
  TweenMax.to(textEl, 2, {color: colorTo, onComplete: function() {
      cycle(colorTo, colorFrom);
  }});
}

cycle('#000', '#F00');

在其他补间库中执行相同的操作变得非常相似。

点击时执行此循环的伪代码可能是这样的：

ON_CLICK:
  ShowCycle = !ShowCycle;
  IF ShowCycle
    TweenHandle = cycle( RED, BLACK )
  ELSE
    IF EXISTS TweenHandle
      cancelCycle( TweenHandle )
      TweenHandle = null
    END IF
  END IF

点击元素时循环/补间颜色

1 个答案: