The easiest way to do this is to create the animation in PowerPoint which is trivially easy.
Then export the transitions to a video [0].
[0]: https://support.microsoft.com/en-us/office/save-a-presentati...
Ask HN: How to quickly animate system sketches and 2D diagrams?
11–20 of 63 posts
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#12So interesting that this is still a question after many years: I remember looking into this a long time ago and there were no clear answers then.
I'd have thought (knowing nothing) that AI should be really good at tweeting between a start and end point of anything, diagrams included, but is there a good CS reason why this isn't the case?
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#13Draw.io (now diagrams.net) has some support for interactive diagrams.
https://www.diagrams.net/blog/interactive-diagram-layers
https://drawio-app.com/interactive-diagrams-with-custom-link...
Edit: remove links about the obscure undocumented features p=ex and p=anim
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#14What about SVG animation, using something like https://www.svgator.com ?
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#15"Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?"
Adobes flash suite is now called Adobe animate and still works mostly the same and you can export to the html canvas.
Scripting is a bit limited/complicated, compared to doing it with actionscript - but if you worked with flash before, this is probably the most easy solution, as it is still very powerful and straight forward.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#16Just wondering, is motion really a good idea?
It distracts, eats cpu/drains battery, can't be printed, has bad UX.
User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#17Theatre.js can definitely drive this type of animation. It’s an animation library that you can hook up to your diagramming library. And it gives you a visual interface for keyframing and tweeting, etc.
Examples here: https://twitter.com/ariaminaei/status/1439918117807853575?s=...
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#18I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#19I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
that is impressive. just casually dropping such an awesome solution, I tip my hat to you sir.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#20Just wondering, is motion really a good idea? It distracts, eats cpu/drains battery, can't be printed, has bad UX. User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast.
> User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast.
That’s only badly done animations, using bad file formats like GIF or inappropriate file formats like APNG, or poorly-considered CSS or SMIL animations on SVG or HTML. It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation.
Done well, software-driven animation can even be interactive, which can be especially good for comprehension.