JavaScript 'Crossfade' 数组值

Question

我有一个值数组 - 每个值代表将要控制的照明 channel (0-255) 的强度。每个数组都包含一个“场景”。

我想在“场景”之间进行淡入淡出，但无法找到一种优雅的方法来实现。

在 Javascript 中，如何在给定的持续时间内以给定的更新间隔(例如 25ms)将 oldValues 数组淡入为 newValues 数组？

我发现了一些与我在下面链接的内容非常相似的内容，但无法弄清楚如何将其应用于值数组。

https://jsfiddle.net/joshuapinter/8uasm7ko/

//EXAMPLE
var oldValues = [0,124,12,200];      // Initial Values
var newValues = [255,255,255,255];   // Target Values

var duration = 4000;                 // Time for transition in Milliseconds
var interval = 25;                   // 40 intervals (frames) per second.

CODE GOES HERE

Answer 1

您可以创建一个函数来计算要执行的步骤数、计算步进值，并使用 setTimeout 反复调用自身，直到没有剩余步骤为止:

function animateLight(light, start, end, duration, interval) {
  // Calculate number of steps
  var nbSteps = Math.ceil(duration / interval);
  if(nbSteps == 0){ return; }
  // Calculate value to add/substract to the current value
  var step = (end - start) / nbSteps;
  var current = start + step;
  light.querySelector('.light').style.opacity = current / 255;
  light.querySelector('.value').innerText = parseInt(current, 10);

  setTimeout(function(){
    animateLight(light, current, end, duration - interval, interval)
  }, interval);
}

演示

var lights = document.getElementsByClassName('light-wrapper'); // Light DOM elements
var oldValues = [0,124,12,200];      // Initial Values
var newValues = [255,255,255,255];   // Target Values

var duration = 4000;                 // Time for transition in Milliseconds
var interval = 25;                   // 40 intervals (frames) per second.

for(var i=0; i<lights.length; i++) {
    animateLight(lights[i], oldValues[i], newValues[i], duration, interval);
}

function animateLight(light, start, end, duration, interval) {
  // Calculate number of steps
  var nbSteps = Math.ceil(duration / interval);
  if(nbSteps == 0){ return; }
  // Calculate value to add/substract to the current value
  var step = (end - start) / nbSteps;
  var current = start + step;
  light.querySelector('.light').style.opacity = current / 255;
  light.querySelector('.value').innerText = parseInt(current, 10);

  setTimeout(function(){
    animateLight(light, current, end, duration - interval, interval)
  }, interval);
}

body{
  background: #222;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.light-wrapper{
  display: inline-block;
  width: 4em;
  text-align: center;
}

.light{
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background: #fff;
  margin: 3em auto .8em auto;
  box-shadow: 0 0 .4em #fff, 0 0 .8em #fff, 0 0 .8em #fff, 0 0 1.2em #fff,  0 0 3em #fff;
}

<div class="light-wrapper">
  <div class="light"></div> <div class="value">255</div>
</div>
<div class="light-wrapper">
  <div class="light"></div> <div class="value">255</div>
</div>
<div class="light-wrapper">
  <div class="light"></div> <div class="value">255</div>
</div>
<div class="light-wrapper">
  <div class="light"></div> <div class="value">255</div>
</div>