Image Transition in VB.NET Windows Forms

 Download Animation.zip - 398.22 KB  

Introduction   

This Article demonstrates how to implement a simple Transition on Image in VB.NET

Transitions are one of the most useful features used in slide show, business presentation, videos, screen savers and with Transitions, coders can build a simple and easy visual effects on their Web pages/windows forms/Videos with simple and very minimal code. 

Background  

You may find a lot of Articles demonstrates how to implement image transitions using Silverlight  or Dynamic HTML but its rare to find Articles that talks about image transition either in C# or VB.net Windows Forms ...... yea apparently image transition is very good business.  

in the article I'll try to explain some of the most famous Image Transition and how they did it?  

Transitions & Visual Effects

The below list shows the most famous Image's visual effects/Transitions. you may follow the same transition's names or you may re-name transitions to your convenience

1. Barn: motion that resembles doors opening or closing effect
2. Blinds: motion that appears to open or close blinds
3. CheckBoard: squares placed like a checker or chess board
4. Iris: motion similar to opening of camera aperture
5. Fade: fading out the one or two images
6. Slide: sliding sections or all the image into place
7. Spiral: Spiral motion 

Transitions Timing

The System.Threading.Timer Class implements a simple light-weight timer that uses callback functions, and yes it has a fewer features but also It has some nice benefits such as the way to specify the callback, the way to specify the time to wait before the first time the callback is run, and the way to specify the period between calls, such a ways are very important to have the upper hand over the speed of GDI+ during transitions and to calculate the transition's steps 

Also, some people may prefer to use the System.Timers.Timer Class instead of the System.Threading.Timer Class and Hook up the Elapsed event for the Timer Class to accelerate the GDI+

The following simple code illustrates how to use System.Timers to draw something on the form.

• Declare timer

    Private m_timer As New System.Timers.Timer()	 

• Hook up the Elapsed event for the timer , enable the timer (StartTimer routine)

    Private Sub StartTimer(ByVal m_Interval As Integer)
        AddHandler m_timer.Elapsed, AddressOf TimerTick
        m_timer.Interval = m_Interval
        m_timer.Enabled = True
    End Sub 	

• Specify what you want to happen when the Elapsed event is raised.

    Private Sub TimerTick(ByVal source As Object, _
                          ByVal e As System.Timers.ElapsedEventArgs)
        Invalidate()
    End Sub 

•  Draw something in Paint Event

     Private Sub Form2_Paint(ByVal sender As System.Object, _
                            ByVal e As PaintEventArgs) Handles MyBase.Paint

        Dim path As New Drawing2D.GraphicsPath()
        Dim stringText As String = Date.Now
        Dim family As New FontFamily("Verdana")
        Dim myfontStyle As Integer = CInt(FontStyle.Bold)
        Dim emSize As Integer = 20
        Dim origin As New Point(0, 0)
        Dim format As StringFormat = StringFormat.GenericDefault
        path.AddString(stringText, family, myfontStyle, emSize, origin, format)

        Using lgb As New Drawing2D.LinearGradientBrush(path.GetBounds(), _
                                                       Color.Cyan, Color.Blue, 90, 0)
            e.Graphics.FillPath(lgb, path)
        End Using
    End Sub

•   Pass StartTime routine to the Form Load Event and run

    Private Sub Form2_Load(ByVal sender As System.Object, _
                           ByVal e As System.EventArgs) Handles MyBase.Load
        StartTimer(1000)
    End Sub

The following code illustrates how to use System.Threading.Timer to draw something on the form following the same steps above

Public Class Form1

    Private ThreadTimer As System.Threading.Timer

    Private Sub StartTimer(ByVal Interval As Integer)
        Dim CallBackTimer As New Threading.TimerCallback(AddressOf TimerTick)
        ThreadTimer = New System.Threading.Timer(CallBackTimer, Nothing, 0, Interval)
    End Sub

    ' ........ rest of the code as explained before

End Class

Barn Visual Effect

•  Declare variables such as timer, transition steps and starting time

Public Class frmTransition

    Private m_timer As New System.Timers.Timer()
    Private m_Steps As Single
    Private m_startTime As DateTime

    ' .......... rest of code

End Class

