Javascript'；交叉衰落'；数组值

我有一个值数组-每个值表示将被控制的照明通道（0-255）的强度。 每个阵列包含一个“场景”

我想在“场景”之间进行交叉淡入淡出，但无法找到一种优雅的方式

在Javascript中，如何在给定的更新间隔（例如25ms）内，在给定的持续时间内将旧值数组淡入新值数组

我发现了一些与下面链接的内容非常相似的东西，但无法解决如何将其应用于值数组

---

可以使用值的斜率来计算该值

函数getValue（开始、结束、部分、部分）{ 返回开始+（结束-开始）*零件/零件； } var oldValues=[0124,12200]；//初始值 var newValues=[255255]；//目标值 var持续时间=4000；//转换时间（毫秒） var间隔=25；//每秒40个间隔（帧）。 var i=0， 部分=持续时间/间隔；

---

对于（i=0；i您可以创建一个函数，该函数计算要执行的步骤数，计算步进值，并使用

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元素
var oldValues=[0124,12200]；//初始值
var newValues=[255255]；//目标值
var duration=4000；//转换时间（毫秒）
var interval=25；//每秒40个间隔（帧）。
对于（var i=0；i1.计算步长（每个间隔的增量值）；2.将临时变量设置为初始值；3.在回调中使用“setInterval”计划间隔事件：a）当未达到最终值时，计算当前阶段值，采取措施并将其分配给临时变量，b）；b） 当达到最终值时，“clearInterval”。
var timeappeased=。。。；var比率=数学最小值（1，时间经过/持续时间）；var midValues=oldValues.map（函数（o，i）{var n=newValues[i]；返回o+（n-o）*比率；}）
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);
}