javascript - 数组迭代和缓动递增

Question

我正在尝试创建一个函数来遍历数组并将值递增一定数量。随着值变大，值增加的量必须减少。

考虑以下几点:

// Before first iteration
['100','150','220','280','310','330']

// After first iteration
['106','155','224','283','312','331']

// After second iteration
['112','160','228','288','314','332']

// After third iteration (note the last item has been reset to 100)
['100','117','164','232','291','316']

在上面的示例中，我使用了“6,5,4,3,2,1”的增量，但这些数字的问题在于它们最终会相互 catch 。我正在努力计算要使用的正确值，以确保值在数组末尾靠得更近，但值永远不会相互重叠。

重申一下，这里的问题不一定是创建值数组，它是创建一个值数组来保持我想要的缓动，即环向屏幕边缘靠得更近，同时防止环最终相互追赶并重叠....

更复杂的是，每当值超过 332 时，就需要将其重置为 100。这实际上会将外部的任何环移动回内部...

这些值最终将构成一个函数的基础，该函数将创建如下内容:

增量量将是动画环大小的量。我会用 CSS 编写动画，但不幸的是，动画将是事件驱动的，而事件驱动我的意思是多点触控事件驱动，所以 JavaScript 是我唯一的选择...

我的代码

我已经尝试过很多代码，但我真的很难理解算法和值!这是我目前拥有的，但它不能正常工作:

// Calculate the properties for each ring
for(var i=0;i<6;i++){
    var ring_decrement = 6-i;
    ring_properties[i].dimension += ((-2.5 * ((t=(ring_decrement/10)-1)*t*t*t - 1) + 0.1)/100)*container_width;
    ring_properties[i].opacity = i===0 ? 0 : i===1 ? 0.7 : Math.round((0.6-(i/10))*10)/10;
    if(((ring_properties[i].dimension/container_width)*100)>80){
        ring_properties[i].dimension = 100;
        ring_properties[i].opacity = 0;
    }
}
ring_properties.sort(function(a,b){
    if(a.dimension===b.dimension){
        return 0;
    }else{
        return (parseInt(a.dimension)<parseInt(b.dimension)) ? -1 : 1;
    }
});
// Apply the properties to the rings
$('.radius_ring').each(function(i){
    /*if(ring_properties[i].dimension===100){
        $(this).addClass('paused');
    }*/
    $(this).css({
        width: ring_properties[i].dimension+'px',
        height: ring_properties[i].dimension+'px',
        opacity: ring_properties[i].opacity
    });
});

下面是创建初始环的代码(这段代码有效!):

var ring_dimension_percent = 5;
var ring_explode_increment = 0;
var container_width = parseInt($('#scan_radius_container').css('width'));
var ring_properties = new Array();

// Explode radius rings on load
var ring_explode = setInterval(function(){
    // Calculate the percentage of the container width
    ring_dimension_percent = ring_explode_increment===0 ? ring_dimension_percent : Math.round(-75 * ((t=(ring_explode_increment/10)-1)*t*t*t - 1) + 10);
    // Translate the percentage into pixels
    ring_properties[ring_explode_increment] = {
        // Set the dimension
        dimension: (ring_dimension_percent/100)*container_width,
        // Set the opacity
        opacity: ring_explode_increment===0 ? 0 : ring_explode_increment===1 ? 0.7 :  Math.round((0.6-(ring_explode_increment/10))*10)/10
    };
    // Apply the styles to the radius rings
    $('.radius_ring:eq('+ring_explode_increment+')').css({
        width: ring_properties[ring_explode_increment].dimension+'px',
        height: ring_properties[ring_explode_increment].dimension+'px',
        opacity: ring_properties[ring_explode_increment].opacity
    });
    if($('.radius_ring').length===(ring_explode_increment+1)){
        clearInterval(ring_explode);
    }else{
        ring_explode_increment++;
    }
},50);

Answer 1

编辑以解决关于行追赶/重叠的评论

您可以做的一件事是对递增数组使用正弦函数。即，将 [0º,90º] 的范围分成六部分，[0, 15, 30, 45, 60, 75]，然后每次将这些度数递增 1。使用这些值的正弦 来计算您的半径。

这里有一些代码，希望能使这一点更清楚。

var DEG_TO_RADIAN = Math.PI / 180; // convert degrees to radian
var minRadius = 100;
var maxRadius = 340;
var degrees = [0, 15, 30, 45, 60, 75];
var radius = new Array(6);

function incrementArray(){
  degrees.forEach(function(d, i){
    degrees[i] = (degrees[i] + 1) % 90; // so it's always between [0,90]
    var radian = degrees[i] * DEG_TO_RADIAN;
    var sine = Math.sin(radian); 
    // bound the radius so it's between min and max allowed radius
    // and convert to integer value.
    radius[i] = Math.round(minRadius + sine * (maxRadius - minRadius));
  });

  console.log("Radius = " + radius.join(","))
}

setInterval(incrementArray, 50)

这是一个bl.ock with a sample animation和 the corresponding gist .

---

上一个答案。请忽略...没有解决具体问题。

这可行，但您需要对其进行修改以执行您正在执行的所有其他额外操作。

arr = [100, 150, 220, 280, 310, 330];
increments = [6, 5, 4, 3, 2, 1];
allowedMax = 332; // reset to 100 once we hit this

function incrementArray(){
  arr.forEach(function(d, i){
    arr[i] += increments[i];
    if(arr[i] > allowedMax){
      arr[i] = 100;
    }
  });
  arr.sort(); // sort ascending.
  console.log(arr) // print so we can see that it makes sense
}

// increment every 1 second
setInterval(incrementArray, 1000)