Animated system diagram - time efficient way and software?

Question

I need to create a set of animated 2D diagrams to illustrate plumbing and how a heating system functions with water flows, heating elements, pumps, etc.

I have experience of Illustrator and Photoshop, but I imagine that animating a sequence will be very labour intensive by creating a frame at a time, especially as some systems have a lot happening.

The animations are to be used on the web and perhaps sent in emails, so I'm thinking the easiest export would be an animated GIF.

What software is out there (ideally free/ low cost at the start to get me going) that would be suitable for animating heating and water flow around a plumbing system?

If possible I'd like to:

• set key points and have the software animate between them, such as warm water creeping along a pipe, so I don't have to do 30 different stages myself
• have a file that can be edited in the future in case the diagram needs to show a change to the heating system
• if temperatures could automatically climb or decrease by set amounts between certain animation frames (e.g. 30 degrees at frame 20 climbing to 50 degrees at frame 60)
• export as a GIF
• export as responsive HTML5 animation

Any ideas?

Answer 1

My two cents.

I am really loving this program for simple animations Express Animate: http://www.nchsoftware.com/animation/index.html

You can export to animaged gif (or a series of images if you need to optimize the palete later as flat design) and can export to video and to Canvas, which is Html5+Javascript, where I gess you can modify something if you know how.

It is simmilar to after effects but in a small free program.

The other options are After effects and Adobe Animate if you want to stay in adobe's ecosystem.

But that is for the animation. To make the assets, the plumbing, the overall drawing, you can use Ilustrator, Photoshop or Inkscape and export as png.

---

If you are ok with just an animated gif, you can use another video compositing tool like hitfilm.com/express, or after effects and convert to animated gif later.

Answer 2

Although this is more or less opinion based, I'd say After Effects might be worth to look at. It plays well with other Adobe products, so importing a multi layer .psd containing your graphics to a ae project is not a problem it all.

It also meets most of your specifications, AE allows you to set values at certain keyframes and AE calculates the frames between for you. Exporting as a gif is possible with a workaround through Photoshop. (Export as .mp4 in AE, Import to PS, Save for Web as .gif).

Working on a .aep project file is not an issue as long as the resource files are still there later on. In case you loose a file, it even asks you when you open the project where that file is.