Page 1 of 1

How to: Basic movement and typing animations in VB.Net Rate Topic: -----

#1 xD@t0m  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 63
  • Joined: 13-May 14

Posted 21 July 2014 - 02:53 PM

Hello and Welcome,
to my tutorial in which I will show you how to create simple animations in VB.Net.

First let's go ahead and create a Windows Forms Application:
Posted Image

I've named mine Animations.

First I will show you how to make movement. For this example I will use a PictureBox. Go ahead and place one on your form, and change it's name to MyPictureBox:
Posted Image

Change MyPictureBox's Image property, and resize it to fit the image. Resize your form so there is room for the animation:
Posted Image

We will need 2 Timers as well. Place two on your form:
Posted Image

We're done with the design, so let's go coding!
First we need to enable animationTimer on form load:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    animationTimer.Enabled = True
End Sub


We didn't set the intervals of the timers earlier because we will set them programmatically:
Dim waitTime As Integer = 500 'ms
Dim speed As Integer = 60 'ms

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    animationTimer.Enabled = True
    animationTimer.Interval = speed
    waitTimer.Interval = waitTime
End Sub

We are doing this programmatically so these values can easily be changed upon application being ran. I will explain the waitTime variable later as it is not of importance right now. The speed variable is the "speed" of the animation. The smaller it's value, the faster the animation.

Now it's time to code the Timer ticks. In this example, the PictureBox will move down:
Private Sub animationTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles animationTimer.Tick
    MyPictureBox.Location = New Point(MyPictureBox.Location.X, MyPictureBox.Location.Y + 1)
End Sub

Every time animationTimer ticks (each speed milliseconds), increment MyPictureBox's Location.Y property by 1.

Why is this so? The bigger an object's Location.Y value is, the more down it is positioned relatively to the form. Moving it up would be the opposite-- decrementing it by 1: MyPictureBox.Location = New Point(MyPictureBox.Location.X, MyPictureBox.Location.Y - 1).

Moving right would require incrementing MyPictureBox.Location.X by 1, and left decrementing it. To make diagonal moves, you can combine movements: Up-Left, Up-Right, Down-Left, Down-Right.

Now let's run the application.
Posted Image

Something is wrong - the PictureBox keeps moving down all the time! We need to fix this by disabling animationTimer when MyPictureBox.Location.Y reaches a specific value:
Private Sub animationTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles animationTimer.Tick
    MyPictureBox.Location = New Point(MyPictureBox.Location.X, MyPictureBox.Location.Y + 1)
    If MyPictureBox.Location.Y = 205 Then animationTimer.Enabled = False
End Sub


This will prevent MyPictureBox from going off-screen.
Posted Image

For a better experience, MyPictureBox should wait a split second before starting to move. This is where we use waitTimer and the waitTime variable. The value of waitTime, in milliseconds, is the time before MyPictureBox starts moving. This is very easy to implement:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    animationTimer.Interval = speed
    waitTimer.Interval = waitTime
    waitTimer.Enabled = True
End Sub

Private Sub waitTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles waitTimer.Tick
    waitTimer.Enabled = False
    animationTimer.Enabled = True
End Sub


When the app is ran, it looks like this:
Posted Image

Perfect! Here is the whole code so far:
Public Class Form1
    Dim waitTime As Integer = 500 'ms
    Dim speed As Integer = 60 'ms

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        animationTimer.Interval = speed
        waitTimer.Interval = waitTime
        waitTimer.Enabled = True
    End Sub

    Private Sub waitTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles waitTimer.Tick
        waitTimer.Enabled = False
        animationTimer.Enabled = True
    End Sub

    Private Sub animationTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles animationTimer.Tick
        MyPictureBox.Location = New Point(MyPictureBox.Location.X, MyPictureBox.Location.Y + 1)
        If MyPictureBox.Location.Y = 205 Then animationTimer.Enabled = False
    End Sub
End Class


Now I am going to explain the typing animation. The typing animation is going to run simultaneously with the movement animation. Resize your form a bit and add a label. Like this:
Posted Image

