优化javascript动画

我有一个满天的星星（任何时候至少200颗），我想让它们闪烁。我正在使用D3.js渲染星星。目前我正在使用以下代码：

svg.select(".stars").selectAll("circle")
  .each(function() {
    var circle = d3.select(this);
    (function twinkle() {
      circle.transition()
        .duration(20 + 480 * Math.random())
        .ease("linear")
        .attr("opacity", 0.5 + 0.5 * Math.random())
        .each("end", twinkle);
    })();
  });

如您所见，

twinkle（）

制作一个随机不透明度动画，然后调用

twinkle（）

。有200颗星星，情况就不太好了：

---

我如何优化它

使用

setInterval

的替代方法：

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，400）；
var数据=d3.范围（200）；
var circles=svg.selectAll（“.circles”）
.数据（数据）
.输入（）
.附加（“圆圈”）；
圆圈。属性（“r”，1）
.attr（“cx”，函数（）{return Math.random（）*400}）
.attr（“cy”，function（）{return Math.random（）*400}）；
函数闪烁（）{
svg.selectAll（“圆圈”）.each（函数（）{
var thisCircle=d3。选择（此）；
thiscorcle.transition（）
.duration（20+480*Math.random（））
.ease（“线性”）
.attr（“不透明度”，0.5+0.5*Math.random（））；
})
}
设置间隔（闪烁，500）
svg{
背景色：黑色；
}
圈{
填充物：白色；
}
使用
setInterval
的替代方法：


var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，400）；
var数据=d3.范围（200）；
var circles=svg.selectAll（“.circles”）
.数据（数据）
.输入（）
.附加（“圆圈”）；
圆圈。属性（“r”，1）
.attr（“cx”，函数（）{return Math.random（）*400}）
.attr（“cy”，function（）{return Math.random（）*400}）；
函数闪烁（）{
svg.selectAll（“圆圈”）.each（函数（）{
var thisCircle=d3。选择（此）；
thiscorcle.transition（）
.duration（20+480*Math.random（））
.ease（“线性”）
.attr（“不透明度”，0.5+0.5*Math.random（））；
})
}
设置间隔（闪烁，500）
svg{
背景色：黑色；
}
圈{
填充物：白色；
}
我认为性能不佳的原因是Chrome试图维护数百个并行转换和插值。由于你所追求的效果不依赖于过渡，考虑移除过渡，并用足够的频率简单地更新不透明度，使其看起来平滑。详情如下:

var stars = svg.select(".stars").selectAll("circle");
function twinkle() {
  stars
    .filter(function() { return Math.random() < 0.1 })
    .attr('opacity', function(d,i) { return 0.7 + 0.3 * Math.random() })
  setTimeout(twinkle, 90)
}
twinkle()

var stars=svg.select（“.stars”）.selectAll（“圆圈”）；
函数闪烁（）{
星星
.filter（函数（）{return Math.random（）<0.1}）
.attr（'opacity'，函数（d，i）{return 0.7+0.3*Math.random（）}）
设置超时（闪烁，90）
}
闪烁
我认为性能不佳的原因是Chrome试图维护数百个并行转换和插值。由于你所追求的效果不依赖于过渡，考虑移除过渡，并用足够的频率简单地更新不透明度，使其看起来平滑。详情如下:

var stars = svg.select(".stars").selectAll("circle");
function twinkle() {
  stars
    .filter(function() { return Math.random() < 0.1 })
    .attr('opacity', function(d,i) { return 0.7 + 0.3 * Math.random() })
  setTimeout(twinkle, 90)
}
twinkle()

var stars=svg.select（“.stars”）.selectAll（“圆圈”）；
函数闪烁（）{
星星
.filter（函数（）{return Math.random（）<0.1}）
.attr（'opacity'，函数（d，i）{return 0.7+0.3*Math.random（）}）
设置超时（闪烁，90）
}
闪烁
您可以与安装程序共享//链接吗？以下是我用作基础的代码。我喜欢本文中描述的解决方案，它完全不涉及任何JavaScript，因此不会消耗您的性能。它通过使用CSS动画在半透明图像周围移动来控制闪烁。然后，这些半透明图像会不时掩蔽背景。您可以通过简单地调整遮罩图像来改变效果以增加更多的随机性。@altocumulus不幸的是，我使用的是渐变背景，因此此解决方案不起作用。您可以与安装程序共享//链接吗？以下是我用作基础的代码，我喜欢本文中描述的解决方案，它完全不涉及任何JavaScript，因此，不会吃掉你的表现。它通过使用CSS动画在半透明图像周围移动来控制闪烁。然后，这些半透明图像会不时掩蔽背景。您可以通过简单地调整遮罩图像来改变效果以增加更多的随机性。@altocumulus不幸的是，我使用的是渐变背景，因此此解决方案不起作用。我在我的计算机上进行了测试，但将我的%与您的%进行比较是没有意义的，因为我们有不同的计算机。所以，你必须用你的电脑来做基准测试，比较性能上的差异（如果有的话）。我在我的电脑上做了一个测试，但是比较我的%和你的%是没有意义的，因为我们有不同的电脑。因此，您必须使用计算机对此进行基准测试，以比较性能差异（如果有）