Animation of user interface elements

Patent metadata

Field	Value
Publication number	US-10656811-B2
Application number	US-201916287817-A
Country	US
Kind code	B2
Filing date	Feb 27, 2019
Priority date	Apr 26, 2016
Publication date	May 19, 2020
Grant date	May 19, 2020

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 generating the animation comprises adjusting a particular dimension of all user interface elements in the first row based on a corresponding dimension of at least one of: the first user interface element or the second user interface element of the one or more transitions; and

causing the animation to be displayed.

2. The computer-implemented method of claim 1 wherein adjusting the particular dimension of all the user interface elements in the first row comprises modifying a vertical dimension of each user interface element in the first row with respect to the display area.

3. The computer-implemented method of claim 2 further comprising, in response to modifying the vertical dimension of each user interface element in the first row, adjusting a vertical dimension of one or more user interface elements in one or more other rows of the grid to maintain a constant vertical dimension for the grid.

4. The computer-implemented method of claim 1 wherein generating the animation further comprises adjusting a particular dimension of one or more user interface elements in the second row based on a size of at least one of: the first user interface element or the second user interface element.

5. The computer-implemented method of claim 1 wherein adjusting the particular dimension of all the user interface elements in the first row includes increasing a vertical dimension of each user interface element in the first row with respect to one or more user interface elements in other rows of the grid.

6. The computer-implemented method of claim 5 wherein generating the animation further comprises reducing a vertical dimension of each user interface element in the second row.

7. The computer-implemented method of claim 1 , further comprising causing display of the user interface elements in the first row having the adjusted particular dimension after the animation is completed.

8. The computer-implemented 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 an 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.

9. The computer-implemented 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 an indication to move the at least one particular user interface element to the first row of the grid.

10. The computer-implemented 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 an indication to insert the at least one particular user interface element into the first row, and wherein the one or more transitions include transition of the first user interface element.

11. The computer-implemented method of claim 1 , wherein the first row and the second row are adjacent in the grid, and wherein 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.

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

13. The computer-implemented 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, wherein the user input indicates that the at least one particular user interface element be added to or removed from the photo album.

14. 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 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 generating the animation comprises adjusting a particular dimension of all user interface elements in the first row based on a corresponding dimension of at least one of: the first user interface element or the second user interface element of the one or more transitions; and

causing the animation to be displayed.

15. The system of claim 14 wherein adjusting the particular dimension of all the user interface elements in the first row comprises modifying a vertical dimension of each user interface element in the first row with respect to the display area.

16. The system of claim 15 wherein the operations further comprise, in response to modifying the vertical dimension of each user interface element in the first row, adjusting a vertical dimension of one or more user interface elements in one or more other rows of the grid to maintain a constant vertical dimension for the grid.

17. The system of claim 14 wherein the operation of generating the animation further comprises adjusting a particular dimension of one or more user interface elements in the second row based on a size of at least one of: the first user interface element or the second user interface element.

18. The system of claim 14 wherein the operation of adjusting the particular dimension of all the user interface elements in the first row includes increasing a vertical dimension of each user interface element in the first row, and wherein generating the animation further comprises reducing a vertical dimension of all the user interface elements in the second row.

19. The system of claim 14 wherein the at least one particular user interface element has an aspect ratio with a vertical dimension different than a horizontal dimension, wherein the aspect ratio is retained prior to, during, and after the anima

Assignees

• Google Llc

Inventors

• Sowden Paul
• Henry Eric

Classifications

• G06T2200/24

  involving graphical user interfaces [GUIs] · CPC title

• G06F3/04883

  for inputting data by handwriting, e.g. gesture or text · CPC title

• G06F3/04817

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

• G06T13/80 Primary

  Two-dimensional [2D] animation, e.g. using sprites · CPC title

• G06F3/04845 Primary

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