0

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

检查这里的例子，看看我说循环颜色时指的是什么http://www.javascript-fx.com/development/colorcycle/spancycle.html

在浏览解决方案时，我遇到了一些库，如 JSTween 或 GS​​AP，但由于我非常脆弱的 javascript 经验，我无法实现满足我需要的示例。

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

最好的，安德烈

4

1 回答 1

0

因此，使用 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展示了这一点。

如果你想让它更紧凑一点，你可以通过翻转colorFromand来循环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
于 2013-09-07T17:15:35.487 回答