Add this code in your declarations area:
Dim printText As String = "Dream.In.Code"

printText is a string containing the text which will be printed.

Modify your Form Load to set myLabel.Text:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    animationTimer.Interval = speed
    waitTimer.Interval = waitTime
    waitTimer.Enabled = True
    myLabel.Text = ""
End Sub


Getting the next character from a string and adding it to the Text property of a Label would require a for loop. In general, when we are using Timers, we cannot use loops. So I use a little trick:
Private Sub animationTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles animationTimer.Tick
    myLabel.Text += printText.Substring(myLabel.Text.Length, 1)
    If myLabel.Text = printText Then animationTimer.Enabled = False
    MyPictureBox.Location = New Point(MyPictureBox.Location.X, MyPictureBox.Location.Y + 1)
    If MyPictureBox.Location.Y = 205 Then animationTimer.Enabled = False
End Sub

Allow me to explain. myLabel.Text.Length will return the length of it's Text property, in other words how many characters there are in the string. We are adding the character with a character index of myLabel.Text.Length from printText. This adds the next character. Finally, we check if myLabel.Text is equal to printText, and if it is, it disables the Timer to prevent OutOfBounds Exception.

This is how the application looks like when ran:
Posted Image

And here is the full code:
Public Class Form1
    Dim waitTime As Integer = 500 'ms
    Dim speed As Integer = 60 'ms
    Dim speedText As Integer = 600 'ms
    Dim printText As String = "Dream.In.Code"

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        animationTimer.Interval = speed
        waitTimer.Interval = waitTime
        Timer3.Interval = speedText
        waitTimer.Enabled = True
        myLabel.Text = ""
    End Sub

    Private Sub waitTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles waitTimer.Tick
        waitTimer.Enabled = False
        animationTimer.Enabled = True
        Timer3.Enabled = True
    End Sub

    Private Sub animationTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles animationTimer.Tick
        myLabel.Text += printText.Substring(myLabel.Text.Length, 1)
        If myLabel.Text = printText Then animationTimer.Enabled = False
        MyPictureBox.Location = New Point(MyPictureBox.Location.X, MyPictureBox.Location.Y + 1)
        If MyPictureBox.Location.Y = 205 Then animationTimer.Enabled = False
    End Sub
End Class


Thank you for spending your time reading this tutorial, I hope you liked it. If you did please hit that + button in the lower right corner of this post.

Is This A Good Question/Topic? 2
  • +

Replies To: How to: Basic movement and typing animations in VB.Net

#2 IronRazer  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 368
  • View blog
  • Posts: 1,076
  • Joined: 01-February 13

Posted 06 September 2014 - 07:32 PM

Hi,
I just wanted to add a few tips on animation.

If you set the Forms DoubleBuffered property to True it will help reduce any flickering that may happen when the control is being moved and the form needs to repaint itself. That can be done in the Forms Designer tab or in code like below.
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.DoubleBuffered = True
    End Sub



In the Timers Tick even, instead of resetting the controls location to a new point each time you could just advance or decrease the position using the Controls Top, Left, Right, or Bottom property.
    Private Sub animationTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles animationTimer.Tick
        PictureBox1.Top += 1
        If PictureBox1.Top = 205 Then animationTimer.Stop()
    End Sub



One last thing is when you are joining strings together the + sign will work. However, the preferred method is to use the & character. You can see the reason for this at the link below in the Note of the Remarks section.

+= Operator (Visual Basic)

myLabel.Text &= printText.Substring(myLabel.Text.Length, 1)


With that said, if you just have one or two controls you are moving this method will work fine but, if you are creating things like games or something which you plan on having several moving objects then you will be a lot better off using the Forms Paint event and drawing the images on the form. The animation will be a lot faster and smother.

You can see an example of what i mean by using to many controls by reading the problem at this link and testing the code examples i posted using the Paint event to draw the animation on the form.

how to list and draw graphics in vb

All in all nice job. I like that you explain the steps and make it understandable by all skill levels. :)

This post has been edited by IronRazer: 06 September 2014 - 07:54 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1