Good old fashion image animations in WPF

As I tried in vain to fall asleep at a reasonable hour tonight, it dawned on me that something is missing from the standard WPF literature. Most of the animation examples show off the awesome built-in support for animations, which means changing a property’s value over time. What I felt was missing is an example of how to create an animation by showing a sequence of images in rapid succession.  Ya know, like Mickey Mouse.  So I got out of bed and made one!

I opened SnagIt, created 37 separate images, saved each one with a name like “001.png”, and then dropped them all into a new project in Visual Studio. All of the image files are copied to the project’s output directory, instead of saving them as resources in the assembly. After assigning the Window’s Content an Image element in XAML, I wrote the following code:

I just love using LINQ!  It makes data processing so much easier.  If you haven’t already done so, I highly recommend you read Joseph Rattz’s “Pro LINQ – Language Integrated Query in C# 2008“.

When I run the app, it looks like this:

If you want the source code, you can download it here. Be sure to change the file extension from .DOC to .ZIP and then decompress the file.

17 Responses to Good old fashion image animations in WPF

  1. Nick says:

    That was a pretty neat demonstration. Thanks for sharing that. I hadn’t even though about using WPF for standard animations like that.

  2. sacha says:

    Yep LINQ rules and so does that book, its a good book on LINQ

  3. I am a little late to the LINQ party as I *just* made my first LINQ statement a few weeks ago. It’s amazing the different ways it can be used!

    You should give Particle Illusion a run. You can make some awesome PNG sequences very quickly: http://www.wondertouch.com/

    -Jer

  4. Steve says:

    Wouldn’t it be possible to use the default animation? Something about going from 001 to 037, probably in a custom class then, and looping, and if the property change just set the other image.

  5. Josh Smith says:

    Nick,

    Thanks. I’m glad you like it.:)

    Sacha,

    I haven’t seen a better introduction to LINQ yet. That book really “opened my eyes” to what LINQ can be used for.

    Jeremiah,

    Neat! I’ll definitely check that out.

    Steve,

    Yes, I could have gone that route. But that seems far more complicated than my approach. Simple is good.😉

  6. Steve says:

    Wasn’t meant as a WTF did you do it that way?😛 More as a question, (suggestions ^^) if you could do it that way🙂 Not sure if it would be that much more code, wouldn’t need timer🙂

  7. Josh Smith says:

    Steve,

    I guess so. The reason I wanted to create this post was to show an alternative way to produce animations in WPF. Since the standard animation system is concerned with changing a property value, that makes it very difficult (if not impossible) to take WPF shapes/elements and make them do things like what my little app does. I wanted to show how people can do that.

    At the end of the day, since we are dealing with software, some value somewhere has to change over time to create the effect. In this case, it is the Image’s Source property. So, yeah, I guess one could create an Animation subclass that does this. But that wasn’t the point of this post.

    With that said, if you (or someone else) creates a reusable Animation class that can make an Image show a sequence of pictures, that would be awesome!!😀

    josh

  8. Karl Shifflett says:

    Rock Star, continues to Rock! Nothing like thinking outside the box!

  9. Josh Smith says:

    Karl,

    Thanks dude. WPF doesn’t have a box!

    Joe,

    Thanks a lot for the link. Your LINQ book rocks.😀

    josh

  10. Ambrose says:

    You’re crazy! Awesome crazy!

  11. Josh Smith says:

    Thanks dood! Insomnia can lead to strange things… 🙂

  12. M. Dizzy says:

    As always, your WPF skills never cease to impress…

  13. […] Rattz to the Rescue In my previous post, I showed a simple way to create animations in WPF using a sequence of images. That demo app used a […]

  14. Alec says:

    While I really like the example, this passage from your answer to Steve made me think I don’t quite understand something:

    “Since the standard animation system is concerned with changing a property value, that makes it very difficult (if not impossible) to take WPF shapes/elements and make them do things like what my little app does.”

    Isn’t the same task could be accomplished by declaring dependency property, say ImageIndex, and animating images through this property?

  15. Josh Smith says:

    Yes, that would work too, Alec. What I meant is, the visuals that you can achieve with the standard way of creating animations on the screen are “limited” to what you can apply to properties. By using images, you get around those technical limitations. That’s what I meant. Naturally you *must* change something in the program to create an animation, whether it is the property of visual elements, an ImageIndex prop. an Image’s Source prop, whatever…

  16. Ok, I swear I’m not stalking you. I stumbled upon this post via google! 😉

    Anyhow, you mentioned in one of the comments above about the awesomeness of someone finding a reusable class for doing this type of animation. Well I think I get to instigate the awesome today. I came up with a XAML only solution I thought you might want to take a look at. You could wrap this in a user control and there’d be your re-use: The blog entry

%d bloggers like this: