Question

我试图在9像素上创建彩虹周期/追逐效果。

我需要准备一个json语句，一次更新所有9个像素

到目前为止，我已经能够让所有9个像素改变颜色，但不能追逐追逐模式

这是我的代码：

<div ng-if="!showmore" ng-repeat="group in groups | orderBy: 'date' | limitTo:3">

所以我需要的是变量json改变每次迭代，但不是每次迭代都将每个像素改为相同的颜色，我希望它能够追逐前进，这里有一个很好的小小艺术作为例子：

  var colors = [
"248,12,18",
"238,17,0",    
"255,51,17",    
"255,68,34",
"255,102,68",
"255,153,51",   
"254,174,45",
"204,187,51",
"208,195,16",   
"170,204,34",
"105,208,37",
"34,204,170",   
"18,189,185",
"17,170,187",
"68,68,221",    
"51,17,187",
"59,12,189",
"68,34,153"
]
var i = 0
function f(array) {
 var howManyTimes = array.length;
 json = 'http://xxx.xxxxxxxxxxxxxx.xxx/xxxxx?
  hash='+globalHash+'&colours={"1": ['+array[i]+'], "0": 
  ['+array[i]+'], "3": ['+array[i]+'], "2": ['+array[i]+'], "5": 
  ['+array[i]+'], "4": ['+array[i]+'], "7": ['+array[i]+'], "6": 
  ['+array[i]+'], "9": ['+array[i]+'], "8": ['+array[i]+']}'
sendColorChange(json);
i++;
if (i == howManyTimes) { i = 0}
if( i < howManyTimes ){
    setTimeout(function(){f(array)}, 1000);
 }
}

我希望能稍微清理一下

Answer 1

旧问题，但仍想回答。

如果可以使用HSL值，则可以简单地将S（饱和度）和L（右）设置为所需的值，并在循环中增加H（ue）值以创建彩虹追逐效果。

我在彩虹脚本中针对我创建的网页使用此设置，看起来像这样：

for(rainbowelements.length; let i = 0; i++) {
  rainbowelements[i].style.color = 'hsl(' + counter + ', 100%, 70%)';
  counter++
}

这意味着每次运行for循环都会使计数器增加一个，从而略微改变色调。由于您的问题对我来说不是最清楚的，所以恐怕这是我所能提供的。祝你好运！

使用javascript创建彩虹追逐

1 个答案: