Robert Ly | 3f53212 | 2012-10-03 14:20:26 -0700 | [diff] [blame] | 1 | page.title=Adding Animations |
Scott Main | 4aa6b10 | 2013-10-16 11:15:55 -0700 | [diff] [blame] | 2 | page.tags="Animator","views","layout","user interface" |
Robert Ly | 3f53212 | 2012-10-03 14:20:26 -0700 | [diff] [blame] | 3 | trainingnavtop=true |
| 4 | startpage=true |
| 5 | |
| 6 | @jd:body |
| 7 | <div id="tb-wrapper"> |
| 8 | <div id="tb"> |
| 9 | <h2> |
| 10 | Dependencies and prerequisites |
| 11 | </h2> |
| 12 | <ul> |
| 13 | <li>Android 4.0 or later |
| 14 | </li> |
| 15 | <li>Experience building an Android <a href="{@docRoot}guide/topics/ui/index.html">User |
| 16 | Interface</a> |
| 17 | </li> |
| 18 | </ul> |
| 19 | <h2> |
| 20 | You should also read |
| 21 | </h2> |
| 22 | <ul> |
| 23 | <li> |
| 24 | <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Property Animation</a> |
| 25 | </li> |
| 26 | </ul> |
| 27 | <h2> |
| 28 | Try it out |
| 29 | </h2> |
| 30 | <div class="download-box"> |
| 31 | <a href="{@docRoot}shareables/training/Animations.zip" class= |
| 32 | "button">Download the sample app</a> |
| 33 | <p class="filename"> |
| 34 | Animations.zip |
| 35 | </p> |
| 36 | </div> |
| 37 | </div> |
| 38 | </div> |
| 39 | <p> |
| 40 | Animations can add subtle visual cues that notify users about what's going on in your app and |
| 41 | improve their mental model of your app's interface. Animations are especially useful when the |
| 42 | screen changes state, such as when content loads or new actions become available. Animations |
| 43 | can also add a polished look to your app, which gives your app a higher quality feel. |
| 44 | </p> |
| 45 | <p> |
| 46 | Keep in mind though, that overusing animations or using them at the wrong time can be |
| 47 | detrimental, such as when they cause delays. This training class shows you how to |
| 48 | implement some common types of animations that can increase usability and add flair without |
| 49 | annoying your users. |
| 50 | </p> |
| 51 | |
| 52 | <h2> |
| 53 | Lessons |
| 54 | </h2> |
| 55 | <dl> |
| 56 | <dt> |
| 57 | <b><a href="crossfade.html">Crossfading Two Views</a></b> |
| 58 | </dt> |
| 59 | <dd> |
| 60 | Learn how to crossfade between two overlapping views. This lesson shows you how to crossfade a progress |
| 61 | indicator to a view that contains text content. |
| 62 | </dd> |
| 63 | <dt> |
| 64 | <b><a href="screen-slide.html">Using ViewPager for Screen Slides</a></b> |
| 65 | </dt> |
| 66 | <dd> |
| 67 | Learn how to animate between horizontally adjacent screens with a sliding transition. |
| 68 | </dd> |
| 69 | <dt> |
| 70 | <b><a href="cardflip.html">Displaying Card Flip Animations</a></b> |
| 71 | </dt> |
| 72 | <dd> |
| 73 | Learn how to animate between two views with a flipping motion. |
| 74 | </dd> |
| 75 | <dt> |
| 76 | <b><a href="zoom.html">Zooming a View</a></b> |
| 77 | </dt> |
| 78 | <dd> |
| 79 | Learn how to enlarge views with a touch-to-zoom animation. |
| 80 | </dd> |
| 81 | <dt> |
| 82 | <b><a href="layout.html">Animating Layout Changes</a></b> |
| 83 | </dt> |
| 84 | <dd> |
| 85 | Learn how to enable built-in animations when adding, removing, or updating child views in a layout. |
| 86 | </dd> |
| 87 | </dl> |