Animación¶
Animación SVG¶
Programas:
- glaxnimate (este tiene integración con KDEnlive): https://glaxnimate.mattbas.org/
- https://sourceforge.net/projects/whyteboard/
- https://www.pencil2d.org/
- https://www.synfig.org/
- Ítem de lista desordenadahttps://www.youtube.com/watch?v=nEyrC1v-M1s
- Ítem de lista desordenadahttps://inkscape.org/da/learn/animation/
- https://www.youtube.com/watch?v=lcBCVkYw0aA
- https://www.youtube.com/watch?v=MaiSrJNXNeQ
- https://www.youtube.com/watch?v=C-IYnm2Gv78
En el video muestran como se puede dibujar arriba de una presentcion SVG-jessyink apretando la tecla D. Acá muestran como animar lineas!
Está muy bueno el compilado de formas de animar (webs) usando SVG, CSS, y a veces Js y otras cosas que no me suenan. Hay una forma de animar usando solo SVG que se llama SMIL.
Documentación sobre animar SVGs
Sozi y JezzyInk son, aparentemente, un poco como Prezi.
Acá hay info y ejemplos, de 3 formas de animar SVGs.
- SMIL es "la recomendada": https://en.wikipedia.org/wiki/SVG_animation
Para usar JessyInk hay que tener instalado lxml en python2. Inkscape solo busca python2, instalé eso en python 3 y no me lo reconoció. https://stackoverflow.com/questions/26266437/how-to-use-python2-7-pip-instead-of-default-pip
Hay que instalar python2-pip con el package manager (pacman, apt) y después usar pip2 o pip2.7 para instalar lxml. Recién ahí pude activar JessyInk en Inkscape.
Este wachin anima texto/dibujos usando paths, todo en inkscape.
Otros de lo mismo:
- Este lo hace con algo de CSS: https://www.youtube.com/watch?v=y0Ic8QcvyK8
- Acá hay algunos tips al respecto: https://stackoverflow.com/questions/23864588/how-to-animate-calligraphy-text-as-if-its-written-by-hand
- Gran articulo con un monton de opciones, la de hacer lo grafico en inkscape y animar con programación parece bien: https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec
Un ejemplo con CSS para handwritting: https://codepen.io/munkholm/pen/EaZJQE
Queda ver como hacer para combinarlo con transiciones.
Con SnapSVG JavaScript
Acá menciona optimizar el SVG para que sea más legible:
- https://medium.com/@aniboaz/animate-svg-4fa7dd00e860
- Te dirige acá para más recursos: https://svgontheweb.com/
- Que luego tiene muchos más enlaces a tutoriales https://css-tricks.com/guide-svg-animations-smil/
Este es un tuto recomendado, que explica un poco lo de la optimización:
Buen tuto:
SVG ViewBox
- https://www.justinmccandless.com/post/making-sense-of-svg-viewboxs-madness/
- https://www.sarasoueidan.com/blog/svg-coordinate-systems/
Pensando en los keyframes, encontré esto sobre animar en CSS y Snap
Otro tuto, menciona viewbox y el timing (usando timers)
Para cargar SVGs desde archivos:
- http://svg.dabbles.info/snaptut-load
- http://svg.dabbles.info/snaptut-load-animate
- http://www.i-programmer.info/programming/javascript/6537-getting-started-with-snapsvg.html?start=1
Info piola para animar sobre Paths:
snapSVG plugins para pan/zoom/rotate ¿Podré hacer transiciones con esto? :0
- https://code.google.com/archive/p/svgpan/
- https://github.com/hueitan/snap.svg.zpd
- https://github.com/ariutta/svg-pan-zoom
Algunos casos de "slideshows" o presentaciones en internet:
- https://gist.github.com/splodingsocks/7816825
- Este está piola! https://tympanus.net/codrops/2014/10/24/wobbly-slideshow-effect/
- Este está roto: https://codepen.io/cactis/pen/gPPoJq
- Este hace unas transiciones de forma (como metamorfoseando entre productos apple) https://codepen.io/Thijs/pen/jJIis