Является ли WebGL или Canvas единственным способом получить ускоренное ускорение анимации анимации персонажа SVG?

Я ищу альтернативу для мобильных телефонов с использованием html5.

Я смотрел SVG, и кажется, что единственный способ получить аппаратное ускорение - использовать CSS-преобразования на нем. Но преобразований CSS недостаточно, я хочу анимировать фактические узлы, которые составляют вектор (т.е. Точки на пути), поэтому я мог бы получить более сложную анимацию символов. Для этого я смотрел на некоторые редакторы, основанные на gui.

Я проверил, что сделал adobe, и они, похоже, убили Edge Animate и переименовали Flash как "Animate CC" на 2016 год.

http://blogs.adobe.com/creativecloud/update-about-edge-tools-and-services/ https://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/

Но, читая "Animate CC", я вижу, что он экспортирует векторные анимации в Canvas или WebGL. Я думаю, из-за этого они не получают аппаратное ускорение с помощью собственного SVG через SMIL или с помощью javascript. https://css-tricks.com/guide-svg-animations-smil/

Другой - http://www.animatron.com, который также преобразует все в холст.

Итак, мой вопрос заключается в том, чтобы сделать анимацию ключевого кадра на узлах в векторном пути, вектор нужно преобразовать в WebGL или Canvas, чтобы он был аппаратным ускорением на мобильном телефоне?

p.s Я предпочитаю использовать SVG, поскольку он загружен в DOM, и я могу манипулировать вещами с помощью jquery. Это для мобильной игры, которая использует векторы (svg) в качестве базы, но я хотел бы также включить анимацию - за рамки базовых преобразований css. Хотелось бы иметь файл .svg, который не только содержит векторную информацию, но и информацию анимации. поэтому я могу загрузить этот .svg файл. а затем в javascript go: character1.play('animation1') или что-то в этом роде. Если бы SMIL работал быстро, я уверен, что редакторы, подобные adobe, сделают это так просто.

EDIT: я просто прочитал, что Chrome 45 убил SMIL в пользу "веб-анимации" и css. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL И поскольку Кайидо упомянул в комментариях, IE никогда не поддерживал смайлик, поэтому, возможно, почему adobe никогда не экспортировал в него (?). http://caniuse.com/#feat=svg-smil также я никогда не видел примеров в Интернете, которые показывают анимацию ускоренного пути аппаратного ускорения с помощью smil, если кто-либо из вас, ребята, найдет ссылку, сообщит мне.

РЕДАКТИРОВАТЬ № 2. Я думаю о том, чтобы отказаться от моего желаемого за действительное и вместо этого взглянуть на векторных экспортеров холста, таких как animatron.com. Однако, похоже, что на холсте даже аппаратное ускорение или быстрое преобразование css3. Я загрузил некоторые анимации из аниматрона в моем старом iPhone 4s/iOS 8, и он дрожал и замедлялся, например: https://www.animatron.com/project/1953f3526e5b2ec4eef429c8 тогда как анимация трансляции css3 всегда работает очень плавно...

Я еще не тестировал вектор для webgl.. но я думаю, что поэтому adobe в конечном итоге решил использовать его для своей векторной анимации, так как холст медленный и svg ограничен.

РЕДАКТИРОВАТЬ № 3: достаточно уверен, что webgl - это путь (если кто-то не найдет способ сделать это с помощью родного svg) http://www.yeahbutisitflash.com/?p=7231.. это работает быстро в моем iphone 4s/ios8. В настоящее время я считаю, что это единственный способ сделать то, что я хочу: аппаратная ускоренная векторная анимация (однако графика не выглядит как я бы хотел их.. webgl kinda messed с тем, что я думаю). но именно поэтому я думаю, что Edge Animate был убит, потому что они пытались создать инструмент, который использовал преобразования css3, но ppl хочет анимировать векторные узлы, чтобы они вернулись к Flash и переименовали его. (еще одно замечание: вышеупомянутый аниматор webgl не работает так хорошо на моей галактике S4/kitkat android phone.. так что это в основном для более новых устройств/ОС)

EDIT # 4: подумайте об этом. было бы больно иметь несколько контекстов webgl, работающих в моей программе. поэтому, если бы у меня было 10 анимированных персонажей, мне пришлось бы иметь 10 контекстов webgl, которые были бы интенсивными для мобильного устройства. Если бы я не выбрал всю игру во флэш-памяти, а после этого у меня был бы один большой контекст webgl после экспорта Это. но я предпочитаю работать в доме. oh well css3 преобразовывает тем временем..:/

