Computerized systems and methods for rendering an animation of an object in response to user input

• US 9,977,566 B2
• Filed: 06/23/2015
• Issued: 05/22/2018
• Est. Priority Date: 06/24/2014
• Status: Active Grant

• Current Assignee: Google LLC (Alphabet Inc.)
• Original Assignee: Google LLC (Alphabet Inc.)
• Inventors: Jitkoff, John Nicholas, Robertson, Christian, Tse, Alastair
• Primary Examiner(s): Ulrich, Nicholas
• Application Number:
  US14/747,379
• Publication Number:
  US 20150370444A1
• Time in Patent Office: 1,064 Days
• CPC Class Codes: G06F 3/04812 Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06T 11/001 Texturing; Colouring; Generation of texture or colour inpainting G06T5/77
• CPC Class Codes: G06T 13/80 2D [Two Dimensional] animation, e.g. using sprites
• CPC Class Codes: G06T 2200/24 involving graphical user interfaces [GUIs]
• CPC Class Codes: G09G 5/377 for mixing or overlaying two or more graphic patterns G09G5/02, G09G5/397 take precedence

Abstract

Computer-implemented systems and methods are provided for rendering an animation of an object in response to a user selection in a user interface. In accordance with some embodiments, an indication of a selection of a user interface element may be received, and characteristics of the user interface element may be identified. Coordinates corresponding to a spatial location of the user selection may be determined. An animation of an object that changes over time may then be rendered based on the user coordinates and the identified characteristics of the user interface element.

Claims

1. A computer-implemented method for rendering an animation in a user interface, comprising the following operations performed by one or more processors:

receiving an indication of a user selection of a user interface element in the user interface, wherein the element is bounded by a border;

identifying characteristics of the selected element;

determining coordinates for the user selection, wherein the coordinates correspond to a spatial location of the user selection in the user interface; and

rendering within the element an animation of an object that begins at the spatial location of the user selection, wherein the animated object grows in size over time, and wherein one or more edges of the object are clipped by the border of the element for at least a portion of the animation.

2. The method of claim 1, wherein the identified characteristics of the selected element include one or more of a width, height, radius, shape, and bounding status.

3. The method of claim 1, wherein the center of the animated object migrates to the center of the selected element as the object changes over time.

4. The method of claim 1, wherein the animated object provides a ripple effect.

5. The method of claim 1, further comprising:

determining a selection time corresponding to when the user selection was made, wherein the animation of the object is rendered based on the selection time.

6. The method of claim 5, wherein the selection time corresponds to when an input was pressed by a user to initiate the user selection.

7. The method of claim 5, wherein the selection time corresponds to when an input was released by a user to complete the user selection.

8. The method of claim 5, further comprising:

determining a color of the selected user interface element; and

rendering the animation of the object in a different shade of the color.

9. The method of claim 8, further comprising:

changing a shade of the color of the selected user interface element as the animation of the object changes over time, wherein at a certain time during the animation, the shade of the color of the selected user interface element and the shade of the color of the object is the same.

10. The method of claim 1, further comprising:

determining one of an acceleration or velocity based on the identified characteristics of the selected element; and

changing the animation of the object over time based on the determined acceleration or velocity.

11. The method of claim 1, wherein the object is a circle, and the animation is rendered so that the circle expands over time.

12. A computer-implemented system for rendering an animation in a user interface, comprising:

a memory that stores a set of instructions; and

at least one processor that executes the set of instructions to;

receive an indication of a user selection of a user interface element in the user interface, wherein the element is bounded by a border;

identify characteristics of the selected element;

determine coordinates for the user selection, wherein the coordinates correspond to a spatial location of the user selection in the user interface; and

render within the element an animation of an object that begins at the spatial location of the user selection, wherein the animated object grows in size over time, and wherein one or more edges of the object are clipped by the border of the element for at least a portion of the animation.

13. The system of claim 12, wherein the identified characteristics of the selected element include one or more of a width, height, radius, shape, and bounding status.

14. The system of claim 12, wherein the center of the animated object migrates to the center of the selected element as the object changes over time.

15. The system of claim 12, wherein the animated object provides a ripple effect.

16. The system of claim 12, wherein the at least one processor further executes the instructions to:

determine a selection time corresponding to when the user selection was made, wherein the animation of the object is rendered based on the selection time.

17. The system of claim 16, wherein the selection time corresponds to when an input was pressed by a user to initiate the user selection.

18. The system of claim 16, wherein the selection time corresponds to when an input was released by a user to complete the user selection.

19. The system of claim 12, wherein the at least one processor further executes the instructions to:

determine one of an acceleration or velocity based on the identified characteristics of the element; and

change the animation of the object over time based on the determined acceleration or velocity.

20. A non-transitory computer-readable medium storing a set of instructions that, when executed by one or more processors, cause the one or more processors to perform a method, the method comprising:

receiving an indication of a user selection of a user interface element in a user interface, wherein the element is bounded by a border;

identifying characteristics of the selected element;

determining coordinates for the user selection, wherein the coordinates correspond to a spatial location of the user selection in the user interface; and

rendering within the element an animation of an object that begins at the spatial location of the user selection, wherein the animated object grows in size over time, and wherein one or more edges of the object are clipped by the border of the element for at least a portion of the animation.