Click here to Skip to main content
11,922,788 members (49,416 online)
Click here to Skip to main content
Add your own
alternative version


2 bookmarked

Create Animation using Separated Images

, 2 Mar 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create Animation using separated Images


This little piece of code implements animation using separated png files. It does start timer and renders image by frame you select. This is a good solution, because gif is not supported in Windows store application.

Using the Code

Just create a module and call function, but before using code, you must create png files in format 1.png, 2.png, 3.png, etc.
Imports Windows.UI.Xaml.Media.Animation
Imports Windows.UI
Imports Windows.UI.Xaml.Shapes
Module AnimationConstructor
     Private _i As Integer = 0
     Private _startFrame As Integer
     Private _endFrame As Integer
     Private _folderLocation As String
     Private _X As Integer
     Private _Y As Integer
     Private _Form As Object
     Private _sprite_explode As New Canvas
     Private _explode As New Image
     Private _myDispatcherTimer As New DispatcherTimer
     Private _loopAnimation As Boolean
       Public Function CreateAnimatedImage(Form As Object, ByVal X As Integer, _
       ByVal Y As Integer, Optional folderLocation As String = "/sprite/explode/", _
       Optional startFrame As Integer = 1, Optional endFrame As Integer = 24, _
       Optional frameRate As Integer = 50, Optional loopAnimation As Boolean = False)
         _i = startFrame
         _endFrame = endFrame
         _folderLocation = folderLocation
         _X = X
         _Y = Y
         _Form = Form
         _loopAnimation = loopAnimation
             _sprite_explode.Margin = New Thickness(_X, _Y, 0, 0)
             'Add to main form our animation
             _myDispatcherTimer.Interval = New TimeSpan(0, 0, 0, 0, frameRate)
             AddHandler _myDispatcherTimer.Tick, AddressOf AnimationConstructor.Each_Tick
         Catch ex As Exception
         End Try
         _explode.Visibility = Visibility.Visible
     End Function
     Public Sub Each_Tick(ByVal sender As Object, ByVal e As EventArgs)
         'Render next frame
         _i += 1
         _explode.Source = BackgroundSource(_folderLocation + _i.ToString + ".png")
         If _loopAnimation = True Then
             If _i = _endFrame Then
                 Debug.WriteLine("Animation completed, reloading to start point")
                 _i = _startFrame
                 _explode.Visibility = Visibility.Visible
             End If
             If _i = _endFrame Then
                 Debug.WriteLine("Animation complete")
                 _explode.Visibility = Visibility.Collapsed
                 _i = _startFrame
             End If
         End If
     End Sub
     Public Function BackgroundSource(sourceLocation As String)
         Dim sourceImage As New BitmapImage
           sourceImage = New BitmapImage(New Uri("ms-appx:///Assets" + sourceLocation))
         Return sourceImage
     End Function
 End Module

Points of Interest

This is my first article post, this code is not perfect, but this is good point to start for beginners.

For usage, simply call:

CreateAnimatedImage(Me.Grid, 100, 150, "/sprite/explode/", 1, 24, 50)
  • me.grid - our parent
  • 100, 150 x.y positions.
  • "/sprite/explode/" folder location
  • in /explode/ you should paste image files
  • 1 is starting image(1.png for example)
  • 24 is last image
  • 50 refresh rate(speed, lower value - faster)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

CEO Contact-Deploy
Russian Federation Russian Federation
Indie developer, looking for companion for code develope

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151125.1 | Last Updated 2 Mar 2014
Article Copyright 2014 by Ruzli999
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid