Skip to content

Basic Usage

Weiping Huang edited this page Apr 4, 2017 · 7 revisions

To introduce how to use WoWoViewPager, I will take scale animation as an example. Typically, 3 steps are need to create animations with WoWoViewPager. Check the activity class file for more details.

Add WoWoViewPager

Add WoWoViewPager in the .xml file of the activity.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    tools:context="com.nightonke.wowoviewpagerexample.WoWoScaleAnimationActivity">

    <com.nightonke.wowoviewpager.WoWoViewPager
        android:id="@+id/wowo_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <!--The view that need to play a scale animation-->
    <View
        android:id="@+id/test"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:background="@drawable/background_scale"
        />

    ...

</RelativeLayout>

Adapter

Set the adapter of WoWoViewPager. For convenience, you can use WoWoViewPagerAdapter to do that job.

wowo = (WoWoViewPager)findViewById(R.id.wowo_viewpager);
wowo.setAdapter(WoWoViewPagerAdapter.builder()
        .fragmentManager(getSupportFragmentManager())
        .count(fragmentNumber())                       // Fragment Count
        .colorsRes(fragmentColorsRes())                // Colors of fragments, with transparent as default
        .build());

And of course, you can use your own adapter for WoWoViewPager if needed. The adapter does not influence the animations but just contents of fragments. If you wanna know why, check the principle of WoWoViewPager

Animations

Firstly, for each view that needs to play an animation, we need to create a ViewAnimation for it.

ViewAnimation viewAnimation = new ViewAnimation(findViewById(R.id.test));

Then, for each animation of the view, we need to create a kind of PageAnimation to perform the animation. Let's say we want the view scale down its width and height to 0.5 in proportion when scrolling WoWoViewPager from first page to the second.

viewAnimation.add(WoWoScaleAnimation.builder()
        .page(0)   // Do the animation from page 0 to page 0 + 1
        .start(0)  // Animation starts at the start of the scrolling. 0.5 means the animation
                   // starts when half scrolling.
        .end(1)    // Animation ends at the end of the scrolling.  0.5 means the animation
                   // ends when half scrolling.
        .fromX(1)  // Animation starts from width 1(As a proportion of the view's unscaled width.
                   // A value of 1 means that no scaling is applied.)
        .toX(0.5)  // Animation ends to width 0.5(Same as above)
        .fromY(1)  // Animation starts from height 1(Same as above)
        .toY(0.5)  // Animation ends to height 0.5(Same as above)
        .build());

And, you don't need to write too much methods in builder-pattern. The default value of start is 0 and 1 for end. Moreover, if the values of original x and y are the same, you can use fromXY method.

viewAnimation.add(WoWoScaleAnimation.builder().page(0).fromXY(1).toXY(0.5).build());

In the builder of PageAnimation(WoWoScaleAnimation is a kind of PageAnimation), you can set the Ease type of the animation and set whether use same ease type when WoWoViewPager is scrolling back. If the sameEaseBack method gets a false input, then the animation will use a correspondingly opposite ease type when scrolling back. For instance, Ease.OutBack for Ease.InBack.

viewAnimation.add(WoWoScaleAnimation.builder().page(0).fromXY(1).toXY(0.5).ease(Ease.OutBack).sameEaseBack(true).build());

The default value of ease is Ease.Linear and true for sameEaseBack method. If you use the same ease type and same boolean value for sameEaseBack method for all