In this tutorial we will learn to make a very simple animation. We shall make a ball and make it bounce like it should naturally. Now it is a very basic level tutorial and if you're coming form any experience this might be slow learning curve for you. For these kind of animations a user have to write a long piece of code and a complex one too. Blend makes it easy for us to make simple animations by just drag n drop tools. I'm using Blend for VC 2015.
Firstly we'll create a Blank Universal Windows App. Name it what you would like to.
The following page will be open with Designer up front for with Photoshop like toolbar on your left. Behind the toolbar you will have the options like Assets, Stats etc.
Select Object and timelines. There you'll have a tab on the left top with the label (No Story Board open).
Right beside the bar, you'll see a '+' button. Click on it and you will be asked to give your new storyboard a name. Nam it and proceed. Now you will have something like this in front of you.
Now the area circled with the blue marker is the time. 0 to 1 indicates 1 second and the little little lines between indicates the part of those seconds and can also be called frame per seconds. Now suppose you record an animation of 1 second it will mean that in 1 second the animations has to take place with 10 frames per second. So if you want to move an object slow and smooth you will give it more time hence more frames. If you want to move an object quickly, you'll give it less time hence less frames resulting into quick movement.
The area circled with the red marker is the Record Frame Key. When you are making an animation you first press the Record button then give it the time by dragging the Yellow line shown under the blue marker.
The area circled with the green marker is to test/play the animation you created. It wills how you the behavior of your animation so you can take note if it responded as you expected or not.
Now to make an animation we must be sure that the Ellipse object is selected. Now we will press the button Record Frame Key and drag the yellow line to 1 second. After doing this we will click n hold our Ellipse and drag it to the bottom of the screen. You will see a doted line coming down as you drag it down. It indicates at what that if the Ellipse is taking 1 second to come down then each dot indicates the frame where ball would be in the frame.
Now you can check the animation with the play button under Objects and Timeline tab. Now in order to make it run when you debug in local machine you need to add a line of code to your Mainpage.xaml.cs located under the Solution Explorer tab. Write the name of your storyboard as follows and add ".Begin()" to start the animation.
So you have successfully created a simplest animation in Blend for Visual Studio. For any queries feel free to comment and ask. Happy designing!
Firstly we'll create a Blank Universal Windows App. Name it what you would like to.
The following page will be open with Designer up front for with Photoshop like toolbar on your left. Behind the toolbar you will have the options like Assets, Stats etc.
Now you need to right click on the Triangle button from the toolbox on your left and select Ellipse. Now you can draw it on your screen. Give it any color you want from the Brush tab under properties on your right.
Select Object and timelines. There you'll have a tab on the left top with the label (No Story Board open).
Right beside the bar, you'll see a '+' button. Click on it and you will be asked to give your new storyboard a name. Nam it and proceed. Now you will have something like this in front of you.
Now the area circled with the blue marker is the time. 0 to 1 indicates 1 second and the little little lines between indicates the part of those seconds and can also be called frame per seconds. Now suppose you record an animation of 1 second it will mean that in 1 second the animations has to take place with 10 frames per second. So if you want to move an object slow and smooth you will give it more time hence more frames. If you want to move an object quickly, you'll give it less time hence less frames resulting into quick movement.
The area circled with the red marker is the Record Frame Key. When you are making an animation you first press the Record button then give it the time by dragging the Yellow line shown under the blue marker.
The area circled with the green marker is to test/play the animation you created. It wills how you the behavior of your animation so you can take note if it responded as you expected or not.
Now to make an animation we must be sure that the Ellipse object is selected. Now we will press the button Record Frame Key and drag the yellow line to 1 second. After doing this we will click n hold our Ellipse and drag it to the bottom of the screen. You will see a doted line coming down as you drag it down. It indicates at what that if the Ellipse is taking 1 second to come down then each dot indicates the frame where ball would be in the frame.
The area circled with red marker is your animation recorded in this 1 second of time. The blue arrow n lines indicates that at a particular frame, Ellipse will be there as it comes down. No you can play and check it by clicking the Play button circled with green marker. You can now see your Ellipse coming down as you play the button. Now to make it bounce 2,3 times we shall click on the dot under 1 second, the length of the animation. Make sure you click on the ending point of the animation under 1 second so the effect takes place when the ball fall down.
When you have clicked on it, you'll have Easing tab on your right under properties. Select EasingFuncions from there. From the EasingFunctions select Bounce Out animations. It will make our Ellipse to bounce as it touches the floor. There are other options as well which I leave for you to explore. You can also set the bounciness of the ball and how many times it should bounce as well.
So you have successfully created a simplest animation in Blend for Visual Studio. For any queries feel free to comment and ask. Happy designing!
https://www.uwptutorials.com/uwptextbox.html
ReplyDelete