Portable electronic device with animated image transitions

• US 8,587,528 B2
• Filed: 02/27/2009
• Issued: 11/19/2013
• Est. Priority Date: 09/11/2006
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Chaudhri, Imran
• Primary Examiner(s): Mengistu, Amare
• Assistant Examiner(s): LAM, VINH TANG
• Application Number:
  US12/395,541
• Publication Number:
  US 20090172532A1
• Time in Patent Office: 1,726 Days
• Field of Search: 345/173, 715700-784
• US Class Current: 345/173
• CPC Class Codes: G06F 1/1694 the I/O peripheral being a single or a set of motion sensors for pointer control or gesture input obtained by sensing movements of the portable computer
• CPC Class Codes: G06F 16/444 Spatial browsing, e.g. 2D maps, 3D or virtual spaces
• CPC Class Codes: G06F 16/904 Browsing; Visualisation therefor for navigating the web G06F16/954; browsing optimisation for the web G06F16/957
• CPC Class Codes: G06F 2203/0381 Multimodal input, i.e. interface arrangements enabling the user to issue commands by simultaneous use of input devices of different nature, e.g. voice plus gesture on digitizer
• CPC Class Codes: G06F 2203/04104 Multi-touch detection in digitiser, i.e. details about the simultaneous detection of a plurality of touching locations, e.g. multiple fingers or pen and finger
• CPC Class Codes: G06F 3/0412 Digitisers structurally integrated in a display
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0483 Interaction with page-structured environments, e.g. book metaphor
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G11B 27/105 of operating discs
• CPC Class Codes: G11B 27/34 Indicating arrangements indicating means incorporated in magazine or cassette G11B23/046 and G11B23/0875; indicating measured values in general G01D

Abstract

Methods and systems that improve the way media is played, sorted, modified, stored and cataloged on a portable electronic device (e.g., media player) are disclosed. One aspect relates to an image based browser that allows a user to navigate through and select images that are related to media items. In one embodiment, during navigation, transitions between images being displayed can be animated.

Claims

1. A portable electronic device, comprising:

a touch screen display configured to operate as a user input device and a user output device;

at least one memory device capable of storing a plurality of images capable of being displayed on said touch screen display; and

a processing device operatively connected to said touch screen display and said at least one memory device, wherein said processing device is configured to;

in accordance with a determination that the device is in the first orientation, present a first graphical user interface for scrolling through a list comprising one or more entries, wherein each entry in the list corresponds to a media item in a set of media items;

in accordance with a determination that the device is in the second orientation, present a second graphical user interface, wherein the second graphical user interface is configured to;

display a first graphical representation in a primary mode on said touch screen display, wherein the primary mode is for displaying one or more graphical representations with a 2D appearance;

display a second graphical representation in a secondary mode on said touch screen display, wherein the secondary displaying one or more graphical representations with a 3D appearance;

detect a gesture input with said touch screen display;

determine that the gesture input comprises a navigational input, wherein the navigational input is a slide gesture of one or more of the user'"'"'s fingers on or over the touch screen display; and

in accordance with a determination that the received gesture input is a navigational input, perform an animated transition such that the first graphical user representation is transitioned to the secondary mode from the primary mode on said touch screen display and the second graphical representation is transitioned to the primary mode from the secondary mode on said touch screen display;

wherein the animated transition operates to skew the first graphical representation while being transitioned into the secondary mode, and to skew the second graphical representation while being transitioned into the primary mode.

2. A portable electronic device as recited in claim 1, wherein the first graphical representation is a first graphical user interface having a first plurality of selectable images that are capable of being selected to initiate corresponding functions on the electronic device, and wherein the second graphical representation is a second graphical user interface having a second plurality of selectable images.

3. A portable electronic device as recited in claim 1, wherein the first graphical representation includes at least one selectable icon pertaining to an application stored by said memory device and operable on said portable electronic device.

4. A portable electronic device as recited in claim 1, wherein the first graphical representation pertains to at least one application operable on said portable electronic device.

5. A portable electronic device as recited in claim 1, wherein the animated transition appears as a rotation from the first graphical representation to the second graphical representation.

6. The portable electronic device of claim 5, wherein, during the animated transition, the first graphical representation is skewed such that the first graphical representation appears to be moving between foreground and background.

7. The portable electronic device of claim 1, wherein a direction of the animated transition depends on a direction associated with the sliding gesture.

8. The portable electronic device of claim 1, wherein the first graphical representation is a first image, and the second graphical representation is a second image.

9. The portable electronic device of claim 1, wherein the second graphical interface is further configured to:

determine that the gesture input comprises a selection input; and

in accordance with a determination that the received gesture is a selection input, perform an operation associated with play back of a media item corresponding to the first graphical representation in the primary mode.

10. The portable electronic device of claim 1, wherein, during the animated transition, the first graphical representation is skewed such that the first graphical representation appears to be moving between foreground and background, and the second graphical representation is skewed such that the second graphical representation appears to be moving between background and foreground.

11. A portable electronic device, comprising:

a touch screen display configured to operate as a user input device and a user output device;

at least one memory device capable of storing computer program code and a plurality of images capable of being displayed on said touch screen display; and

a processing device operatively connected to said touch screen display and said at least one memory device, said processing device capable of executing at least a portion of the computer program code, wherein the computer program code includes at least;

computer program code for presenting a first graphical user interface for scrolling through a list comprising one or more entries in accordance with a determination that the device is in the first orientation, wherein each entry in the list corresponds to a media item in a set of media items; and

