+ Animations.zip +
+This lesson shows you how to do a card flip diff --git a/docs/html/training/animation/crossfade.jd b/docs/html/training/animation/crossfade.jd index 99e879bbc0033..2fbb6c00b45b6 100644 --- a/docs/html/training/animation/crossfade.jd +++ b/docs/html/training/animation/crossfade.jd @@ -20,6 +20,16 @@ trainingnavtop=true Crossfade the Views +
+ Animations.zip +
++ Animations.zip +
++ Animations.zip +
+Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows. This lesson shows you how to do screen slides with a {@link android.support.v4.view.ViewPager} provided by the support library. + "{@docRoot}tools/extras/support-library.html">support library. {@link android.support.v4.view.ViewPager}s can animate screen slides automatically. Here's what a screen slide looks like that transitions from one screen of content to the next: @@ -89,7 +100,7 @@ public class ScreenSlidePageFragment extends Fragment { } -
{@link android.support.v4.view.ViewPager}s have built-in swipe gestures to transition through pages, and they display screen slide animations by default, so you don't need to create any. {@link android.support.v4.view.ViewPager}s use @@ -112,12 +123,12 @@ fragment class that you created earlier.
ScreenSlidePageFragment as new pages. The pager adapter also requires that you implement the
{@link android.support.v4.view.PagerAdapter#getCount getCount()} method, which returns the amount of pages the adapter will create (five in the example).
To display a different animation from the default screen slide animation, implement the + {@link android.support.v4.view.ViewPager.PageTransformer} interface and supply it to + the view pager. The interface exposes a single method, {@link android.support.v4.view.ViewPager.PageTransformer#transformPage transformPage()}. At each point in the screen's transition, this method is called once for each visible page (generally there's only one visible page) and for adjacent pages just off the screen. + For example, if page three is visible and the user drags towards page four, + {@link android.support.v4.view.ViewPager.PageTransformer#transformPage transformPage()} is called + for pages two, three, and four at each step of the gesture.
+ +
+ In your implementation of {@link android.support.v4.view.ViewPager.PageTransformer#transformPage transformPage()},
+ you can then create custom slide animations by determining which pages need to be transformed based on the
+ position of the page on the screen, which is obtained from the position parameter
+ of the {@link android.support.v4.view.ViewPager.PageTransformer#transformPage transformPage()} method.
The position parameter indicates where a given page is located relative to the center of the screen.
+It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0.
+When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5. Based on the position of the pages on the screen, you can create custom slide animations by setting page properties with methods such as {@link android.view.View#setAlpha setAlpha()}, {@link android.view.View#setTranslationX setTranslationX()}, or
+ {@link android.view.View#setScaleY setScaleY()}.
When you have an implementation of a {@link android.support.v4.view.ViewPager.PageTransformer PageTransformer},
+call {@link android.support.v4.view.ViewPager#setPageTransformer setPageTransformer()} with
+ your implementation to apply your custom animations. For example, if you have a
+ {@link android.support.v4.view.ViewPager.PageTransformer PageTransformer} named
+ ZoomOutPageTransformer, you can set your custom animations
+ like this:
+ViewPager pager = (ViewPager) findViewById(R.id.pager); +... +pager.setPageTransformer(true, new ZoomOutPageTransformer()); ++ + +
See the Zoom-out page transformer and Depth page transformer +sections for examples and videos of a {@link android.support.v4.view.ViewPager.PageTransformer PageTransformer}.
+ + ++ This page transformer shrinks and fades pages when scrolling between + adjacent pages. As a page gets closer to the center, it grows back to + its normal size and fades in. +
+ +ZoomOutPageTransformer example
+
+public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
+ private static float MIN_SCALE = 0.85f;
+ private static float MIN_ALPHA = 0.5f;
+
+ public void transformPage(View view, float position) {
+ int pageWidth = view.getWidth();
+ int pageHeight = view.getHeight();
+
+ if (position < -1) { // [-Infinity,-1)
+ // This page is way off-screen to the left.
+ view.setAlpha(0);
+
+ } else if (position <= 1) { // [-1,1]
+ // Modify the default slide transition to shrink the page as well
+ float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
+ float vertMargin = pageHeight * (1 - scaleFactor) / 2;
+ float horzMargin = pageWidth * (1 - scaleFactor) / 2;
+ if (position < 0) {
+ view.setTranslationX(horzMargin - vertMargin / 2);
+ } else {
+ view.setTranslationX(-horzMargin + vertMargin / 2);
+ }
+
+ // Scale the page down (between MIN_SCALE and 1)
+ view.setScaleX(scaleFactor);
+ view.setScaleY(scaleFactor);
+
+ // Fade the page relative to its size.
+ view.setAlpha(MIN_ALPHA +
+ (scaleFactor - MIN_SCALE) /
+ (1 - MIN_SCALE) * (1 - MIN_ALPHA));
+
+ } else { // (1,+Infinity]
+ // This page is way off-screen to the right.
+ view.setAlpha(0);
+ }
+ }
+}
+
+
++This page transformer uses the default slide animation for sliding pages +to the left, while using a "depth" animation for sliding pages to the +right. This depth animation fades the page out, and scales it down linearly. +
+ +DepthPageTransformer example
+ Note: During the depth animation, the default animation (a screen slide) still +takes place, so you must counteract the screen slide with a negative X translation. + +For example: + +
+view.setTranslationX(-1 * view.getWidth() * position); ++ +The following example shows how to counteract the default screen slide animation +in a working page transformer: + + +
+
+public class DepthPageTransformer implements ViewPager.PageTransformer {
+ private static float MIN_SCALE = 0.75f;
+
+ public void transformPage(View view, float position) {
+ int pageWidth = view.getWidth();
+
+ if (position < -1) { // [-Infinity,-1)
+ // This page is way off-screen to the left.
+ view.setAlpha(0);
+
+ } else if (position <= 0) { // [-1,0]
+ // Use the default slide transition when moving to the left page
+ view.setAlpha(1);
+ view.setTranslationX(0);
+ view.setScaleX(1);
+ view.setScaleY(1);
+
+ } else if (position <= 1) { // (0,1]
+ // Fade the page out.
+ view.setAlpha(1 - position);
+
+ // Counteract the default slide transition
+ view.setTranslationX(pageWidth * -position);
+
+ // Scale the page down (between MIN_SCALE and 1)
+ float scaleFactor = MIN_SCALE
+ + (1 - MIN_SCALE) * (1 - Math.abs(position));
+ view.setScaleX(scaleFactor);
+ view.setScaleY(scaleFactor);
+
+ } else { // (1,+Infinity]
+ // This page is way off-screen to the right.
+ view.setAlpha(0);
+ }
+ }
+}
+
+
diff --git a/docs/html/training/animation/zoom.jd b/docs/html/training/animation/zoom.jd
index 5dc2b6c25b925..6a38e7d8c71d4 100644
--- a/docs/html/training/animation/zoom.jd
+++ b/docs/html/training/animation/zoom.jd
@@ -19,6 +19,16 @@ trainingnavtop=true
Zoom the View
+ + Animations.zip +
+