O'Reilly logo

UX Design for Mobile by Pau Giner, Pablo Perea

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required