•  Hook up the Elapsed event for the timer , initialize variables and enable the timer (StartTimer routine) 

      Private Sub StartTimer(ByVal m_Interval As Integer)
        AddHandler m_timer.Elapsed, AddressOf TimerTick
        m_timer.Interval = m_Interval
        m_timer.Enabled = True
        m_Steps = 0
        m_startTime = DateTime.Now
        Invalidate()

    End Sub
    ' .......... rest of code

• Specify what you want to happen when the Elapsed event is raised. ' define & calculate ellapsed time, ' define animation time (the lowest the value the highest the speed) , ' calcualte transition steps and  invalidate the paint

     Private Sub TimerTick(ByVal source As Object, _
                          ByVal e As System.Timers.ElapsedEventArgs)

        ' define & calculate ellapsed time
        Dim timeEllapsed As TimeSpan = DateTime.Now - m_startTime
        ' define animation time
        'the lowest the value the highest the speed
        Dim AnimationTime As Integer = 2
        ' calcualte transition steps
        m_Steps = CSng((100.0F / AnimationTime * timeEllapsed.TotalSeconds))
        ' check transition steps value & fix it
        If m_Steps > 100 Then
            m_Steps = 100
        End If
        ' invalidate the paint
        Invalidate()

    End Sub
    ' .......... rest of code

To draw the transition effect follow the following steps 

1. Define transition bitmap  
2. Define transition rectangle 
3. Draw the top part barns effect by define the top part of destination rectangle, define the image top part source rectangle and then  draw the top part of the image
4. Repeat the step 3 to draw the bottom part of the barns effect by define the destination rectangle bottom part,  define the image's bottom part source rectangle  and then  draw the bottom part of the image  

 Private Sub frmTransition_Paint(ByVal sender As Object, _
                                    ByVal e As PaintEventArgs) Handles MyBase.Paint

        ' define transition bitmap
        Dim bmp As New Bitmap(My.Resources.baby_5)

        ' define transition rectangle
        Dim m_rect As New Rectangle(0, 0, 100, 100)

        ' draw the top part barns effect 
        ' draw the top part of the image based on transition steps

        ' define the top part of destination rectangle
        Dim destTopRect As New Rectangle(0, 0, m_rect.Width, CInt(m_rect.Height * m_Steps / 200))

        ' define the image top part source rectangle
        Dim srcTopRect As New Rectangle(0, 0, bmp.Width, CInt(bmp.Height / 2))

        ' draw the top part of the image
        e.Graphics.DrawImage(bmp, destTopRect, srcTopRect, GraphicsUnit.Pixel)


        ' let us repeat the steps above to draw the bottom part of the barns effect

        ' define the destination rectangle bottom part
        Dim destBottomRect As New Rectangle(0, _
                                            CInt(m_rect.Height - CInt(m_rect.Height * m_Steps / 200)), _
                                            m_rect.Width, _
                                            CInt((m_rect.Height * m_Steps / 200)))
        ' define the image's bottom part source rectangle
        Dim srcBottomRect As New Rectangle(0, CInt(bmp.Height / 2), _
                                           bmp.Width, CInt(bmp.Height / 2))

        ' draw the bottom part of the image
        e.Graphics.DrawImage(bmp, destBottomRect, srcBottomRect, GraphicsUnit.Pixel)

    End Sub

• Pass StartTime routine to the Form Load Event and run
• Set time interval to 60 milliiseconds,
• To get better performance I beleive the interval value shall not exceeds 100 milliseconds the minimum the value the better the performance

    Private Sub frmTransition_Load(ByVal sender As Object, _
                                   ByVal e As EventArgs) Handles MyBase.Load
        StartTimer(60)
    End Sub

The following code example illustrates how to apply  Horizontal Barn's Transition

    Private Sub frmTransition_Paint(ByVal sender As Object, _
                                    ByVal e As PaintEventArgs) Handles MyBase.Paint

        Dim bmp As New Bitmap(My.Resources.baby_5)
        Dim m_rect As New Rectangle(0, 0, 100, 100)

        ' draw the left part barns effect 
        Dim destTopRect As New Rectangle(0, 0, CInt(m_rect.Width * m_Steps / 200), m_rect.Height)
        Dim srcTopRect As New Rectangle(0, 0, CInt(bmp.Width / 2), bmp.Height)
        e.Graphics.DrawImage(bmp, destTopRect, srcTopRect, GraphicsUnit.Pixel)

        ' draw the right part barns effect
        Dim destBottomRect As New Rectangle(CInt(m_rect.Width - CInt(m_rect.Width * m_Steps / 200)), _
                                            0, _
                                            CInt((m_rect.Width * m_Steps / 200)), _
                                            m_rect.Height)
        Dim srcBottomRect As New Rectangle(CInt(bmp.Width / 2), 0, _
                                           CInt(bmp.Width / 2), bmp.Height)

        e.Graphics.DrawImage(bmp, destBottomRect, srcBottomRect, GraphicsUnit.Pixel)

    End Sub 

