Rotation smoothing of a user interface

• US 10,409,396 B2
• Filed: 11/13/2017
• Issued: 09/10/2019
• 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 M
• Application Number:
  US15/811,443
• Publication Number:
  US 20180196529A1
• Time in Patent Office: 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 first user interface for an application that includes a first plurality of selectable elements, wherein;

the first user interface for the application is displayed in a portrait orientation while the device is in the first orientation; and

the first user interface has a first width;

while displaying the first user interface for the application 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, switching to displaying a second user interface for the application in a second orientation, wherein;

the second user interface for the application includes a second plurality of selectable elements that correspond to the first plurality of selectable elements;

the second user interface for the application is displayed in a landscape orientation while the device is in the second orientation;

the second user interface has a second width that is different from the first width;

switching to displaying the second user interface for the application in the second orientation includes displaying an animated transition in which the first user interface is distorted by increasing the width of the first user interface without increasing a height of the first user interface by a corresponding amount during the animated transition; and

displaying the animated transition includes rotating and stretching a respective region of the first user interface, the respective region including text, without stretching the text in the respective region.

2. The method of claim 1, wherein the animated transition decreases the height of the first user interface while increasing the width of the first user interface.

3. The method of claim 1, wherein the animated transition distorts particular elements in the first plurality of selectable objects as the particular elements transition to corresponding elements in the second plurality of selectable objects.

4. The method of claim 3, wherein distorting particular elements in the first plurality of selectable objects includes stretching displayed buttons.

5. The method of claim 1, wherein, at least some of the selectable elements include text, and the animated transition increases a size of a respective selectable element that includes text while maintaining a size of the text in the respective selectable element.

6. The method of claim 1, wherein the first user interface is distorted in the animated transition, which includes a plurality of successive steps, each successive step of the plurality of successive steps further increasing the width of the first user interface without increasing the height by a corresponding amount.

7. The method of claim 1, wherein displaying the animated transition includes:

displaying successively at least a first intermediate user interface and a second intermediate user interface, wherein;

the width of the first intermediate user interface is increased compared to the width of the first user interface and the height of the first intermediate interface is not increased by a corresponding amount;

the width of the second intermediate user interface is increased compared to the width of the first intermediate interface and the height of the second intermediate interface is not increased by a corresponding amount; and

the width of the second interface is greater than the width of the second intermediate user interface.

8. 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 first user interface for an application that includes a first plurality of selectable elements, wherein;

the first user interface for the application is displayed in a portrait orientation while the device is in the first orientation; and

the first user interface has a first width;

while displaying the first user interface for the application 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, switching to displaying a second user interface for the application in a second orientation, wherein;

the second user interface for the application includes a second plurality of selectable elements that correspond to the first plurality of selectable elements;

the second user interface for the application is displayed in a landscape orientation while the device is in the second orientation;

the second user interface has a second width that is different from the first width;

switching to displaying the second user interface for the application in the second orientation includes displaying an animated transition in which the first user interface is distorted by increasing the width of the first user interface without increasing a height of the first user interface by a corresponding amount during the animated transition; and

displaying the animated transition includes rotating and stretching a respective region of the first user interface, the respective region including text, without stretching the text in the respective region.

9. The device of claim 8, wherein the animated transition decreases the height of the first user interface while increasing the width of the first user interface.

10. The device of claim 8, wherein the animated transition distorts particular elements in the first plurality of selectable objects as the particular elements transition to corresponding elements in the second plurality of selectable objects.

11. The device of claim 10, wherein distorting particular elements in the first plurality of selectable objects includes stretching displayed buttons.

12. The device of claim 8, wherein, at least some of the selectable elements include text, and the animated transition increases a size of a respective selectable element that includes text while maintaining a size of the text in the respective selectable element.

13. The device of claim 8, wherein the first user interface is distorted in the animated transition, which includes a plurality of successive steps, each successive step of the plurality of successive steps further increasing the width of the first user interface without increasing the height by a corresponding amount.

14. The device of claim 8, wherein displaying the animated transition includes:

displaying successively at least a first intermediate user interface and a second intermediate user interface, wherein;

the width of the first intermediate user interface is increased compared to the width of the first user interface and the height of the first intermediate interface is not increased by a corresponding amount;

the width of the second intermediate user interface is increased compared to the width of the first intermediate interface and the height of the second intermediate interface is not increased by a corresponding amount; and

the width of the second interface is greater than the width of the second intermediate user interface.

15. 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 first user interface for an application that includes a first plurality of selectable elements, wherein;

the first user interface for the application is displayed in a portrait orientation while the device is in the first orientation; and

the first user interface has a first width;

while displaying the first user interface for the application 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, switch to displaying a second user interface for the application in a second orientation, wherein;

the second user interface for the application includes a second plurality of selectable elements that correspond to the first plurality of selectable elements;

the second user interface for the application is displayed in a landscape orientation while the device is in the second orientation;

the second user interface has a second width that is different from the first width;

switching to displaying the second user interface for the application in the second orientation includes displaying an animated transition in which the first user interface is distorted by increasing the width of the first user interface without increasing a height of the first user interface by a corresponding amount during the animated transition; and

displaying the animated transition includes rotating and stretching a respective region of the first user interface, the respective region including text, without stretching the text in the respective region.

16. The computer readable storage medium of claim 15, wherein the animated transition decreases the height of the first user interface while increasing the width of the first user interface.

17. The computer readable storage medium of claim 15, wherein the animated transition distorts particular elements in the first plurality of selectable objects as the particular elements transition to corresponding elements in the second plurality of selectable objects.

18. The computer readable storage medium of claim 17, wherein distorting particular elements in the first plurality of selectable objects includes stretching displayed buttons.

19. The computer readable storage medium of claim 15, wherein, at least some of the selectable elements include text, and the animated transition increases a size of a respective selectable element that includes text while maintaining a size of the text in the respective selectable element.

20. The computer readable storage medium of claim 15, wherein the first user interface is distorted in the animated transition, which includes a plurality of successive steps, each successive step of the plurality of successive steps further increasing the width of the first user interface without increasing the height by a corresponding amount.

21. The computer readable storage medium of claim 15, wherein displaying the animated transition includes:

displaying successively at least a first intermediate user interface and a second intermediate user interface, wherein;

the width of the first intermediate user interface is increased compared to the width of the first user interface and the height of the first intermediate interface is not increased by a corresponding amount;

the width of the second intermediate user interface is increased compared to the width of the first intermediate interface and the height of the second intermediate interface is not increased by a corresponding amount; and

the width of the second interface is greater than the width of the second intermediate user interface.