Creating a Simple Animation using Microsoft Blend for Visual Studio (UWP)
4.92/5 (7 votes)
Creating an animation using blend instead of writing the XAML yourself
Introduction
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.
- Now right click on the mainpage.xaml page and click "Design in blend".
- Your app will open in blend for Visual Studio. Select pen tool and design a plane (Don't worry about making a perfect design). Just click where you want the corners to be and make a plane like this:
- 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 keyframe will be at 0 and your missiles should be in initial position. Move the keyframe 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 a simple drag and drop. In "
assets", select "Behaviors" and then Drag "ControlStoryBoardAction" towards our button. Then, select the storyboard "Firing" so it should run on the 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 buttons 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.
For more information on other topics or to contact me, visit my personal blog: http://csdebugger.blogspot.com/.