31 times of Windows mobile | Day #29: Animations. This post is Day #29 in a set called the 31 Days of Windows Phone.

Yesterday, I had written on how to monetize your applications through marketing. I’m going to show you how to add some movement and flair to your application by using animations today.

That Awesome hinged Door Open Animation

You get this really nice “door open” animation that happens before your application loads if you’ve ever opened an application in the emulator. I’m going to demonstrate you the way to incorporate that sort of animation to your pages. (It is really surprisingly easy. )

Grab yourself a project that is new the Windows Phone Application template if you’d like to follow along), and add a rectangle towards the Grid called ContentPanel. Here’s what mine seems like:

For producing the animation, we’re likely to perform some remainder with this work with Expression Blend 4. To start any project in Blend, right click about it in artistic Studio 2010, and choose the “Open in Expression Blend” option.

When you’ve gotten assembling your project available in Expression Blend, discover the “Objects and Timeline” tab. There was only a little “+” sign on this tab, also it’s for creating brand new animations, or “storyboards”.

Whenever you click that “+” symbol, you’ll get a dialog that appears like this. Provide your animation a title:

You’ll have returned to your items and Timeline tab, however now there’s a real schedule to just the right of one’s web web page objects. To start to see the schedule better, press the F6 key on your own keyboard. It’ll re-arrange the tabs in Expression, going the items and Timeline tab towards the bottom that is entire of application.

For our animation that is“DoorOpen likely to be manipulating every one of the content on our web web page. Thankfully, as a result of hierarchical nature of Silverlight, we simply need to target the element that is online payday MS layoutRoot. Click LayoutRoot within the Objects and Timeline tab, to see an egg-shaped symbol above the Zero moments line.

That symbol shows a Keyframe. Keyframes are the ones times that are pivotal your animation whenever something changes. Silverlight is sensible adequate to have the ability to figure out of the remainder for the animation for you personally. Therefore, inside our example, we’re planning to determine the ending and beginning of our animation, and Silverlight will need proper care of the remainder. Click on the Keyframe key for those who haven’t currently.

The main reason a keyframe is created by us at Zero moments is really because we wish set up a baseline. We’re fundamentally saying which our element is in the” that is“starting, so we want you to record that data. We now have an added thing we have to improvement in our “starting” position, and that is exactly exactly what the rotational center of our item should always be. By standard, the biggest market of rotation may be the center associated with item, but we wish our animation to fundamentally turn from the edge that is left of display.

Ensuring that LayoutRoot is chosen, and that there is only a little “egg” icon on Zero moments, have a look at the characteristics tab. Inside the “Transform” category, there clearly was another tab labeled Center of Rotation (it’s under the Projection area). You really need to note that the X and Y values are both set to 0.5 ( the center of the element. ) We should alter our X value to 0, or the remaining side of the element.

Upcoming, head back into Object and Timeline. Go the yellowish line that indicates time about halfway involving the 0 and 1. It, you’ll see the time change next to the Keyframe button as you move.

This time around, we’re going to modify the Projection. Rotation property. Start that right area of the Properties tab up (it had been simply to the left associated with Center of Rotation), and alter the Y value to 90. This may have our content rotate 90 levels to the left in a 3d rotation.

You should be able to see this animation happening now if you hit the “Play” button above the timeline. But we continue to have an additional action to simply simply simply take before this animation will take place within our application. We must phone it from code. If you’d want to see the XAML that individuals have actually produced by using all the above actions, right here it really is (I’ve included my entire MainPage. Xaml in order to see most of the improvements):

Calling Animations From Code. Once we’ve created our animation, we could conserve every thing, and near Expression Blend.

Return to artistic Studio 2010, and start the code-behind file: MainPage. Xaml. Cs. We’re going to introduce our animation an individual clicks on our rectangle (the main one we added in the beginning, keep in mind? )

Our first rung on the ladder will be produce a conference handler when it comes to simply click for the rectangle, and also the 2nd will be execute the Begin() technique on our storyboard. Here’s just exactly what my MainPage. Xaml. Cs file seems like now:

In order that’s it! Go ahead and make use of this animation in your applications, to make sure you might have that exact same “open door” animation that you notice throughout the os.

Download the Code

This test rule includes all of the rule shown above in a working project that is full. Please down load it and go apart, to be able to begin utilizing animations in the job.

This entry was posted in News. Bookmark the permalink.
Follow us now on Facebook and Twitter for exclusive content and rewards!

We want to hear what you have to say, but we don't want comments that are homophobic, racist, sexist, don't relate to the article, or are overly offensive. They're not nice.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>