Creating A Simple Animation Using Microsoft Blend For Visual Studio (UWP)

Have you ever wondered how the games and animations are made for apps or want to learn it to do by yourself? Then you are at the right place.

I will make a basic animation of an airplane firing missiles on a button click. This article will give you a head start.

  • Create a UWP application in Visual Studio:

    Visual Studio

  • Now right click on the mainpage.xaml page and click "Design in blend".

    Design in blend

  • Your app will open in blend for Visual Studio. Select pen tool and design a plane (Don't worry to make a perfect design). Just click where you want the corners to be and make a plane like the following screenshot.


  • Now select rectangle tool and make two lines to represent the missiles.


  • Here comes the main part to add the animation. Create a new storyboard to record the animation of the missiles. Click on the '+' button in the right panel.



  • Now we will record an animation. At start your key frame will be at 0 and your missiles should be in initial position. Move the key frame to 1 sec and drag your missiles to the end side of the grid (canvas). To check the animation click on green play icon.

  • Now we need a button so we can make this animation work by clicking it.


  • In this step we will assign the storyboard trigger event to our button. It’s simple drag and drop. In "assets", select "Behaviors" and then drag "ControlStoryBoardAction" towards our button. After that select the storyboard "Firing", so it should run on button click.


  • Now run the project and click the button to see the animation in action.


And yeah it’s working great! What you can do now is add some more animation or do some coding logic to make a game. Make some object to come randomly and use button to shoot them and record score for the player. After some score increase the objects as a level upgrade.

This is just a basic introduction, now it’s up to you to explore further as much as you can.