Как мы писали SVG виджеты для JavaScript

[datacompboy]

Что-то я не понял… Опера 12, линупс. Верхний (переключающий цвета) переключатель — прыгает ступеньками.
И вдруг ВНЕЗАПНО плавно повернулся так медленно. Потом опять — прыгает O_O

[Tomcat]

Надо перепроверить, спасибо :). Вообще, он должен прыгать ступеньками, если его руками крутить, а плавно проезжать — раз в 20 секунд, по таймеру.

[leMar]

Нужно больше древесины!
Нужно больше кода!

[Tomcat]

Да, я тоже об этом думал, но статья и так здоровая получилась :). И что-то конкретное придумать не смог, что бы показать.

Если какой-то кусок кода интересует особо — скажите, подредактируем ;).

[leMar]

Ну, например, это: «нормально оптимизированная перерисовка «вручную» по SetInterval».

[Tomcat]

Промазал по кнопке «ответить» — смотрите ниже…

[Tomcat]

Хороший вопрос :). Ну там, конечно, месяц работы и тонны кода — исходниками одного метода не отделаешься.

Принцип такой — выставляются промежуточные значения через таймер и элементы, которые нужно перерисовать — перерисовываем, а те, которые не нужно — не перерисовываем (ваш Кэп :).

Есть easing-функция, по которой прогоняется значение по таймеру и duration. Мы получаем текущее значение и вызываем перерисовку. Собственно, оптимизация — грамотно выбрать только нужные объекты и перерисовывать только их.

Ну и, при стандартной анимации непонятно, как с одной на другую переключаться (если новая анимация началась, когда предыдущая ещё не закончилась). Здесь это решается легко и просто.