Canvas и SVG-анимации (эффекты [фильтры] и производительность)

Я разрабатываю приложение, которое должно работать одинаково гладко в веб-браузере (поддержка IE полностью необязательна) и на iPhone и тестировала различные библиотеки в течение нескольких дней, в том числе: jQuery SVG , CAKE (эксперимент по набору анимации холста), Burst Engine, Processing.js и Raphael, и еще предстоит найти правильный вариант для этого эксперимента.Canvas и SVG-анимации (эффекты [фильтры] и производительность)

Ввод не является обязательным: SVG или PNG визуализируются из вектора, только два требования к библиотеке анимации должны иметь возможность анимации (поворота) изображения и постепенно применять фильтр размытия или «трассы» "-подобный эффект.

Должен ли я идти на SVG или холст, производительность и вышеназванный эффект?

Ранее проект был во Flash, но в отношении тенденций и отсутствия поддержки iPhone я решил переключиться на более прогрессивное программное обеспечение.

источник

2010-09-30 laVie

Здесь вы можете сравнить характеристики фильтра svg vs canvas самостоятельно. Другой пример показывает, как сделать svg 3d lighting effect vs canvas 3d lighting effect

Есть много хороших демонстраций на chromeexperiments, показывающих как холст, так и svg. И есть svg-wow.org, который делает то же самое более или менее.

источник

2010-09-30 21:48:07

Спасибо, кажется, что Canvas может быть более эффективным в этом эксперименте. Хотя я не смог найти никаких примеров или ссылок на анимацию фильтра размытия (как для добавления, так и для уменьшения размытости) - знаете ли вы, что-нибудь известно? Поскольку я использовал Flash в предыдущей реализации проекта, SVG кажется более интуитивным, хотя в AS размытие и вращение были атрибутами анимации объектов на разных уровнях - можете ли вы привести несколько примеров того, как реализовать тот же с использованием Canvas? (несколько объектов, независимо оживляющих с вращением и фильтрами) – laVie

Вот пример анимации размытия: http://svg-wow.org/blog/2009/10/04/fast-blur/. Для этой конкретной версии требуется поддержка анимации SMIL, которая еще не во всех браузерах (я бы рекомендовал ее запустить в Opera). Тем не менее, можно изменить атрибут stdDeviation с помощью javascript, и это должно отлично работать в браузерах, которые поддерживают фильтры svg. –

Также меня удивляет производительность, так как версия svg намного быстрее в каждом экземпляре, который я пробовал (в основном, код C++ vs javascript). Пробовал несколько разных браузеров? –

Canvas и SVG-анимации (эффекты [фильтры] и производительность)

ответ

Смежные вопросы