Animation of user interface elements

Patent metadata

Field	Value
Publication number	US-10222960-B2
Application number	US-201615139259-A
Country	US
Kind code	B2
Filing date	Apr 26, 2016
Priority date	Apr 26, 2016
Publication date	Mar 5, 2019
Grant date	Mar 5, 2019

Abstract

Implementations relate to generating and displaying animations of user interface elements. In some implementations, a computer-executed method includes receiving user input indicative of manipulation of a particular user interface element with respect to a grid including a plurality of user interface elements. The method identifies, based on the user input, at least first and second rows of the grid to be updated. The method generates an animation to update the grid, including an update of the second row of the grid and one or more transitions comprising at least one of: transition of a first user interface element from the first row to outside the display area of the grid along a first direction, and transition of a second user interface element into the first row from outside the display area along a different second direction. The method causes the animation to be displayed.

First claim

What is claimed is:

1. A computer-implemented method comprising:
receiving user input indicative of manipulation of at least one particular user interface element with respect to a grid including a plurality of user interface elements arranged in a display area;
identifying, based on the user input, at least a first row and a second row of the grid to be updated;
generating an animation to update the grid, wherein the animation comprises:
one or more transitions comprising at least one of:
transition of a first user interface element from the first row to outside the display area along a first direction; or
transition of a second user interface element into the first row from outside the display area along a second direction, the second direction different from the first direction; and

update of the second row of the grid,
wherein in response to a cross-fade threshold being met, the update of the second row of the grid comprises a cross-fade transition of one or more user interface elements in the second row to one or more other user interface elements of the grid without displaying motion of the one or more other user elements across positions of the grid,
wherein the cross-fade threshold is met when at least a threshold number of particular user interface elements which are removed or added in the manipulation of the at least one particular user interface element are positioned in the grid before the one or more user interface elements in the second row; and

causing the animation to be displayed.

2. The method of claim 1 , wherein the at least one particular user interface element is included in the grid, and wherein receiving user input comprises receiving indication to remove the at least one particular user interface element from the grid.

3. The method of claim 1 , wherein the at least one particular user interface element is in the first row, and wherein receiving user input comprises receiving indication to remove the at least one particular user interface element from the grid,
wherein generating the animation further comprises removing the at least one particular user interface element from the first row of the grid.

4. The method of claim 1 , wherein the at least one particular user interface element is from a row of the grid different from the first row, and wherein receiving user input comprises receiving indication to move the at least one particular user interface element to the first row of the grid.

5. The method of claim 1 , wherein the at least one particular user interface element is not part of the grid, and wherein receiving user input comprises receiving indication to insert the at least one particular user interface element into the grid.

6. The method of claim 1 , wherein the at least one particular user interface element is not part of the grid, and wherein receiving user input comprises receiving indication to insert the at least one particular user interface element into the first row.

7. The method of claim 1 , wherein generating the animation further comprises adjusting a dimension of the first row based on a size of at least one of: the first user interface element and the second user interface element.

8. The method of claim 1 , further comprising:
determining a display direction for the display area; and
based on the display direction, selecting at least one of the first direction and the second direction.

9. The method of claim 8 , wherein the display direction is a left-to-right direction, the first direction is the left-to-right direction, and the second direction is a right-to-left direction.

10. The method of claim 1 , wherein the first row and the second row are adjacent in the grid, and wherein in response to the cross-fade threshold not being met, the update of the second row of the grid comprises at least one of:
transition of the first user interface element from outside the display area into the second row along the first direction, or
transition of the second user interface element from the second row to outside the display area along the second direction.

11. The method of claim 1 , wherein the cross-fade threshold is met when the at least a threshold number of the particular user interface elements are positioned in the grid before the one or more user interface elements in the second row and when the one or more user interface elements in the second row are in a different row than the at least one particular user interface element.

12. The method of claim 1 , further comprising identifying a third row of the grid for updates, and wherein generating the animation further comprises update of the third row of the grid.

13. The method of claim 1 , wherein grid represents at least a portion of a photo album and the plurality of user interface elements in the grid are images or image thumbnails, wherein the user input instructs the particular user interface element to be added to or removed from the photo album.

14. A non-transitory computer readable medium having stored thereon software instructions that, when executed by a processor, cause the processor to perform operations including:
receiving user input indicative of manipulation of at least one particular user interface element with respect to a grid including a plurality of user interface elements arranged in a display area;
identifying, based on the user input, at least a first row and a second row of the grid to be updated;
generating an animation to update the grid, wherein the animation comprises:
transition of a first user interface element from the first row to outside the display area along a first direction; or
transition of a second user interface element into the first row from outside the display area along a second direction, the second direction different from the first direction; and
update of the second row of the grid,
wherein in response to a cross-fade threshold being met, the update of the second row of the grid comprises a cross-fade transition of one or more user interface elements in the second row to one or more other user interface elements of the grid without displaying motion of the one or more other user elements across positions of the grid,
wherein the cross-fade threshold is met when at least a threshold number of particular user interface elements which are removed or added in the manipulation of the at least one particular user interface element are positioned in the grid before the one or more user interface elements in the second row; and

causing the animation to be displayed.

15. The computer readable medium of claim 14 , wherein the at least one particular user interface element is included in the grid, wherein the operation of receiving user input comprises receiving indication to remove the at least one particular user interface element from the grid.

16. The computer readable medium of claim 14 , wherein the at least one particular user interface element is not part of the grid, wherein the operation of receiving user input comprises receiving indication to insert the at least one particular user interface element into the grid.

17. A system comprising:
a storage device; and
at least one processor configured to access the storage device and configured to perform operations comprising:
receiving user input indicative of manipulation of at least one particular user interface element;
identifying, based on the user input, at least a first row and a second row of a grid to be updated based on the manipulation of the at least one particular user interface element, wherein the grid comprises a plurality of user int

Assignees

• Google Inc
• Google Llc

Inventors

• Sowden Paul
• Henry Eric

Classifications

• G06F3/04845 Primary

  for image manipulation, e.g. dragging, rotation, expansion or change of colour · CPC title

• G06F3/0482

  Interaction with lists of selectable items, e.g. menus · CPC title

• G06T2200/24

  involving graphical user interfaces [GUIs] · CPC title

• G06F3/04817

  using icons (graphical or visual programming using iconic symbols G06F8/34) · CPC title

• G06Q10/00

  Administration; Management · CPC title