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

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