What will happen if we mix between the above two Barn's visual effects (Horizontal and Vertical effects).......!!!??? . We will get a new different effect ....... you may give it a name like Barn's Boom  

The following code example illustrates how to apply Barn's Boom Transition

      Private Sub frmTransition_Paint(ByVal sender As Object, _
                                    ByVal e As PaintEventArgs) Handles MyBase.Paint

        Dim bmp As New Bitmap(My.Resources.baby_5)
        Dim m_rect As New Rectangle(0, 0, 100, 100)

        ' ------------------------------------------------------->
        ' draw the left part of the barn
        Dim destLeftRect As New Rectangle(0, 0, CInt(m_rect.Width * m_Steps / 200), m_rect.Height)
        Dim srcLeftRect As New Rectangle(0, 0, CInt(bmp.Width / 2), bmp.Height)
        e.Graphics.DrawImage(bmp, destLeftRect, srcLeftRect, GraphicsUnit.Pixel)

        ' ------------------------------------------------------->
        ' draw the right part of the barn
        Dim destRightRect As New Rectangle(CInt(m_rect.Width - CInt(m_rect.Width * m_Steps / 200)), _
                                            0, _
                                            CInt((m_rect.Width * m_Steps / 200)), _
                                            m_rect.Height)
        Dim srcRightRect As New Rectangle(CInt(bmp.Width / 2), 0, _
                                           CInt(bmp.Width / 2), bmp.Height)
        e.Graphics.DrawImage(bmp, destRightRect, srcRightRect, GraphicsUnit.Pixel)

        ' ------------------------------------------------------->
        ' draw the top part of the barn
        Dim destTopRect As New Rectangle(0, 0, m_rect.Width, CInt(m_rect.Height * m_Steps / 200))
        Dim srcTopRect As New Rectangle(0, 0, bmp.Width, CInt(bmp.Height / 2))
        e.Graphics.DrawImage(bmp, destTopRect, srcTopRect, GraphicsUnit.Pixel)

        ' ------------------------------------------------------->
        ' draw the bottom part of the barn
        Dim destBottomRect As New Rectangle(0, _
                                            CInt(m_rect.Height - CInt(m_rect.Height * m_Steps / 200)), _
                                            m_rect.Width, _
                                            CInt((m_rect.Height * m_Steps / 200)))
        Dim srcBottomRect As New Rectangle(0, CInt(bmp.Height / 2), _
                                           bmp.Width, CInt(bmp.Height / 2))

        e.Graphics.DrawImage(bmp, destBottomRect, srcBottomRect, GraphicsUnit.Pixel)

    End Sub

Rotate, Maximize, & Spin Visual Effect

The Drawin2D.Matrix Class plays an important rule in transition effects such as rotate, maximize, spin an image and the following steps highlights the main points used with Maximize visual effect

1. Define transition bitmap   
2. Define transition rectangle 
3. Define and calculate transition scale factor used in the matrix 
4. Define the matrix class & pass the scale factor to it, effect will start from the rectangle mid-point   
5. Pass the matrix to graphics and draw the effect

