SMOOTH LAYOUT ANIMATION OF CONTINUOUS AND NON-CONTINUOUS PROPERTIES
First Claim
1. A computer-implemented method for smoothly animating the transition of a user interface (UI) element from an outgoing state to an incoming state, the method comprising:
- taking an outgoing snapshot of the position and other visible properties of a UI element in the outgoing state arranged by a layout manager;
informing the UI element that the layout has changed to the new state so that the UI element updates its positional and layout properties but does not render a transition;
taking an incoming snapshot of the position and other visible properties of the UI element in the incoming state;
comparing the outgoing snapshot and the incoming snapshot to determine whether the UI element moved or changed appearance; and
upon determining that the appearance or position of the UI element changed, animating the transition of the UI element by gradually modifying the values of appearance properties that simulate a change between the outgoing and incoming state to make the change of appearance of the UI element appear smooth to a user,wherein the preceding steps are performed by at least one processor.
3 Assignments
0 Petitions
Accused Products
Abstract
A layout animation system is described herein that performs smooth transitions for properties of a layout, regardless of whether the layout properties are discrete or automatically calculated. Before a transition is executed, the layout animation system extracts and stores the positioning, sizing, and visibility of participating elements across the layout hierarchy. The system places the affected elements in the same position, size, and visibility as the outgoing state requests and animates the elements to an incoming state. For each element, the system calculates a smooth animation that transforms the element from the outgoing position, size, and visibility to the incoming position, size, and visibility. The system then animates the elements over a desired transition time. Thus, the layout animation system provides the ability to create smooth layout transitions in the presence of automatic layout management for properties of various types.
62 Citations
20 Claims
-
1. A computer-implemented method for smoothly animating the transition of a user interface (UI) element from an outgoing state to an incoming state, the method comprising:
-
taking an outgoing snapshot of the position and other visible properties of a UI element in the outgoing state arranged by a layout manager; informing the UI element that the layout has changed to the new state so that the UI element updates its positional and layout properties but does not render a transition; taking an incoming snapshot of the position and other visible properties of the UI element in the incoming state; comparing the outgoing snapshot and the incoming snapshot to determine whether the UI element moved or changed appearance; and upon determining that the appearance or position of the UI element changed, animating the transition of the UI element by gradually modifying the values of appearance properties that simulate a change between the outgoing and incoming state to make the change of appearance of the UI element appear smooth to a user, wherein the preceding steps are performed by at least one processor. - View Dependent Claims (2, 3, 4, 5, 6, 7, 8, 9, 10, 11)
-
-
12. A computer system for smoothly animating user interface (UI) transitions between states, the system comprising:
-
a processor and memory configured to execute software instructions; a state management component configured to store multiple states in which a UI can exist and receive an indication to transition from one state to another; a determine state delta component configured to compare an ingoing and outgoing state to determine layout properties that change between the states, and corresponding UI elements that will change; a state snapshot component configured to take a snapshot of an area within which each corresponding UI element of a layout is positioned; a snapshot comparison component configured to compare snapshots of an incoming state and an outgoing state to determine what UI elements change and identify property values for appearance properties at each state; and an element animation component configured to animate each element smoothly between the outgoing state and incoming state by displaying one or more intermediate appearances for each element. - View Dependent Claims (13, 14, 15, 16, 17)
-
-
18. A computer-readable storage medium comprising instructions for controlling a computer system to identify potential target user interface (UI) elements in a layout that may change appearance during a UI state transition, wherein the instructions, when executed, cause a processor to perform actions comprising:
-
comparing an outgoing state to an incoming state to determine layout-based properties that are different between the outgoing state and the incoming state; identifying changed layout properties based on the comparison; storing changed UI elements that have identified changing layout properties in a data structure; for each UI element identified, adding sibling and parent UI elements to the stored UI elements; and smoothly animating a transition of each identified UI element between an appearance of the element when the element is in the outgoing state and an appearance of the element when the element is in the incoming state. - View Dependent Claims (19, 20)
-
Specification