Share via

Microsoft Blend for Visual Studio (UWP): Creating a simple animation

  • Article

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!

We 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

https://3.bp.blogspot.com/-zeAAvEAfgm0/Vk7bOgi7QYI/AAAAAAAAAMQ/-dZ9613fAxE/s640/1.JPG

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

https://1.bp.blogspot.com/-FRUnkWaPp0M/Vk7cvq3iG4I/AAAAAAAAAMc/u6CBumTHEnA/s400/2015-11-20.png

  • 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 this.

https://2.bp.blogspot.com/-rzoj__jYjqc/Vk7edd2SwYI/AAAAAAAAAMo/FdJ0eSCBcdY/s640/2.JPG

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

https://4.bp.blogspot.com/-YL9f0asGz4s/Vk7fsWgTHQI/AAAAAAAAAM0/gbbPAHdeAFw/s640/3.JPG

  • 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.

https://4.bp.blogspot.com/-vUgjuhimtQQ/Vk7gRdOKpiI/AAAAAAAAAM8/ZN8aZ-CVhv8/s1600/4.JPG

https://1.bp.blogspot.com/-5fxviMefBdM/Vk7gioGsODI/AAAAAAAAANE/k3nZPrN2-h4/s1600/5.JPG

  • 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.

https://3.bp.blogspot.com/-fW_ZnD6Wecw/Vk7ij4-P8TI/AAAAAAAAANQ/aGA7bzE6jds/s1600/Animation.gif

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

https://3.bp.blogspot.com/-liCX6_16GKo/Vk7lFCCMmnI/AAAAAAAAANc/gkdtqnYzpy4/s1600/Animation2.gif

  • In this step we will assign the storyboard trigger event to our button. Its a simple drag and drop. In "assets", select "Behaviors" and then Drag "ControlStoryBoardAction" toward our button. Then select the storyboard "Firing" so it should run on the button click.

https://1.bp.blogspot.com/-W0oeTzqP68o/Vk7mbSywVZI/AAAAAAAAANo/qIE0SBqqkDU/s1600/Animation3.gif

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

https://4.bp.blogspot.com/-LtXUQ4sIlEI/Vk7rOLLIckI/AAAAAAAAAN0/PitXnbNoDqM/s1600/Animation4.gif

 
And yeah its 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 intro, now its up to you to explore further as much as you can.

Back to top