javascript - ejemplos - w3 animation
¿WebGL o Canvas es la única forma de obtener aceleración del hardware SVG Keyframe Animations? (5)
Canvas (hasta donde yo sé) es un software acelerado. Entonces es procesado por el procesador (CPU). El procesador (causa de los píxeles) no es tan bueno en materia gráfica, pero para cosas simples sería suficiente. Y funciona en todas partes, donde hay un procesador.
Si desea tener un mejor rendimiento en dispositivos acelerados por hardware que son la mayoría de los teléfonos inteligentes modernos, necesita webgl. Pero puedes exportar tus cosas en webgl desde adobe CC. Los teléfonos inteligentes más antiguos no están muy optimizados para la aceleración del hardware, así que consulte con su grupo objetivo qué dispositivos tienen e intente ejecutar su aplicación en uno de los dispositivos más lentos.
No usaría SVG. SVG es incluso peor que DOM. Puede manipular HTML más rápido en javascript que SVG. No sé por qué pero es muy lento. SVG es solo una alternativa si desea tener gráficos o gráficos escalables y para eso está hecho. Animar en SVG es un dolor. No lo hagas No está optimizado para la animación.
CSS-Transform es un prototipo y no lo ayudará con la animación de fotogramas clave. Pero tiene potencial para tenerlo en cuenta.
¿Esto te ayuda?
Lo que estoy buscando es una alternativa flash para teléfonos móviles que usan html5.
Estuve investigando SVG y parece que la única forma de obtener aceleración de hardware es usar CSS en ella. Pero las transformaciones CSS no son suficientes, quiero animar los nodos reales que componen un vector (es decir, los puntos en una ruta) para poder obtener una animación de caracteres más sofisticada. Para hacer esto, estaba mirando algunos editores basados en GUI.
Comprobé qué ha estado haciendo adobe y parece que han matado a Edge Animate y cambiaron el nombre de Flash como "Animate CC" para 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/
Pero al leer "Animate CC", veo que exporta animaciones vectoriales a Canvas o WebGL. Lo cual creo que se debe a que no obtienen aceleración de hardware con SVG nativo a través de SMIL o usan javascript. https://css-tricks.com/guide-svg-animations-smil/
Otro es http://www.animatron.com que también convierte todo en lienzo.
Entonces, mi pregunta es, para poder hacer animaciones de fotogramas clave en los nodos dentro de una ruta de vector, un vector necesita ser convertido a WebGL o Canvas para que sea hardware acelerado en el móvil.
ps Prefiero usar SVG ya que está cargado en DOM y puedo manipular cosas con jquery. Esto es para un juego móvil que usa vectores (svg) como base, pero también me gustaría incorporar animaciones, más allá de las transformaciones css básicas. Ojalá hubiera una manera de tener un archivo .svg que no solo contenga la información del vector sino también la información de la animación. para poder cargar este archivo .svg y luego en javascript ve: character1.play (''animation1'') o algo así. Si SMIL trabajó rápido, estoy seguro de que editores como adobe lo harían así de simple.
EDITAR : Acabo de leer que Chrome 45 mató SMIL a favor de "web animations" y css. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL Y como Kaiido mencionó en los comentarios, IE nunca admitió smil así que tal vez es por eso que adobe nunca se exportó a él (?). http://caniuse.com/#feat=svg-smil también, nunca vi ningún ejemplo en línea que muestre animación de ruta acelerada por hardware con smil, si alguno de ustedes encuentra un enlace, por favor hágamelo saber.
EDIT # 2 : estoy pensando en renunciar a mis ilusiones y en su lugar mirar exportadores de vectores a lienzo como animatron.com. Sin embargo, no parece que el lienzo sea incluso acelerado por hardware o rápido como las transformaciones de css3. Cargué algunas animaciones de animatron en mi viejo iPhone 4s / iOS 8 y está nervioso y lento, por ejemplo: https://www.animatron.com/project/1953f3526e5b2ec4eef429c8 mientras que las animaciones de transformación css3 siempre funcionan muy bien ...
Todavía no he probado vector para webgl ... pero creo que es por eso que Adobe finalmente eligió usarlo para sus animaciones vectoriales ya que el lienzo es lento y svg es limitado.
EDIT # 3 : seguro que parece que webgl es el camino a seguir (a menos que alguien encuentre la manera de hacerlo con nativo svg) http://www.yeahbutisitflash.com/?p=7231 ... esto funciona rápido en mi iphone 4s / ios8 .. En este momento creo que esta es la única forma de hacer lo que quiero: animación acelerada por hardware basada en vectores (sin embargo, los gráficos no se ven tan nítidos como los quisiera ... me molesta un poco con eso, creo) . pero esta es la razón por la que creo que Edge Animate fue asesinado porque estaban tratando de crear una herramienta que aprovechara las transformaciones css3, pero las personas quieren animar los nodos vectoriales por lo que volvieron a Flash y lo cambiaron de nombre. (Otra nota: el animador webgl anterior no funciona tan bien en mi Galaxy S4 / kitkat teléfono Android ... así que esto es principalmente para dispositivos / sistemas operativos más nuevos)
EDIT # 4 : piénselo. Sería un dolor tener múltiples contextos webgl corriendo en mi programa. así que si tuviera 10 personajes animados tendría que tener 10 contextos webgl que serían intensos para un dispositivo móvil ... a menos que decidiera hacer todo el juego en flash, y luego tendría un gran contexto webgl después de exportar eso. pero prefiero trabajar en el dom. oh bien css3 se transforma mientras tanto ..: /
EDIT # 5 - Dec 2016 : ahora estoy usando svg / javascript con snap.svg. los teléfonos modernos parecen lo suficientemente rápidos.
Otros enlaces útiles que encontré:
Creo que es una pregunta difícil de responder ya que hay muchos problemas con diferentes navegadores. Algunos no admiten que SMIL se transforma bien (o está en desuso, pero como se mencionó, hay muchos problemas), algunos no son compatibles con las transformaciones de CSS3 en elementos SVG, por lo que la mayoría de las "soluciones" que existen tienen algún problema. puede ser necesario comprometerse. Creo que uno de los navegadores no es compatible con d attribute morph correctamente, pero no recuerdo cuál (así que prueba esto desde el principio con los navegadores necesarios si sigues esta ruta).
En general, Canvas parece funcionar mejor en dispositivos móviles para la mayoría de las animaciones que he visto o jugado, sin duda a medida que aumenta el número de objetos en la página.
Otras alternativas a webGL que se mencionaron ..
Una opción que me viene a la mente es fabric.js, que es un enfoque de canvas para SVG. Tomará los mismos comandos, elementos como SVG, pero los mostrará en un lienzo de HTML5. Desactivar arrastre / freetransform dentro de él (ya que creo que se ralentiza un poco con esto si necesita controles adicionales), y creo que será un poco más rápido, pero es un tiempo desde que he jugado. Este podría ser un enfoque interesante si no necesita acceso específico a elementos DOM, pero estaría bien si está bien con una configuración similar basada en objetos.
Si insiste en usar SVG, entonces consideraría integrarlo con otra biblioteca (o incluso 2). Snap o SVG.js son decentes, pero pueden ser un poco lentos. Sin embargo, experimentaría con el uso de Velocity.js o React.js con esa biblioteca svg, ya que tienen algunos métodos que pueden exprimir un poco más de rendimiento. También vale la pena echarle un vistazo a GSAP.
Esta biblioteca / complemento puede ser exactamente lo que está buscando: Greensock SVG Morph Plugin . Parece funcionar bastante bien en dispositivos móviles, no está seguro de qué tan bien funciona en los dispositivos mencionados por usted.
Tampoco es acelerado por GPU, pero Greensock Animation Platform parece funcionar extremadamente bien incluso en dispositivos móviles.
No hay una respuesta general a esto, depende de la implementación del navegador y su hardware, pero ... para la solución a largo plazo apostaría a WebGL porque usa la GPU y finalmente dominará.
WebGL no está bien supported este momento (2016), y potencialmente viene con problemas de seguridad . También vea: https://css-tricks.com/rendering-svg-paths-in-webgl/
Canvas es mejor para trabajar en búferes de 2d píxeles en bruto (+ canal alfa) y es lento para mayor resolución + animación. Sin embargo, podrías usar algunas lib duales como Pixi .
Si no te importa que el peso k aumente un poco y te sientas cómodo usando el flash, la solución más fácil y rápida sería usar Animate CC (es exactamente Flash, sin los filtros de símbolos y da salida canvas en lugar de swf).