РЕДАКТИРОВАТЬ № 5 - декабрь 2016 г.. Теперь я использую svg/javascript с помощью snap.svg. современные телефоны выглядят достаточно быстро.

Другие полезные ссылки я Найдено:

http://www.crmarsh.com/svg-performance/

Ответ 1

Canvas (насколько мне известно) ускоряется. Таким образом, он обрабатывается процессором (CPU). Процессор (из-за них пикселей) не так хорош в графических материалах, но для простых вещей этого было бы достаточно. И он работает везде, где есть процессор.

Если вы хотите получить лучшую производительность на аппаратных ускорителях, которыми владеют самые современные смартфоны, вам нужно webgl. Но вы можете экспортировать свои материалы в webgl из adobe CC. Старые смартфоны не очень оптимизированы для аппаратного ускорения, поэтому, пожалуйста, проверьте с вашей целевой группой, какие у них есть устройства, и попробуйте запустить приложение на одном из самых медленных устройств.

Я бы не использовал SVG. SVG хуже, чем DOM. Вы можете быстрее манипулировать HTML в javascript, чем SVG. Я не знаю, почему, но это чертовски медленно. SVG - это просто альтернатива, если вы хотите иметь масштабируемую графику или диаграммы и то, для чего она предназначена. Анимация в SVG - это боль. Не делай этого. Он не оптимизирован для анимации.

CSS-Transform похож на прототип и не поможет вам с анимацией ключевого кадра. Но у него есть потенциал, чтобы заглянуть в него.

Помогает ли это вам?

Ответ 2

Я думаю, что это сложный вопрос для ответа, так как существует множество проблем с разными браузерами. Некоторые из них не поддерживают преобразование SMIL хорошо (или устарели, но, как уже упоминалось, для него есть заливки), некоторые из них вообще не поддерживают преобразования CSS3 на элементах SVG, поэтому большинство "решений" там имеют некоторую проблему, может потребоваться компрометация. Я думаю, что один браузер не поддерживает надлежащий атрибут d атрибута, но я не могу вспомнить, что (так что сначала проверьте это с помощью необходимых браузеров, если вы идете по этому маршруту).

Canvas, как правило, лучше работает на мобильных устройствах для большинства анимаций, которые я видел или играл с ними, конечно, поскольку количество объектов увеличивается на странице.

Другие альтернативы webGL, которые были упомянуты..

Один из вариантов, который может возникнуть из виду, - это fabric.js, который представляет собой подход холста к SVG. Он будет принимать те же команды, что и SVG, но отображать их на холсте HTML5. Отключите в нем перетаскивание /freetransform (как я думаю, это немного замедлилось с этим, если ему нужны дополнительные проверки), и я думаю, что это будет немного быстрее, но с тех пор, как я играл. Это может быть интересным подходом, если вам не нужен определенный доступ к элементам DOM, но было бы хорошо, если вы в порядке с аналогичной настройкой на основе объектов.

Если вы настаиваете на использовании SVG, я бы посмотрел на его интеграцию с другой библиотекой (или даже с 2). Snap или SVG.js оба достойны, но могут быть немного медленными. Тем не менее, я бы экспериментировал с использованием Velocity.js или React.js с этой библиотекой svg, поскольку у них есть некоторые методы, которые могут выжать немного большую производительность. Также может выглядеть GSAP.

Ответ 3

Нет общего ответа на этот вопрос, это зависит от реализации браузера и вашего оборудования, но... для долгосрочного решения Я бы поставил на WebGL, потому что он использует графический процессор и в конечном итоге доминировать.

WebGL не работает поддерживается прямо сейчас (2016), и он потенциально поставляется с безопасностью вопросы. Также см.: https://css-tricks.com/rendering-svg-paths-in-webgl/

Canvas лучше работает над сырыми 2d-пиксельными буферами (+ альфа-канал) и медленнее для анимации с более высоким разрешением +. Вы могли бы использовать некоторую двойную библиотеку, например Pixi.

Ответ 4

Если вы не возражаете, чтобы k-weight немного увеличился и вам удобнее использовать flash, самым простым и быстрым решением было бы использовать Animate CC (он точно Flash, без фильтров символов и дает выход canvas вместо swf).

Ответ 5

Эта библиотека/плагин может быть именно тем, что вы ищете: Greensock SVG Morph Plugin. Похоже, что он работает на мобильных устройствах, но не уверен, насколько хорошо он работает на упомянутых вами устройствах.

Это также не ускорило GPU, но Greensock Animation Platform, похоже, отлично работает даже на мобильных устройствах.