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

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

这是一个代码笔，展示了这一点。

如果你想让它更紧凑一点，你可以通过翻转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