在两种颜色之间缓和的功能答案

【问题标题】：Function to ease between two colors在两种颜色之间缓和的功能
【发布时间】：2015-12-06 17:29:25
【问题描述】：

我希望有一个简单的 div 在两种颜色之间无休止地褪色，即蓝色到红色、红色到蓝色、蓝色到红色等。

理想情况下，我应该有一个这样的函数，它只需要两种颜色以及它们之间褪色所需的时间。

toggle_color = function(color1, color2, time) { ... }

我尝试过使用 setInterval 和 setTimeout 来在它们之间切换，但它不是那么顺利（即 Fade）或循环。不知道如何做那部分。也不确定使用延迟是正确的道路。似乎用一个时间值不断地处于淡出状态可能更简单，但同样，不确定如何。

function toggle_color(color1, color2, cycle_time, wait_time) {

setInterval(function first_color() {
    document.body.style.backgroundColor = color1;
    setTimeout(change_color, wait_time);
}, cycle_time);

function change_color() {
    document.body.style.backgroundColor = color2;
}

【问题讨论】：

只需几行 CSS 就可以简单得多。
时间将由一个单独的函数控制，所以我不能将该动态值插入 CSS。
正在考虑完全相同的事情@dfsq，没有看到需要 js，因为它只会减慢用户的进程。
使用css 会比使用javascript 更快更流畅。您可以使用 javascript 更改 css 延迟以提供您想要的功能。考虑阅读this article 了解动画的不同性能。

标签： javascript loops colors

【解决方案1】：

只需几行 CSS：

body{
  animation: bodybg 2s 0s linear infinite alternate;
}

@keyframes bodybg{
  from   {background:red;}
  to     {background:blue;}
}

【讨论】：

【解决方案2】：

如果不使用 CSS 过渡，我不知道你怎么能做到这一点，但我相信你仍然可以得到你想要的。您可以使用 JS 动态修改背景色动画的过渡时间。

// CSS
body {
   -webkit-transition:background-color 1s ease;
   -moz-transition:background-color 1s ease;
   -o-transition:background-color 1s ease;
   transition:background-color .1s ease;
}

// JS

var id = toggle_color('red', 'blue', 5000);

function toggle_color(color1, color2, time) {
  var $selector = document.querySelector('body');

  setTransitionDurations($selector, time)
  $selector.style.backgroundColor = $selector.style.backgroundColor === color1 ? color2 : color1; 
  var intervalId = setInterval(function() {
    $selector.style.backgroundColor = $selector.style.backgroundColor === color1 ? color2 : color1; 
  }, time);
  return intervalId;
}

function getStringFromMs(ms) {
  // convert ms to string
  // i.e. 1000 => '1ms'
  return ms + 'ms';
}

function setTransitionDurations($selector, ms) {
  var transitionSeconds = getStringFromMs(ms);
  // you need to set the transition for 
  // each browser for max compatibility
  var prefixes = ['-webkit', '-o', '-moz'];
  prefixes.forEach(function(prefix) {
    $selector.style.setProperty(prefix + '-transition-duration', transitionSeconds);
  })
  $selector.style.transitionDuration = transitionSeconds;
}

看看这个 jsfiddle 搞砸：https://jsfiddle.net/dwLL9yy4/8/。注意几件事。如果您正在动态更改过渡，则需要确保为每个浏览器更新过渡。请注意，仅 IE10 及更高版本支持转换。此外，转换需要“1s”或“1000ms”形式的时间。有关转换的更多详细信息，请查看https://developer.mozilla.org/en-US/docs/Web/CSS/transition

【讨论】：