Является ли WebGL или Canvas единственным способом получить аппаратное ускорение анимации ключевых кадров SVG?
То, что я ищу, - это флэш-альтернатива для мобильных телефонов, использующих html5.
Я изучал SVG, и кажется, что единственный способ получить аппаратное ускорение - использовать на нем CSS-преобразования. Но CSS-преобразований недостаточно, я хочу анимировать фактические узлы, которые составляют вектор (то есть точки на пути), чтобы я мог получить более сложную анимацию персонажа. Чтобы сделать это, я смотрел на некоторых графических редакторов.
Я проверил, что такое 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, чтобы он был аппаратно ускорен на мобильных устройствах?
PS Я предпочитаю использовать SVG, так как он загружен в DOM, и я могу манипулировать вещами с помощью jquery. Это для мобильной игры, в которой в качестве основы используются векторы (svg), но я бы хотел также включить анимацию - помимо базовых преобразований CSS. Хотелось бы, чтобы был способ иметь файл.svg, который содержит не только векторную информацию, но и информацию об анимации. чтобы я мог загрузить этот файл.svg. а затем в javascript перейти: персонаж1.play('animation1') или что-то. Если бы SMIL работал быстро, я уверен, что такие редакторы, как Adobe, сделали бы это так просто.
РЕДАКТИРОВАТЬ: я только что прочитал, что Chrome 45 убил SMIL в пользу "веб-анимации" и CSS. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL И, как упоминал Кайидо в комментариях, IE никогда не поддерживал smil, поэтому, возможно, именно поэтому Adobe никогда не экспортировалась в него (?). http://caniuse.com/ Также я никогда не видел в Интернете примеров, показывающих аппаратную ускоренную анимацию пути с помощью smil, если кто-нибудь из вас, ребята, найдет ссылку, пожалуйста, дайте мне знать.
РЕДАКТИРОВАТЬ # 2: Я думаю о том, чтобы отказаться от своих желаний и вместо этого смотреть на вектор для экспортеров холста, таких как animatron.com. Однако не похоже, что canvas даже аппаратно ускоряется или ускоряется, как преобразования css3. Я загрузил некоторые анимации из аниматрона в мой старый iPhone 4s/iOS 8, и он, например, нервный и медленный: https://www.animatron.com/project/1953f3526e5b2ec4eef429c8 тогда как анимации преобразования css3 всегда работают очень плавно...
Я до сих пор не тестировал vector для webgl... но я думаю, именно поэтому Adobe в конечном итоге решила использовать его для своих векторных анимаций, так как canvas медленный и svg ограничен.
РЕДАКТИРОВАТЬ # 3: конечно же, кажется, что webgl - это путь (если кто-то не найдет способ сделать это с нативным svg) http://www.yeahbutisitflash.com/?p=7231.. это работает быстро в моем iphone 4s/ios8.. В настоящее время я думаю, что это единственный способ сделать то, что я хочу: аппаратно-ускоренную векторную анимацию (однако графика не выглядит такой четкой, как хотелось бы… webgl вроде как с этим смирился), но именно поэтому я думаю, что Edge Animate погиб, потому что они пытались создать инструмент, использующий преимущества преобразований css3, но ppl хочет анимировать векторные узлы, чтобы они вернулись во Flash и переименовали его. (еще одно примечание: приведенный выше анимированный webgl не очень хорошо работает на моем телефоне Galaxy S4/kitkat android... так что это в основном для новых устройств / ОС)
РЕДАКТИРОВАТЬ # 4: если подумать. Было бы больно иметь несколько контекстов webgl в моей программе. поэтому, если бы у меня было 10 анимированных персонажей, у меня было бы 10 контекстов webgl, которые были бы интенсивными для мобильного устройства... если я не решу сделать всю игру во флэш-памяти, и тогда у меня будет один большой контекст webgl после экспорта Это. но я предпочитаю работать в доме. да ладно css3 трансформируется пока..:/
РЕДАКТИРОВАТЬ № 5 - декабрь 2016: я сейчас использую svg/javascript с snap.svg. современные телефоны кажутся достаточно быстрыми.
Другие полезные ссылки, которые я нашел:
5 ответов
Canvas - это (насколько я знаю) программное обеспечение ускорено. Таким образом, он отображается процессором (CPU). Процессор (из-за пикселей) не очень хорош в графических вещах, но для простых вещей этого будет достаточно. И работает везде, где есть процессор.
Если вы хотите иметь более высокую производительность на устройствах с аппаратным ускорением, как в большинстве современных смартфонов, вам нужен webgl. Но вы можете экспортировать свои вещи в webgl из Adobe CC. Старые смартфоны не очень оптимизированы для аппаратного ускорения, поэтому, пожалуйста, уточните у целевой группы, какие устройства у них есть, и попробуйте запустить ваше приложение на одном из самых медленных устройств.
Я бы не использовал SVG. SVG даже хуже чем DOM. Вы можете быстрее манипулировать HTML в javascript, чем SVG. Я не знаю почему, но это чертовски медленно. SVG - это просто альтернатива, если вы хотите иметь масштабируемую графику или графики, и для этого она создана. Оживить в SVG - это боль. Не делай этого. Он не оптимизирован для анимации.
CSS-Transform похож на прототип и не поможет вам с анимацией ключевых кадров. Но у этого есть потенциал, чтобы наблюдать за этим.
Вам это поможет?
Эта библиотека / плагин может быть именно тем, что вы ищете: Greensock SVG Morph Plugin. Похоже, что он довольно хорошо работает на мобильных устройствах, но не уверен, насколько хорошо он работает на упомянутых вами устройствах.
Он также не ускоряется с помощью графического процессора, но платформа Greensock Animation, кажется, работает очень хорошо даже на мобильных устройствах.
Если вы не возражаете против увеличения k-веса и вам удобно использовать flash, самое простое и быстрое решение - использовать Animate CC (это точно Flash, без фильтров символов и выдача холста вместо swf).
Я думаю, что на этот вопрос сложно ответить, так как в разных браузерах так много проблем. Некоторые не поддерживают преобразования SMIL (или устарели, но, как уже упоминалось, для этого есть заливки), некоторые вообще не поддерживают преобразования CSS3 в элементах SVG, поэтому большинство "решений" там имеют некоторые проблемы, которые возможно, придется пойти на компромисс. Я думаю, что один браузер не поддерживает должным образом атрибут d, но я не могу вспомнить, какой (так что проверьте это на ранних этапах с необходимыми браузерами, если вы пойдете по этому пути).
Холст, как правило, лучше работает на мобильных устройствах для большинства анимаций, которые я видел или играл, конечно же, поскольку количество объектов на странице увеличивается.
Другие альтернативы webGL, которые были упомянуты..
На ум приходит один из вариантов - fabric.js, который представляет собой холст-подход к SVG. Он будет принимать те же команды, элементы, что и SVG, но отображать его на холсте HTML5. Выключите перетаскивание /freetransform в нем (так как я думаю, что это немного замедляется с этим, если ему нужны дополнительные проверки), и я думаю, что это будет немного быстрее, но некоторое время назад я играл. Это может быть интересным подходом, если вам не нужен конкретный доступ к элементу DOM, но было бы неплохо, если вы в порядке с подобной объектно-ориентированной установкой.
Если вы настаиваете на использовании SVG, то я бы посмотрел на интеграцию с другой библиотекой (или даже 2). Snap или SVG.js оба приличны, но могут быть немного медленными. Однако я бы поэкспериментировал с использованием Velocity.js или React.js с этой библиотекой svg, так как у них есть некоторые методы, которые могут снизить производительность. Также GSAP может стоить посмотреть.
На этот вопрос нет общего ответа, это зависит от реализации браузера и вашего оборудования, но... для долгосрочного решения я бы поставил на WebGL, потому что он использует графический процессор и в конечном итоге будет доминировать.
В настоящее время WebGL не очень хорошо поддерживается (2016 г.) и потенциально может иметь проблемы с безопасностью. Также смотрите: https://css-tricks.com/rendering-svg-paths-in-webgl/
Canvas лучше работает с необработанными 2d пиксельными буферами (+ альфа-канал) и медленнее для более высокого разрешения + анимации. Вы можете использовать несколько двойных библиотек, таких как Pixi.