Varying user interface element based on movement

• US 8,127,246 B2
• Filed: 10/01/2007
• Issued: 02/28/2012
• Est. Priority Date: 10/01/2007
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Furches, Elizabeth Caroline, Chaudhri, Imran A, Ording, Bas
• Primary Examiner(s): Pesin, Boris
• Assistant Examiner(s): Hur, Ece
• Application Number:
  US11/865,664
• Publication Number:
  US 20090089706A1
• Time in Patent Office: 1,611 Days
• Field of Search: 715/787, 715/784, 715/785, 715/786, 715/830, 715/973, 345/341, 345/473
• US Class Current: 715/787
• CPC Class Codes: G06F 3/04855 Interaction with scrollbars

Abstract

Methods, systems, and apparatus, including computer program products, for presenting a user interface element. Movement of a user interface element that includes first and second pattern layers is detected. While the user interface element is moving, a first pattern layer is translated relative to a second pattern layer.

Claims

1. A method comprising:

detecting a direction of movement of a user interface element, the user interface element including a first pattern layer and a second pattern layer;

while the user interface element is moving, creating a graphical pattern using the first pattern layer and the second pattern layer, wherein creating the graphical pattern comprises;

overlaying the first pattern layer on the second pattern layer;

translating the first pattern layer relative to the second pattern layer;

detecting a change in the direction of the movement;

inverting the first pattern layer and the second pattern layer in response to the detected change; and

translating, in the detected changed direction of the movement, the first pattern layer relative to the second pattern layer; and

providing the graphical pattern for display on the moving user interface element.

2. The method of claim 1, wherein translating the first pattern layer relative to the second pattern layer comprises translating the first pattern layer, in the detected direction of movement, relative to the second pattern layer.

3. The method of claim 1, wherein the user interface element is a slider.

4. The method of claim 1, wherein translating the first pattern layer relative to the second pattern layer comprises translating the first pattern layer at a rate that is a function of a rate of the movement of the user interface element.

5. The method of claim 1, wherein translating the first pattern layer relative to the second pattern layer comprises translating the first pattern layer at a rate linearly proportional to a rate of the movement of the user interface element.

6. The method of claim 1, wherein the user interface element comprises:

a base layer;

a plurality of pattern layers, including the first and second pattern layers; and

a shaping layer.

7. The method of claim 6, wherein the user interface element is an alpha composite of the base later, the pattern layers, and the shaping layer.

19. The method of claim 1, wherein the first pattern layer comprises a repeating pattern of transparent portions and opaque portions.

20. The method of claim 19, wherein the repeating pattern is a wave pattern.

8. A computer program product, encoded on a computer-readable storage device, operable to cause a data processing apparatus to perform operations comprising:

detecting a direction of movement of a user interface element, the user interface element including a first pattern layer and second pattern layer;

while the user interface element is moving, creating a graphical pattern using the first pattern layer and the second pattern layer, wherein creating the graphical pattern comprises;

overlaying the first pattern layer on the second pattern layer;

translating the first pattern layer relative to the second pattern layer;

detecting a change in the direction of the movement

inverting the first pattern layer and the second pattern layer in response to the detected change; and

translating, in the detected changed direction of the movement, the first pattern layer relative to the second pattern layer; and

providing the graphical pattern for display on the moving user interface element.

9. The computer program product of claim 8, wherein the user interface element is a slider.

10. The computer program product of claim 8, further operable to cause the data processing apparatus to perform operations comprising translating the first pattern layer at a rate that is a function of a rate of the movement of the user interface element.

11. The computer program product of claim 8, further operable to cause the data processing apparatus to perform operations comprising translating the first pattern layer at a rate linearly proportional to a rate of the movement of the user interface element.

12. The computer program product of claim 8, wherein the user interface element comprises:

a base layer;

a plurality of pattern layers, including the first and second pattern layers; and

a shaping layer.

13. The computer program product of claim 12, wherein the user interface element is an alpha composite of the base layer, the pattern layers, and the shaping layer.

14. A system, comprising:

one or more processors configured to perform operations comprising;

detecting a direction movement of a user interface element, the user interface element including a first pattern layer and a second pattern layer;

while the user interface element is moving, creating a graphical pattern using the first pattern layer and the second pattern layer, wherein creating the graphical pattern comprises;

overlaying the first pattern layer on the second pattern layer; and

translating the first pattern layer relative to the second pattern layer;

detecting a change in the direction of the movement

inverting the first pattern layer and the second pattern layer in response to the detected change; and

translating, in the detected changed direction of the movement, the first pattern layer relative to the second pattern layer; and

providing the graphical pattern for display on the moving user interface element.

15. The system of claim 14, wherein the user interface element comprises:

a base layer defining a color of the user interface element;

the first pattern layer defining a first graphical pattern;

the second pattern layer defining a second graphical pattern; and

a shaping layer defining a shape of the user interface element.

16. The system of claim 15, wherein the first graphic pattern and the second graphic pattern each comprises a series of spaced-apart wave shapes.

17. The system of claim 16, wherein the first graphic pattern includes a series of thick waves, and the second graphic pattern includes a series of thin waves.

18. A method, comprising:

detecting a direction of movement of a user interface element, the user interface element including a first pattern layer and a second pattern layer;

while the user interface element is moving, creating an animated effect, wherein creating the animated effect comprises;

overlaying the first pattern layer on the second pattern layer; and

translating the first pattern layer relative to the second pattern layer

detecting a change in direction of the movement;

inverting the first pattern layer and the second pattern layer in response to the detected change; and

while the user interface element is moving, translating, in the detected changed direction of the movement, the first pattern layer relative to the second pattern layer.