In this tutorial I will be discussing how to animate a component in CD Menu Maker or VEDS with easing.

Note:  All screenshots and paths are for CD Menu Maker but can easily be applied to VEDS. 

Easing will create a more realistic looking animation as if the object was reacting to the forces of gravity.  Click here if you would like to look at an example of a ball bouncing with and without easing.

There are a few main concepts that you will need to understand before we start. 

1.  The animation will be time based so we will need to set the EventTimer to fire 20 times per second to get smooth motion.   

2.  A number will need to be updated to add/subtract a certain amount to move the image position every time the EventTimer is fired.  (This will create an animation without easing)

3.  An equation will be defined to have the image pick up/loose speed by multipyling or dividing the position.  (This will add easing to our animation)

Now that the theory is out of the way, we can get started.  The first thing to do is add an image component and name it Image1.

Step 1: Setting the Initial Left Position of the Image

Once your image is on the Canvas, move it to a position on the right side.  Now get the Left position of the image.  Right click on the image component in the Component Explorer, select Advanced Properties and remember the left coordinate

This number will be the starting left point for the animation.  Next click on the Canvas, click Events >  select {Global Code} > click the Code Editor button.

Now create the variable that will hold the left position value.  Paste the code below and change the left position number to left coordinate that was retrieved above.

 

dim leftPosition 

leftPosition = 500

Step 2:  Setting the EventTimer

The event timer will have to be set when the application starts to determine how may times it will fire in milliseconds (entering a value of 1000 will fire every second).  Select the frmCanvas, right-click and select On_frmCanvas_Load to open the code editor.  I want my animation to fire 20 times per second so I will enter the following:
frmCanvas.EventTimer.Interval = 50

Step 3:  Moving the Image Position

Now that the EventTimer is set, I will need to decrement the leftPosition variable by 1 every time it is fired (20 times per second).  Select the frmCanvas, right-click and select On_frmCanvas_EventTimer to open the code editor. 

You can simply put the following to move the image across the Canvas no easing.

 

leftPosition = leftPosition - 1 

Image1.Left = leftPosition

However, the image will continue to move without a stopping point.  To stop the image at 10, you will need to say…

If leftPosition > 10 Then 

leftPosition = leftPosition - 1 

Image1.Left = leftPosition 

End If

Once the image position is less than 10, the leftPosition variable will not decrement anymore and the animation will stop.  Preview your project to make sure the animation works properly.

Step 4:  Adding Easing

Now that the image is animating across the canvas, we will just need to make a slight modification to the code above.  Right now there is an image that moves to the left 1 pixel 20 times per second and stops when it is < 10.   Now the image needs to start off moving fast and slow down as it nears 10.  This is done by multiplying the leftPosition by a decimal value of .85.  The decimal value will determine how fast the image will move across the canvas.  (The lower the value, the faster the animation)  Delete any existing code and paste the code below:

If leftPosition > 10 Then 

leftPosition = (leftPosition - 1) * .85 

Image1.Left = leftPosition 

Image1.Refresh 

End If

Preview your project to confirm the image animates with easing.  If you would like to view the finished animation, you can download it here: easing.zip