Плавно анимируйте изменения атрибутов для ~ 3000 объектов Raphael одновременно

ОБНОВЛЕННЫЙ ВОПРОС Я обновил его, чтобы он стал немного более лаконичным ..:

В этой скрипке: http: // jsfiddle .net / pX2Xb / 4 / У меня есть код raphael, который рисует 3000 кругов на странице. Затем он пытается анимировать все круги сразу (меняет цвет заливки) в течение 10 секунд, что приводит к неуклюжей визуальной анимации. Измените количество кругов на 20, чтобы увидеть более плавную анимацию для сравнения.

Мои вопросы: (а) могу ли я сделать обновление 3000 элементов более плавным и (б) если да, то как выглядит код для этого?

Некоторые примечания:

• Я хочу сделать небольшой удар по времени, если есть какой-то способ оптимизировать это, но, например, я бы хотел, чтобы все круги хотя бы обновились в В 1,5 раза независимо от установленного времени анимации. Итак, если анимация длится 10 секунд, все круги должны были измениться через 15.
• 3000 элементов - это примерно мой предел на данный момент, поэтому я был бы счастлив, если бы он работал для этого :) Говоря это, если решение может эффективно обрабатывать больше, для общего случая это было бы действительно здорово.

старые детали, на случай, если это поможет

Я создаю большую карту округов США, которых более 3000; Я использую этот файл svg из Википедии , чтобы получить соответствующие пути SVG для создания карты, и визуализирую карту с помощью RaphaelJs .

Соответственно, у меня получается более 3000 операторов, подобных следующему:

    var cc_02130 = rsr.path("M 140.66674,.... 320.11635"); // county path
    cc_02130.attr({id: '02130',.. .."marker-start": 'none'}); // init attrs

Я также создаю объект Paper.set () для хранения всех этих элементов:

var myset = paper.set([cc_56039, cc_56040, cc_56041 ...])

Забыть на В тот момент, когда фактически сгенерированный здесь файл довольно велик, я был бы очень признателен за предложения , как я могу применить изменения к объему объектов, описанных выше, это быстро и достаточно хорошо с точки зрения ЦП (возможно, большой вопрос).

Я определенно открыт для изменения структуры моего кода / объектов, если я могу индивидуально изменять атрибуты конкретных округов. Например, я хотел бы иметь возможность применять разные цвета к каждому содержимому пути через секунду или две (для всех 3000+).

Проблема, с которой я столкнулся, заключается не в том, как применить изменения цвета, анимацию и т. Д., А в том, как сделать это быстро и эффективно. Прямо сейчас моя машина кричит мне, если я зацикливаю и применяю изменения к более чем 3000 объектам; в качестве альтернативы я использовал setTimeout , чтобы разбить изменения на более мелкие фрагменты (возможно, 10 на ходу с задержкой 40 мс). Более 3000 элементов, это становится довольно медленным и по-прежнему использует много ресурсов процессора.

Спасибо, Оли