Создание HTML5 жидких частиц на большом холсте

Question

Я новичок в html5 / CSS3 / jquery, и я делаю это (еще не закончено): http://catherinearnould.sio4.net/autres/kat/ Проблема в том, что из-за большого холста с частицами анимация не такая плавная, как могла бы. Поэтому, если вам скучно, не стесняйтесь взглянуть на мой код и дать мне несколько советов по улучшению текучести ^^

Большое спасибо!

Answer 1

Для одного использования RequestAnimationFrame () вместо setTimeout (), скорее всего, все будет более гладко.Смотрите Пола Айриша в своем блоге requestAnimationFrame для умного анимирования .

Answer 2

Можно также подумать об использовании перехода css3 для некоторых ваших анимаций, а также об удалении и добавлении новых классов к элементам для изменения их стилей вместо того, чтобы делать это с помощью javascript (jQuery). Используйте jQuery как запасной вариант для старых браузеров и IE.

http://www.w3.org/TR/css3-transitions/

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

Это дает браузеру возможность выполнять рендеринг, и в некоторых случаях, как в iOS, вы можете получить аппаратное ускорение для рендеринга.

Что касается элемента canvas, у меня мало опыта с этим, но меня интересует тот эффект, который вы создаете. Но я думаю, что массовая анимация холста на старте уже немного, так много уже происходит, может быть, в этом нет необходимости? Просто мое мнение как пользователя.

Answer 3

Большие потери производительности, скорее всего, вызваны живыми вычисленными / визуализированными атрибутами CSS, такими как прозрачность, тени и закругленные углы.

Также следует учитывать, что изменения в элементах DOM, которые вызывают перекомпоновку, являются дорогостоящими (например, такие как:анимации), см. http://code.google.com/speed/articles/reflow.html.

Я вижу большую разницу сразу после запуска этого:

$('*').css({backgroundColor:'transparent', opacity:1, boxShadow:'none'});

Если вы можете, замените всю (полу) прозрачную и округленную графику эквивалентными изображениями PNG.