Animations add beauty energy motion and personality Good animations enhance the experience by Reinforcing the way the system works Adding confidence of knowing what has happened or what will ID: 459087
Download Presentation The PPT/PDF document "Animations" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
AnimationsSlide2
Animations add beauty, energy, motion, and personalitySlide3
Good animations enhance the experience by
Reinforcing
the way the system
works
Adding
confidence
of knowing what has happened or what will
happen
Being
purposeful, not distracting
Making it clear where to focus (on the content)Slide4
Animation completes Windows Metro style design
Create a familiar personality by making apps and Windows feel part of the same family and have the same visual language
Without chrome, animation is needed to create flow and
continuity
It’s not an extra or an added piece, it’s integral to the
designSlide5
Animation LibrarySlide6
Windows 8 Animation Library
Animation Library animations are built in to common controls such as
app bar
and
ListView
These animations are used throughout Windows
8
Scenario-based, designer-created animations for
Metro style
apps to
useSlide7
Why should you use the Animation Library?
Don’t reinvent the wheel if you don’t have
to
Help
users
intuitively understand your app and know what to expect
Easily infuse your app with Metro design
styleSlide8
Using the Animation LibrarySlide9
Planning Animations
Understand what’s available in the Animation Library
.
Understand what you get for free from the system and from your controls
.
Start early! Adding animations at the last second is difficult
.Slide10
Animations you get for free
System scenarios with animations built in
Launch
your app from Start
Animations on your Start tile
Going in or out of a Snap view
Screen rotation
K
eyboard entrance and exitNotifications from your app
All controls have animations built inSlide11
Scenarios covered by the Animation Library
App
navigation
Animate
content within a
view
Selection
Show or hide supplemental
UICollections and listsSlide12
The Animations
App navigation
Enter
Page / Exit
Page
Animate content
Enter
Content / Exit Content
Expand
/ CollapseReposition
CrossfadeFade In / Fade OutPeek
Update
Badge
Reveal
/
Hide
Selection
Pointer animations
Swipe Select / Swipe Deselect
Swipe Reveal
Show or hide supplemental UI
Show Edge UI / Hide Edge UI
Show Panel / Hide Panel
Show Pop Up / Hide Pop
Up
Collections and lists
Add / Delete
from list
Drag and drop
animationsSlide13
Most common animations
App navigation
Enter
Page / Exit
Page
Animate content
Enter
Content / Exit Content
Expand
/
CollapseReposition
Crossfade
Fade In / Fade
Out
Peek
Update
Badge
Reveal
/
Hide
Selection
Pointer animations
Swipe Select / Swipe Deselect
Swipe Reveal
Show or hide supplemental UI
Show Edge UI / Hide Edge UI
Show Panel / Hide Panel
Show Pop Up / Hide Pop
Up
Collections and lists
Add / Delete
from list
Drag and drop
animationsSlide14
Animation Library ExamplesSlide15
About Enter Page and Exit Page
Use Enter Page to display the
first page of your app when your app is loaded. Use Exit Page and then Enter Page when navigating to a new page.
The Enter Page animation is staggered, so different regions of the page come in at different times. Split up your page along the natural boundaries of your content.
1
2
1
2
3
4
2
1
3Slide16
Enter Page animation
videoSlide17Slide18
Enter Page animation in Snap view
videoSlide19Slide20
About Enter Content and Exit Content
Use Exit Content and then Enter Content when part your page is changing.
If some of your content is not ready when loading a page, show a progress control and then use Enter Content when the content is ready.Slide21
About Fade In, Fade Out, and Crossfade
When other animations don’t seem to apply or you need a subtle transition between states, the three fade animations are often the right choice.
Use Fade in and Fade out for showing and hiding small controls or pieces of content.
Use Crossfade for refreshing contents within your app. Slide22
Other Animation Library animations
demo Slide23
ResourcesSlide24
Additional info and resources
Animation Library
animation
overview and links to guidance on individual animations
http
://
msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx
Animation Library sample application – available soon on MSDN
Animation Library BUILD talk http://
channel9.msdn.com/events/BUILD/BUILD2011/APP-206T Slide25
Thank you.Slide26
©
2011 Microsoft
Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT
MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.