1

我需要创建约 20 个连续闪烁的点。出于性能原因，我选择了 Velocity.js + SVG。对结果满意（动画运行流畅），我对 CPU/GPU 过载感到困惑。

这是一个代码片段，为了这个问题而简化（http://codepen.io/anon/pen/NPjLVq?editors=101）：

var i = 0;

setInterval(function()
{
    if( i > 9 ) i = 0;

    var radius = $('#dot' + i).data('r');

    $('#dot' + i)
    .velocity({ opacity: 0.2 }, { duration: 500, queue: false })
    .velocity({ r: 4 * radius }, { duration: 500 })
    .velocity({ r: radius }, { duration: 500 })
    .velocity({ opacity: 1.0 }, { duration: 600 - 15 * radius });
    i++;

}, 500);

SVG 对象：

<svg width="700px" height="200px">
    <circle cx="100" cy="100" r="5"  data-r="5"  class="dot" id="dot0"/>
    <circle cx="150" cy="100" r="13" data-r="13" class="dot" id="dot1"/>
    <circle cx="200" cy="100" r="3"  data-r="3"  class="dot" id="dot2"/>
    (...)
</svg>

连续播放五分钟，CPU 温度高达 150%。我在 OS X Yosemite 10.10 上使用 Chrome 39（64 位）。

缓存选择器和使用 Velocity.js 序列进行操作并没有帮助。

我试图在 Chrome 中使用 Timeline Tool 查找任何内存泄漏，但徒劳无功。

为什么这么简单的动画会导致我的笔记本电脑着火？

4

1 回答 1

1

1.方法：SMIL

您可以使用 SMIL，而不是以非常快速的方式操作 SVG/DOM。使用 SMIL，您可以定义简单的动画，而无需自己与 DOM 交互。

动画可以如下所示：

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate 
    xlink:href="#my-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />

（来源：http ://css-tricks.com/guide-svg-animations-smil/ ）

我认为这将大大减少 CPU 负载。

您实际上一直在将 DOM 设置为新值，这会导致 CPU 负载。定义一个“真实的”动画会更有效率。

2.方法：不要使用setInterval

也有可能是您使用 setInterval 导致了高负载。因为它将在 500 毫秒内再次调用您的函数（即使它仍在运行）。

于 2015-01-21T14:24:07.893 回答