How to display animations?

Question

OK I have a project, build a car-puter out of the OEM RX-8 sat nav hood! While I like the interface this guy has settled on, I'm gonna write my own.

So I have two questions:

What is the "preferred" (dare I say best) type of animation media? IE: Gif, SVG, MPeg, Avi, etc.

Once settled on #1, would you do it in WinForms or WPF? Has to be one of these two due to other 3rd party references the project will have.

My default is always to goto GIF and WinForms when custom splash screens are needed. I haven't done a desktop project in years so wanna see if there's a newer or better option.

The idea I have will be two animations. A "loading" 3 to 5 seconds long and a "background" which can always be seen when navigating menu screens.

Thanks!

Answer 1

It's a question too broad to be answered, however, i have been in such situations in my early days where such decision-makings were what i needed to get started with, as i didn't have enough knowledge. So here it goes...

1. Should i go with GIF/AVI/MPEG etc... ?

Firstly, you need to have a good understanding of what Animations actually are. When it comes to a video, an animation is simply something that is being simulated by itself and is a part of the video. When it comes to softwares or apps, it means some objects needs to change some of it's properties based on some mathematics.

Once you're clarified on that, you'll have a better understanding of what to do. Now, using a GIF/MPEG or aka video file into an application can only create the illusion of it having an animation, not having an actual one. Say, you want a loading spinner in your application. You can either create a GIF of a spinner spinning with After Effects and embed it with an Image control somewhere in your app.

Or

You can actually draw a spinner/part of a circle and write codes to make it go round-and-round, thus creating an actual animation.

Anyways, getting back to the actual question, the answer is IT DEPENDS!. If we're talking about animations, then we need to understand our needs first. Also, we need to understand what is a video and what is an image. A Gif is just a set of images, aka an image file itself where as MPEG/AVI etc are video files. So of course, GIF is the way to go.

2. WinForms vs WPF

Well, that's the question i asked myself ages ago when i was intrigued by animations and all. See, in both cases, you can build the desired features if you know what logics to implement. However, to keep it short, the one liner you must know is, "WPF is a better choice compared to WinForms when you're making an interactive, complex GUI app".

Say you want to animate a menu sliding in and out. In WinForms, you have to use a Timer and set the position of the menu in the Tick event thus changing the property value every millisecond. That gets the job done, but when you actually implement it, you'll see issues like flickering, chopped off portions of screen etc.

All these are addressed in WPF which focuses a lot on animations. In WPF, we call them StoryBoards. There, all these property-value-changes are handled under-the-hood and you hardly need to code anything.

But that shouldn't be the only factor to decide between WinForm and WPF. You also need to consider you skillset. For example, in WinForms, you just drag-and-drop and create your design. Of course you can create complex Custom Controls with custom looks. That requires great knowledge of C# and also some great deal of design principles. In WPF, you need the knowledge of not just writing the logics in C#, but also creating designs in XAML. You also need a great understanding of some maths for easing functions and all(tho not necessary).

If you think you can put in the effort and must have a great GUI app, go with WPF with very few GIFs (only one or two in entire app) and create most animations through StoryBoards. If you just want a GUI app, maybe with good looks but not animations, go with WinForms. However, the efforts required to code animations in pure C#, in WinForms, are more than the efforts taken by doing it in pure XAML or After Effects.

Hope this answer helps you in making the right decision. Cheers!

Edit 0.1

The reason of suggesting to use one or two GIFs, at max, is because i personally believe WPF consumes more memory while playing such files via the Image control & may also have memory leaks. So be very careful about it.

Edit 0.2

Well, as i mentioned that complex GUI applications can be made with WinForms, let me explain a way of how it can be done.

Say you want a textbox with blue borders and a drop-shadow, you can't create it purely in WinForms. But it can still be done. If you know Photoshop, you can simply draw a rectangle with drop-shadow, export it, drag-and-drop a Panel in your Window, set it's Background or BackgroundImage to the rectangle you just exported, drag-and-drop a textbox inside the panel, set it's BorderStyle to flat, write some codes to remove the border/border color when the textbox is focuses.

Finally, you have an amazing textbox with drop-shadow and all. It's just one example. You can create other complex designs in WinForms with the help of these third-party tools, but yes, IT'S NOT PURE WINFORMS!. But once again, animations and WinForms are never a great combination.