Smooth layout animation of visuals

摘要

A declarative animation system allows a designer to declaratively specify transitory behavior of a user interface or other visual display by recognizing changes in an underlying data model that spans visual elements. A visual display is typically comprised of one or more visual elements, as well as an underlying data model. Although animating within a particular visual element is typically straightforward, moving items across visual elements typically involves sophisticated programming logic. However, using the declarative animation system, visual elements can be associated with an underlying data model in a manner that allows the visual display layer to recognize and respond to changes in the underlying data model. This association can also be leveraged to allow automatically generated animation between visual elements without the addition of custom programmatic code. Thus, the declarative animation system allows designers to specify intuitive, graphically sophisticated interfaces without programming knowledge.

主权项

1. A computer-implemented method for updating a visual layout of a declaratively defined user interface, the method comprising:
determining whether an association between a data item and a particular visual element that has a defined transition in a declarative representation of the user interface has changed; determining whether the visual element has an associated tag in the declarative representation; determining whether a tag associated with the visual element is present in an index of visual elements, wherein the index contains position information for one or more visual elements, the position information including a tag column, a layout position column, and a parent element column wherein the layout position column specifies a last know position of the visual element relative to coordinates of a stored parent in the parent element column of each visual element; determining whether the visual element has a current parent that differs from the stored parent of a visual element in the index with a matching tag; determining whether a position of the data item has changed between a last position of the visual element in the index and a position of the visual element currently representing the data item; and upon determining that the position of the data item has changed and the current parent for the visual element differs from the stored parent,
creating a translation animation to smoothly move the data item from the last position of the visual element in the index to the position of the visual element currently representing the data item, wherein the transition animation is created automatically without receiving custom software code, thereby allowing a designer having no programming experience to declaratively specify transition animations; andupdating the index to associate the current parent and the current position with the visual element currently representing the data item,wherein the preceding steps are performed by at least one processor.