Rotation smoothing of a user interface

• US 9,817,487 B2
• Filed: 03/25/2016
• Issued: 11/14/2017
• Est. Priority Date: 05/28/2009
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Shaffer, Joshua, Ording, Bas
• Primary Examiner(s): ZALALEE, SULTANA MARCIA
• Application Number:
  US15/081,762
• Publication Number:
  US 20160282962A1
• Time in Patent Office: 599 Days
• 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, comprising:

at an electronic device with a display and one or more sensors configured to detect orientation and rotation of the electronic device;

while the electronic device is in a first orientation, displaying, on the display, a user interface for an application that includes a plurality of selectable elements, wherein the user interface for the application is displayed in a portrait orientation while the device is in the first orientation;

while displaying the user interface in the portrait orientation, detecting, with the one or more sensors, rotation of the electronic device to a second orientation, and,

in response to detecting rotation of the electronic device to the second orientation, rotating the user interface for the application into a second orientation, wherein the user interface for the application is displayed in a landscape orientation while the device is in the second orientation, wherein rotating the user interface for the application into the second orientation includes;

displaying first movement of a portion of the user interface of the application in the portrait orientation off of the display, the portion of the user interface including at least a portion of a first selectable element of the plurality of selectable elements, wherein the first movement is a rotation in a first direction; and

displaying second movement of a portion of the user interface of the application in the landscape orientation onto the display, the portion of the user interface including at least a portion of a second selectable element of the plurality of selectable elements, wherein the second movement is a rotation in the first direction.

2. The method of claim 1, wherein a background appears in corners of the display, behind the user interface, as the user interface of the application begins to rotate.

3. The method of claim 1, wherein a third selectable element of the plurality of selectable elements remains displayed during the user interface rotation.

4. The method of claim 1, wherein the user interface of the application is displayed in a bounding region and the bounding region is rotated from the first orientation to the second orientation.

5. An electronic device, comprising:

a display;

one or more sensors configured to detect orientation and rotation of the device;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

while the electronic device is in a first orientation, displaying, on the display, a user interface for an application that includes a plurality of selectable elements, wherein the user interface for the application is displayed in a portrait orientation while the device is in the first orientation;

while displaying the user interface in the portrait orientation, detecting, with the one or more sensors, rotation of the electronic device to a second orientation, and,

in response to detecting rotation of the electronic device to the second orientation, rotating the user interface for the application into a second orientation, wherein the user interface for the application is displayed in a landscape orientation while the device is in the second orientation, wherein rotating the user interface for the application into the second orientation includes;

displaying first movement of a portion of the user interface of the application in the portrait orientation off of the display, the portion of the user interface including at least a portion of a first selectable element of the plurality of selectable elements, wherein the first movement is a rotation in a first direction; and

displaying second movement of a portion of the user interface of the application in the landscape orientation onto the display, the portion of the user interface including at least a portion of a second selectable element of the plurality of selectable elements, wherein the second movement is a rotation in the first direction.

6. The device of claim 5, wherein a background appears in corners of the display, behind the user interface, as the user interface of the application begins to rotate.

7. The device of claim 5, wherein a third selectable element of the plurality of selectable elements remains displayed during the user interface rotation.

8. The device of claim 5, wherein the user interface of the application is displayed in a bounding region and the bounding region is rotated from the first orientation to the second orientation.

9. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by an electronic device with a display and one or more sensors configured to detect orientation and rotation of the electronic device, cause the electronic device to:

while the electronic device is in a first orientation, display, on the display, a user interface for an application that includes a plurality of selectable elements, wherein the user interface for the application is displayed in a portrait orientation while the device is in the first orientation;

while displaying the user interface in the portrait orientation, detect, with the one or more sensors, rotation of the electronic device to a second orientation, and,

in response to detecting rotation of the electronic device to the second orientation, rotate the user interface for the application into a second orientation, wherein the user interface for the application is displayed in a landscape orientation while the device is in the second orientation, wherein rotating the user interface for the application into the second orientation includes;

displaying first movement of a portion of the user interface of the application in the portrait orientation off of the display, the portion of the user interface including at least a portion of a first selectable element of the plurality of selectable elements, wherein the first movement is a rotation in a first direction; and

displaying second movement of a portion of the user interface of the application in the landscape orientation onto the display, the portion of the user interface including at least a portion of a second selectable element of the plurality of selectable elements, wherein the second movement is a rotation in the first direction.

10. The computer readable storage medium of claim 9, wherein a background appears in corners of the display, behind the user interface, as the user interface of the application begins to rotate.

11. The computer readable storage medium of claim 9, wherein a third selectable element of the plurality of selectable elements remains displayed during the user interface rotation.

12. The computer readable storage medium of claim 9, wherein the user interface of the application is displayed in a bounding region and the bounding region is rotated from the first orientation to the second orientation.