Use list animations to show the insertion or deletion of items in a collection of similar items. While these animations are named for their simplest use—insertion into or deletion from a list (a one-dimensional set)— they are used in collections of other forms as well, such as a set of photos displayed in a grid. These animations provide a smooth visual transition for the entry or exit of the new items. This makes it obvious to the user what has happened. During an "add" animation, existing items slide out of the way to make space for the new item. The new item then fades into the space, scaling up as it fades in. A "delete" animation is the reverse.
This set of animations consists of the following APIs:
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
Add/Delete from list animations
Use list animations to show the insertion of items into, or deletion of items from, a collection of similar items. These animations differ from the add/delete from search list animations, in that the search animations are somewhat faster, to accommodate filtering search results while the user is entering the search term.
The following video demonstrates the animations that add and remove items from a list:
Add/Delete from search list animations
Use the search list animations when items in a list are changing quickly as part of a search scenario. This set of animations differs in timing from the animations for adding and deleting from lists. The search list animations respond more quickly to scenarios such as continuous filtering. For example, if a user enters a search term to search for an item in a list, and that list filters the results in real time, the items that are filtered out should use the delete from search list animation. Conversely, if a user searches for a string and then hits the backspace key to remove a character from the search term, any items that are then added back to the list of search results should use the add to search list animation.
The following video demonstrates the animations that add and remove items from a search list:
Other resources
See the Using the Animation Library animations sample for code examples that demonstrate the use of the fade animation APIs.
See Guidelines and checklist for add and delete animations for design best practices in the use of these animations.
Related topics
- Animating your UI
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
Build date: 3/5/2013
