UX Design for Mobile

Composing animations

In the former examples, the animations defined have been quite simple. We have created transitions for a few properties such as opacity and position, but we haven't paid much attention to the timing and acceleration of those transitions. In this prototype, we will create a much more complex animation.

Download a prototype from [Asset_A6462_A07_A05-Animations.zip].

Changing to a completely different view requires users to reorient. When transitions provide continuity between two views, it helps the user connect the dots. In our example, the list of activities and the detail activity both use an image to represent the specific activity. We can use that image to make the relationship between the two views easier to understand. ...