From fb80c9e0f81ab8687e7b4d930ebf45060f58d632 Mon Sep 17 00:00:00 2001 From: Roman Nurik Date: Wed, 9 Jan 2013 08:35:53 -0800 Subject: docs: Add PageTransformer to animations training class Change-Id: I01f7e5b1fa078d9219edf190e5e8444192cc55f1 --- .../animation/anim_page_transformer_depth.mp4 | Bin 0 -> 56345 bytes .../animation/anim_page_transformer_depth.ogv | Bin 0 -> 96307 bytes .../animation/anim_page_transformer_depth.webm | Bin 0 -> 44936 bytes .../animation/anim_page_transformer_zoomout.mp4 | Bin 0 -> 49676 bytes .../animation/anim_page_transformer_zoomout.ogv | Bin 0 -> 96751 bytes .../animation/anim_page_transformer_zoomout.webm | Bin 0 -> 42908 bytes docs/html/training/animation/cardflip.jd | 10 ++ docs/html/training/animation/crossfade.jd | 10 ++ docs/html/training/animation/layout.jd | 11 +- docs/html/training/animation/screen-slide.jd | 198 ++++++++++++++++++++- docs/html/training/animation/zoom.jd | 10 ++ 11 files changed, 232 insertions(+), 7 deletions(-) create mode 100644 docs/html/training/animation/anim_page_transformer_depth.mp4 create mode 100644 docs/html/training/animation/anim_page_transformer_depth.ogv create mode 100644 docs/html/training/animation/anim_page_transformer_depth.webm create mode 100644 docs/html/training/animation/anim_page_transformer_zoomout.mp4 create mode 100644 docs/html/training/animation/anim_page_transformer_zoomout.ogv create mode 100644 docs/html/training/animation/anim_page_transformer_zoomout.webm mode change 100755 => 100644 docs/html/training/animation/screen-slide.jd (limited to 'docs') diff --git a/docs/html/training/animation/anim_page_transformer_depth.mp4 b/docs/html/training/animation/anim_page_transformer_depth.mp4 new file mode 100644 index 0000000..ba21663 Binary files /dev/null and b/docs/html/training/animation/anim_page_transformer_depth.mp4 differ diff --git a/docs/html/training/animation/anim_page_transformer_depth.ogv b/docs/html/training/animation/anim_page_transformer_depth.ogv new file mode 100644 index 0000000..929735a Binary files /dev/null and b/docs/html/training/animation/anim_page_transformer_depth.ogv differ diff --git a/docs/html/training/animation/anim_page_transformer_depth.webm b/docs/html/training/animation/anim_page_transformer_depth.webm new file mode 100644 index 0000000..37ab4e1 Binary files /dev/null and b/docs/html/training/animation/anim_page_transformer_depth.webm differ diff --git a/docs/html/training/animation/anim_page_transformer_zoomout.mp4 b/docs/html/training/animation/anim_page_transformer_zoomout.mp4 new file mode 100644 index 0000000..598e964 Binary files /dev/null and b/docs/html/training/animation/anim_page_transformer_zoomout.mp4 differ diff --git a/docs/html/training/animation/anim_page_transformer_zoomout.ogv b/docs/html/training/animation/anim_page_transformer_zoomout.ogv new file mode 100644 index 0000000..60b86af Binary files /dev/null and b/docs/html/training/animation/anim_page_transformer_zoomout.ogv differ diff --git a/docs/html/training/animation/anim_page_transformer_zoomout.webm b/docs/html/training/animation/anim_page_transformer_zoomout.webm new file mode 100644 index 0000000..fc599a0 Binary files /dev/null and b/docs/html/training/animation/anim_page_transformer_zoomout.webm differ diff --git a/docs/html/training/animation/cardflip.jd b/docs/html/training/animation/cardflip.jd index ab3eb3a..1477f9f 100644 --- a/docs/html/training/animation/cardflip.jd +++ b/docs/html/training/animation/cardflip.jd @@ -21,6 +21,16 @@ trainingnavtop=true Animate the Card Flip +

+ Try it out +

+
+ Download the sample app +

+ 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 99e879b..2fbb6c0 100644 --- a/docs/html/training/animation/crossfade.jd +++ b/docs/html/training/animation/crossfade.jd @@ -20,6 +20,16 @@ trainingnavtop=true Crossfade the Views +

+ Try it out +

+
+ Download the sample app +

+ Animations.zip +

+
diff --git a/docs/html/training/animation/layout.jd b/docs/html/training/animation/layout.jd index b8e0077..e3a47d6 100644 --- a/docs/html/training/animation/layout.jd +++ b/docs/html/training/animation/layout.jd @@ -11,7 +11,16 @@ trainingnavtop=true
  • Create the Layout
  • Add, Update, or Remove Items from the Layout
    • - +

    + Try it out +

    +
    + Download the sample app +

    + Animations.zip +

    +
    diff --git a/docs/html/training/animation/screen-slide.jd b/docs/html/training/animation/screen-slide.jd old mode 100755 new mode 100644 index 8a7af67..716805e --- a/docs/html/training/animation/screen-slide.jd +++ b/docs/html/training/animation/screen-slide.jd @@ -9,15 +9,26 @@ trainingnavtop=true
    1. Create the Views
    2. Create the Fragment
      3. -
    3. Animate the Screen Slide
      4. +
    4. Add a ViewPager
      5. +
    5. Customize the Animation with PageTransformer
    +

    + Try it out +

    +
    + Download the sample app +

    + 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 { } -

    Screen Slides with ViewPager

    +

    Add a ViewPager

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

    @@ -182,4 +193,179 @@ public class ScreenSlidePagerActivity extends FragmentActivity { } } } - \ No newline at end of file + + + +

    Customize the Animation with PageTransformer

    + +

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

    + + +

    Zoom-out page transformer

    +

    + 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);
+        }
+    }
+}
+
    + +

    Depth page transformer

    +

    +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 5dc2b6c..6a38e7d 100644 --- a/docs/html/training/animation/zoom.jd +++ b/docs/html/training/animation/zoom.jd @@ -19,6 +19,16 @@ trainingnavtop=true Zoom the View +

    + Try it out +

    +
    + Download the sample app +

    + Animations.zip +

    +

    -- cgit v1.1