The following code example illustrates how to apply  Maximize's Transition   

     Private Sub frmTransition_Paint(ByVal sender As Object, _
                                    ByVal e As PaintEventArgs) Handles MyBase.Paint

        ' draw maximize effect
        Dim bmp As New Bitmap(My.Resources.baby_5)
        Dim m_rect As New Rectangle(0, 0, 150, 150)

        ' define and calculate transition scale factor used in the matrix
        Dim sf As Single = m_Steps / 100
        If sf = 0 Then
            sf = 0.01F
        End If
        ' define the matrix class & pass the scale factor to it
        ' effect will strat from the rectangle mid-point
        Dim mx As New Drawing2D.Matrix(sf, 0, 0, sf, m_rect.Width / 2, m_rect.Height / 2)
        ' pass the matrix to graphics
        e.Graphics.Transform = mx
        Dim destRect As New Rectangle(-m_rect.Width / 2, -m_rect.Height / 2, _
                                      m_rect.Width, m_rect.Height)
        Dim srcRect As New Rectangle(0, 0, bmp.Width, bmp.Height)
        e.Graphics.DrawImage(bmp, destRect, srcRect, GraphicsUnit.Pixel)

    End Sub

The following code example illustrates how to apply  Rotate's Transition  

The following steps highlights the main points used with Rotate & Spin visual effect

1. Define transition bitmap    
2. Define transition rectangle 
3. Define and calculate transition scale factor used in the matrix 
4. Define the matrix class & pass the scale factor to it, effect will strat from the rectangle mid-point
5. Define rotation factor
6. Pass the rotation factor to the matrix to rotate the matrix and set the Drawing2D.MatrixOrder value to Append (For Spin effect just set the Drawing2D.MatrixOrder value to  Prepend) 
7. Pass the matrix to graphics and draw the effect

    Private Sub frmTransition_Paint(ByVal sender As Object, _
                                    ByVal e As PaintEventArgs) Handles MyBase.Paint

        ' draw maximize effect
        Dim bmp As New Bitmap(My.Resources.baby_5)
        Dim m_rect As New Rectangle(0, 0, 150, 150)

        ' define and calculate transition scale factor used in the matrix
        Dim sf As Single = m_Steps / 100
        If sf = 0 Then
            sf = 0.01F
        End If
        ' define the matrix class & pass the scale factor to it
        ' effect will strat from the rectangle mid-point
        Dim mx As New Drawing2D.Matrix(sf, 0, 0, sf, m_rect.Width / 2, m_rect.Height / 2)
        ' pass the matrix to graphics
        ' define rotation factor
        Dim rf As Single = m_Steps * 360 / 100

        ' pass the rotation factor to the matrix 
        ' to rotate the matrix and set the matrixorder
        ' for spin set MatrixOrder value to Prepend
        mx.Rotate(rf, Drawing2D.MatrixOrder.Append)

        e.Graphics.Transform = mx

        Dim destRect As New Rectangle(-m_rect.Width / 2, -m_rect.Height / 2, _
                                      m_rect.Width, m_rect.Height)
        Dim srcRect As New Rectangle(0, 0, bmp.Width, bmp.Height)
        e.Graphics.DrawImage(bmp, destRect, srcRect, GraphicsUnit.Pixel)

    End Sub

For further details about other effects (there is about 28 effects there waiting you to play with it), you may download the file attached to the Article

The Animation Control     

• Animation Control Files 

1. AnimationTypes.vb : Public Enum of about 28 visual effect/transition
2. AnimationControl.vb : extending for the Control Class 

• Control Property   

1. AnimationSpeed Property: used to set animation speed. the greater value the slowest speed
2. AnimationType Property: used to set Animationtypes Enum
3. AnimatedImage Property: used to set the image required for the visual effect 
4. AnimatedFadeImage Property: used to set the fad image which will be used with the Animated Image
5. Opacity, Transparent, TransparenColor Properties: are used to set the Transparency of the Control... for further details you may refer to my earlier Article about VB.Net Translucent Control Using GDI+ which available in this link

Using the Control  

Build the ِِِِAnimationControl and use it in your forms. The following simple code illustrates how to use The AnimationControl with Windows Forms.  

Public Class TestForm

    Private bmp As New Bitmap(My.Resources.baby_5)

    Private Sub TestForm_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        AnimationControl1.AnimatedFadeImage = Panel1.BackgroundImage
        AnimationControl1.AnimatedImage = bmp
    End Sub

    Private Sub btnSpiarlBoom_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSpiarlBoom.Click

        AnimationControl1.AnimationType = AnimationTypes.SpiralBoom
        AnimationControl1.Animate(40)

    End Sub

    ' rest of code 

End Class 

Download the attache file, play with it and you may add your own visual effects ....... its simple and funny. Enjoy it

History  

• 7^th November, 2009: First release