computer program code for presenting a second graphical user interface in accordance with a determination that the device is in the second orientation, wherein the second graphical user interface is configured to;

display a first graphical representation on the touch screen display, wherein the primary mode is for displaying one or more graphical representations with a 2D appearance;

display a second graphical representation in a secondary mode on said touch screen display, wherein the secondary mode is for displaying one or more graphical representations with a 3D appearance;

receive a gesture input with said touch screen display;

determine that the gesture input comprises a navigational input, wherein the navigational input is a slide gesture of one or more of the user'"'"'s fingers on or over the touch screen display; and

in accordance with a determination that the received gesture input is a navigational input, perform an animated transition such that the first graphical representation is transitioned to the secondary mode from the primary mode on the touch screen display and the second graphical representation is transitioned to the primary mode from the secondary mode on the touch screen display;

wherein the animated transition operates to skew the first graphical representation while being transitioned into the secondary mode, and skew the second graphical representation while being transitioned into the primary mode.

12. A portable electronic device as recited in claim 11, wherein the animated transition appears as a rotation from the first graphical representation to the second graphical representation.

13. A portable electronic device as recited in claim 12, wherein, during the animated transition, the first graphical representation is skewed such that the first graphical representation appears to be moving between foreground and background.

14. A portable electronic device as recited in claim 11, wherein the first graphical representation is a first image, and the second graphical representation is a second image.

15. A portable electronic device as recited in claim 11, wherein the first graphical representation pertains to at least one application operable on the electronic device.

16. A portable electronic device as recited in claim 11, wherein the first graphical representation includes a plurality of selectable graphical images that are capable of being selected to initiate corresponding functions on the electronic device, and wherein the second graphical representation is a second graphical user interface having a second plurality of selectable images.

17. A portable electronic device as recited in claim 11, wherein the direction of the animated transition depends on a direction associated with the user input.

18. The portable electronic device of claim 11, wherein the second graphical interface is further configured to:

determine that the gesture input comprises a selection input; and

in accordance with a determination that the received gesture is a selection input, perform an operation associated with play back of a media item corresponding to the first graphical representation in the primary mode.

19. The portable electronic device of claim 11, wherein the first graphical representation includes at least one selectable icon pertaining to an application stored by said memory device and operable on said portable electronic device.

20. The portable electronic device of claim 11, wherein, during the animated transition, the first graphical representation is skewed such that the first graphical representation appears to be moving between foreground and background, and the second graphical representation is skewed such that the second graphical representation appears to be moving between background and foreground.

21. A method of operating an electronic device with a touch screen display, at least one memory device capable of storing a plurality of images capable of being displayed on said touch screen display and a processing device operatively connected to said touch screen display and said at least one memory device, the method comprising:

in accordance with a determination that the device is in the first orientation, presenting a first graphical user interface for scrolling through a list comprising one or more entries, wherein each entry in the list corresponds to a media item in a set of media items;

in accordance with a determination that the device is in the second orientation, presenting a second graphical user interface, wherein the second graphical user interface comprises;

displaying a first graphical representation in a primary mode on said touch screen display, wherein the primary mode is for displaying one or more graphical representations with a 2D appearance;

displaying a second graphical representation in a secondary mode on said touch screen display, wherein the secondary mode is for displaying one or more graphical representations with a 3D appearance;

detecting a gesture input with said touch screen display;

determining that the that the gesture input comprises a navigational input, wherein the navigational input is a slide gesture of one or more of the user'"'"'s fingers on or over the touch screen display; and

in accordance with a determination that the received gesture input is a navigational input, performing an animated transition such that the first graphical user representation is transitioned to the secondary mode from the primary mode on said touch screen display and the second graphical representation is transitioned to the primary mode from the secondary mode on said touch screen display;

wherein the animated transition operates to skew the first graphical representation while being transitioned into the secondary mode, and to skew the second graphical representation while being transitioned into the primary mode.

22. The method as recited in claim 21, wherein a direction of the animated transition depends on a direction associated with the sliding gesture.

23. The method as recited in claim 21, wherein the second graphical interface further comprises:

determining that the gesture input comprises a selection input; and

in accordance with a determination that the received gesture is a selection input, performing an operation associated with play back of a media item corresponding to the first graphical representation in the primary mode.

24. The method as recited in claim 21, wherein the first graphical representation is a first image, and the second graphical representation is a second image.

25. The method as recited in claim 21, wherein the first graphical representation is a first graphical user interface having a first plurality of selectable images that are capable of being selected to initiate corresponding functions on the electronic device, and wherein the second graphical representation is a second graphical user interface having a second plurality of selectable images.

26. The method as recited in claim 21, wherein the first graphical representation pertains to at least one application operable on said portable.

27. The method as recited in claim 21, wherein the first graphical representation includes at least one selectable icon pertaining to an application stored by said memory device and operable on said portable electronic device.

28. The method as recited in claim 21, wherein the animated transition appears as a rotation from the first graphical representation to the second graphical representation.

29. The method as recited in claim 28, wherein, during the animated transition, the first graphical representation is skewed such that the first graphical representation appears to be moving between foreground and background.

30. The method as recited in claim 21, wherein, during the animated transition, the first graphical representation is skewed such that the first graphical representation appears to be moving between foreground and background, and the second graphical representation is skewed such that the second graphical representation appears to be moving between background and foreground.