ROTATION SMOOTHING OF A USER INTERFACE

• US 20100302278A1
• Filed: 05/28/2009
• Published: 12/02/2010
• Est. Priority Date: 05/28/2009
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Ording, Bas, Shaffer, Joshua
• Granted Patent: US 9,298,336 B2
• Time in Patent Office: Days
• US Class Current: 345/659
• CPC Class Codes: G06F 3/0346 with detection of the device orientation or free movement in a 3D space, e.g. 3D mice, 6-DOF [six degrees of freedom] pointers using gyroscopes, accelerometers or tilt-sensors
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G09G 2320/08 Arrangements within a display terminal for setting, manually or automatically, display parameters of the display terminal
• CPC Class Codes: G09G 2340/0492 Change of orientation of the displayed image, e.g. upside-down, mirrored
• CPC Class Codes: G09G 5/38 with means for controlling the display position

Abstract

This is directed to animating transitions in a user interface as the orientation of the user interface changes. An electronic device can display a user interface in any suitable orientation, including for example in portrait and landscape modes (e.g., based on the orientation of the display). To provide a resource efficient and aesthetically pleasing transition, the electronic device can pre-render the interface in the final orientation, and define an animation by cross-fading the interface between the initial and final interfaces. In some embodiments, the electronic device can identify distinct regions of the interface, and define separate animations for each region. The separate animations can be overlaid and displayed simultaneously to provide a uniform animated transition between the initial and final interfaces.

Claims

1. A method for animating the transition of a change of orientation of an electronic device interface, comprising:

displaying an interface in a first orientation;

pre-rendering a display of the interface in a second orientation;

identifying at least two regions of the interface, wherein each of the at least two regions has a specific position in each of the first orientation and in the second orientation;

defining, for each identified region, an animation from the position of the region in the first orientation to the position of the region in the second orientation; and

simultaneously displaying the animations for each identified region, wherein the at least two regions are overlaid throughout the animations.

2. The method of claim 1, further comprising:

identifying, for each identified region, properties of the animation for the region.

3. The method of claim 2, wherein the properties comprise at least one of:

rotating;

stretching;

scaling;

re-wrapping; and

cross-fading.

4. The method of claim 1, further comprising:

identifying a band within an identified region;

removing content from the band; and

replacing at least a portion of the content in a section of the identified region that does not include the band with the removed content.

5. The method of claim 1, wherein the identified at least two regions comprise at least two of:

a content region;

a region disposed across the top of the interface;

a region disposed across a side of the interface; and

a region disposed across a bottom of the interface.

6. The method of claim 5, wherein an identified region comprises at least one of:

a status bar;

a navigation bar;

a search bar;

a content region;

a toolbar; and

a keyboard.

7. The method of claim 5, further comprising:

identifying two adjacent bars in the first orientation;

determining that the adjacent bars are combined in a single bar in the second orientation; and

defining a cross-fading animation by which the adjacent bars become the single bar.

8. The method of claim 1, wherein:

the first and second orientations comprise portrait and landscape orientations.

9. A portable electronic device comprising a display and a processor, the processor operative to:

direct the display to display an interface in a first orientation, wherein the interface comprises at least two regions in a first configuration;

receive an instruction to change the orientation of the displayed interface to a second orientation, wherein the at least two regions are in a second configuration in the second orientation;

pre-render the interface in the second orientation;

direct the display to simultaneously display independent animations for each of the at least two distinct regions, wherein the animation comprises cross-fading from the first configuration to the second configuration.

10. The portable electronic device of claim 9, further comprising motion detection circuitry, wherein the processor further comprises:

detecting an output from the motion detection circuitry; and

changing the orientation of the interface in response to detecting the output from the motion detection circuitry.

11. The portable electronic device of claim 9, wherein the processor is further operative to:

direct the display to rotate portions of the at least two distinct regions to change the at least two distinct regions from the first configuration to the second configuration.

12. The portable electronic device of claim 9, wherein the processor is further operative to:

identify a band within one of the at least two distinct regions, wherein the band disappears as the one of the at least two distinct regions changes from the first configuration to the second configuration; and

replace a portion of the content out of the band with a portion of the content of the band in the one of the at least two distinct regions.

13. The portable electronic device of claim 12, wherein the processor is further operative to:

re-wrap text in the one of the at least two distinct regions.

14. The portable electronic device of claim 9, wherein the processor is further operative to:

distinguish text from non-text elements in each of the at least two distinct regions; and

scale the distinguished non-text elements from the first configuration to the second configuration.

15. The portable electronic device of claim 14, wherein the processor is further operative to:

distinguish text in the first configuration and in the second configuration;

fade out a portion of the distinguished text of the first configuration; and

fade in a portion of the distinguished text of the second configuration.

16. The portable electronic device of claim 15, wherein the processor is further operative to:

re-wrap the distinguished text in the second configuration.

17. A method for animating a change in orientation of a displayed interface, comprising:

displaying an interface in a first configuration, the interface comprising a first region and a second region;

pre-rendering the interface in a second configuration, wherein;

the first region is scaled in the second configuration relative to the first configuration; and

content of the second region is re-organized in the second configuration relative to the first configuration; and

transitioning from the first configuration to the second configuration using independent animations associated with each of the first and second regions, wherein the animations comprise cross-fading.

18. The method of claim 17, further comprising:

identifying text in the content of the second region; and

re-wrapping the identified text as part of the animation.

19. The method of claim 17, further comprising:

re-organizing the position at which content of the second region is displayed.

20. The method of claim 17, wherein:

the first configuration is associated with a portrait mode; and

the second configuration is associated with a landscape mode.

21. The method of claim 20, further comprising:

receiving the output of a motion detection component; and

selecting one of the first and second configurations based on the received output.

22. The method of claim 17, further comprising:

identifying a first band and a second band within the second region, wherein the first band disappears in the second configuration;

determining that text elements are displayed in the first band and in the second band in the first configuration; and

displaying a portion of the text elements of the first band in the second band in the second configuration, wherein the size of individual text elements does not change between the first configuration and the second configuration.

23. The method of claim 17, wherein animating further comprises:

simultaneously rotating and cross-fading the first and second regions.

24. Computer readable media for animating a change in orientation of a displayed interface, comprising computer readable code recorded thereon for:

displaying an interface comprising a plurality of regions in a first orientation, wherein elements of each of the plurality of regions are disposed in a first configuration;

receiving an instruction to change the orientation of the interface to a second orientation;

rendering the interface in the second orientation, wherein the elements of each of the plurality of regions are disposed in a second configuration; and

displaying an animation by which the elements of each of the plurality of regions change from the first configuration to the second configuration, wherein each of the plurality of regions is associated with a distinct animation.

25. The computer-readable media of claim 24, comprising further computer readable code recorded thereon for:

identifying a first band and a second band within one of the plurality of regions, wherein the first band disappears in the second configuration;

determining that text elements are displayed in the first band and in the second band in the first configuration; and

displaying a portion of the text elements of the first band in the second band in the second configuration, wherein the size of individual text elements does not change between the first configuration and the second configuration.