Question

我有一个值数组 - 每个值代表将被控制的照明通道（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>

Answer 2

您可以使用值的斜率来计算值。

＆＃13;

function getValue(start, end, parts, part) {
    return start + (end - start) * part / parts;
}

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.

var i = 0,
    parts = duration / interval;

for (i = 0; i <= parts; i++)  {
    document.getElementById('out').innerHTML += oldValues.map(function (a, j) {
        return Math.floor(getValue(a, newValues[j], parts, i));
    }).join() + '\n';
}

＆＃13;

<pre id="out"></pre>

＆＃13;

Javascript'Crossfade'数组值

2 个答案:

演示