Question

我正在尝试使用Javascript模拟LED条带上的无限循环追踪器。

我正在努力实现的目标：

仅使用循环或递归函数。没有花哨的JS。
支持任何长度的LED灯条（var ledLength）
支持多个追逐者
支持任意数量的LED（var ledDepth）分隔追踪者的空间（var blankDepth）
无限循环
没有神奇的数字

我为1个追逐者工作：

$(function(){

  var ledLength = 20;

  for(var i = 0; i < ledLength; i++) {
    $('#led').append($('<div>').addClass('node'));
  }

  $('#led').css('width', ($('.node').length + 1) * $('.node').last().outerWidth(true));

  var colors = ['green', 'red', 'blue'];
  // add a "clearing" color
  colors.push('black');

  var ledDepth = 3;
  var blankDepth = 2;
  var chaserSize = ledDepth + blankDepth;

  var iteration = 0;

  var loop = setInterval(animate, 250);

  function animate() {

    if(iteration == ledLength + ledDepth) iteration = 0;

    var offset = iteration < chaserSize ? iteration : chaserSize;

    for(var i = 0; i <= offset; i ++) {
      var colorOffset = i < ledDepth ? i : ledDepth;
      $('.node').eq(iteration-i).css('background', colors[colorOffset]);
    }
    iteration++;
  }
});

或者您可以在JSBin上查看。

我如何跟踪条带上的多个追踪者？在创建初始chaserSize并向右移动之后的含义，将创建另一个并随之移动并无限循环。

非常感谢任何向正确方向提供帮助。

Answer 1

我决定使用array.push方法采用不同的方法。

基本上，我继续添加点，循环遍历它们以增加它们的位置，如果它们的位置大于条带的长度，则将它们移除。

这适用于所有LED长度，追踪器尺寸（颜色+每个追踪器之间的空白）。

代码：

$(function(){


  // create the strip
  var ledLength = 30;
  for(var i = 0; i < ledLength; i++) {
    $('#led').append($('<div>').addClass('node'));
  }
  $('#led').css('width', ($('.node').length + 1) * $('.node').last().outerWidth(true));

  var points = [];

  var colors = ['green', 'red', 'blue', 'pink', 'orange', 'purple'];

  var ledDepth = colors.length || 6;
  var blankDepth = 2;
  var chaserSize = ledDepth + blankDepth;

  // push blank nodes on the back of colors array
  for(var i = 0; i < blankDepth; i++) {
    colors.push('blank');
  }

  var iteration = 0;

  // loop!
  var loop = setInterval(animate, 100);

  function animate() {

    if(points.length) {
      for(var i = 0; i < points.length; i++) {
        // increase each pin by 1
        points[i].pin++;
        // remove point if pin is greater than led length
        if(points[i].pin > ledLength) {
          points.splice(i, 1);
        }
      }
    }

    if(iteration < chaserSize) {
      points.push({pin: 0, color: colors[iteration]});
    }

    // draw points
    for(var i = 0; i < points.length; i++) {
      if(points[i].color == 'blank') { // this if for 'resetting'
        $('.node').eq(points[i].pin).css('background', 'black');
      } else { // this is for changing color
        $('.node').eq(points[i].pin).css('background', points[i].color);
      }
    }

    // iterate before reset
    iteration++;

    // reset sub-iterator (creator)
    if(iteration >= chaserSize) {
      iteration = 0;
    }
  }
});

或JSBin

Javascript中的基本LED追踪动画循环

1 个答案: