Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Patterns: Screen Transitions

From Wiki
Jump to: navigation, search
prakash.raman (Talk | contribs)
m
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.2 -->
[[Category:Mobile_Design_Patterns]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090511
 +
|author= [[User:Prakash.raman]]
 +
}}
 +
[[Category:Mobile Design]]
 +
[[Category:Mobile Design Patterns]]
  
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
 
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
Line 13: Line 35:
 
As 'Applications' folder is selected the screen transition happen by screen moving out horizontal left. And then on selection of 'Back' it slides in from Left. Direction of screen out can be different.
 
As 'Applications' folder is selected the screen transition happen by screen moving out horizontal left. And then on selection of 'Back' it slides in from Left. Direction of screen out can be different.
  
[[Image:Slide.gif]]
+
[[File:Slide.gif]]
  
  
Line 24: Line 46:
 
As 'Application' folder is selected the screen transition happen by screen zooms out. And then on selection of 'Back' it zooms in.
 
As 'Application' folder is selected the screen transition happen by screen zooms out. And then on selection of 'Back' it zooms in.
  
[[Image:Zoom.gif]]
+
[[File:Zoom.gif]]
  
  
Line 35: Line 57:
 
As 'Application' folder is selected the screen transition happen by screen fades out. And then on selection of 'Back' it fades in.
 
As 'Application' folder is selected the screen transition happen by screen fades out. And then on selection of 'Back' it fades in.
  
[[Image:Fade.gif]]
+
[[File:Fade.gif]]
  
  
Line 46: Line 68:
 
As 'Application' folder is selected the screen transition happen by second screen pushing first one out. And then on selection of 'Back' first screen pushes second one out.
 
As 'Application' folder is selected the screen transition happen by second screen pushing first one out. And then on selection of 'Back' first screen pushes second one out.
  
[[Image:Push.gif]]
+
[[File:Push.gif]]

Revision as of 05:44, 7 May 2012

Article Metadata
Article
Created: prakash.raman (11 May 2009)
Last edited: hamishwillee (07 May 2012)

This design pattern is part of the Mobile Design Patterns series.


Contents

Description

Transition means, "The act of passing from one state to the next". This section describe different type of transitions you can provide on phones. An interesting transition gives that extra touch to your device. Transitions mainly occur as effect of events, which can be key events or touch. You can choose your screen transition on basis of how you want your next data to be presented, and how the transition adds effect to your application.

Screen Slide Away Transition

As 'Applications' folder is selected the screen transition happen by screen moving out horizontal left. And then on selection of 'Back' it slides in from Left. Direction of screen out can be different.

Slide.gif




Screen Zoom in and out Transition

As 'Application' folder is selected the screen transition happen by screen zooms out. And then on selection of 'Back' it zooms in.

Zoom.gif




Screen Fade in and out Transition

As 'Application' folder is selected the screen transition happen by screen fades out. And then on selection of 'Back' it fades in.

Fade.gif




Screen Push in and out Transition

As 'Application' folder is selected the screen transition happen by second screen pushing first one out. And then on selection of 'Back' first screen pushes second one out.

Push.gif

80 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×