Basic Usage
To introduce how to use WoWoViewPager, I will take scale animation as an example. Typically, 3 steps are necessary to create animations with WoWoViewPager. Check WoWoScaleAnimationActivity file for more details.
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>
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
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());
After adding PageAnimations to ViewAnimation, we add the ViewAnimation to WoWoViewPager. Then make WoWoViewPager ready for animations.
wowo.addAnimation(viewAnimation);
wowo.ready();
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());
And, you can use addAnimation(View view) method to add a ViewAnimation of a view, which returns a new ViewAnimation, cooperated with add method(return ViewAnimation itself) in ViewAnimation, the code can be shorter.
wowo.addAnimation(findViewById(R.id.test))
.add(WoWoScaleAnimation.builder().page(0).fromXY(1).toXY(0.5).build())
.add(WoWoScaleAnimation.builder().page(1).fromXY(0.5).toXY(4).build())
.add(WoWoScaleAnimation.builder().page(2).start(0).end(0.5).fromX(4).toX(1).keepY(4).build())
.add(WoWoScaleAnimation.builder().page(2).start(0.5).end(1).keepX(1).fromY(4).toY(1).build())
.add(WoWoScaleAnimation.builder().page(3).start(0).end(0.5).keepX(1).fromY(1).toY(3).build())
.add(WoWoScaleAnimation.builder().page(3).start(0.5).end(1).fromX(1).toX(3).keepY(3).build());
In the builder of PageAnimation(WoWoScaleAnimation is a kind of PageAnimation), you can set the Ease type of the animation and determine whether use same ease type when 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, Ease.InCubic for Ease.OutCubic etc. For more introduction of ease, please check Ease Wiki.
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 animations of a view, you can modify them by ViewAnimation:
viewAnimation.setEase(Ease.OutBack); // Set ease type for all page animations.
viewAnimation.setEase(Ease.OutBack, 1); // Set ease type for all page animations at a certain page.
viewAnimation.setUseSameEaseBack(true); // Whether use same ease enum when swiping the view-pager back for all page animations.
viewAnimation.setUseSameEaseBack(true, 1); // Whether use same ease enum when swiping the view-pager back at a certain page.
And also, you can do the same job by WoWoViewPager. When doing this, all the animations of views of WoWoViewPager use the same ease type as you want.
wowo.setEase(Ease.OutBack); // Set ease type for all page animations in all view animations.
wowo.setEase(Ease.OutBack, 1); // Set ease type for all page animations at a certain page in all view animations.
wowo.setUseSameEaseBack(true); // Whether use same ease enum when swiping the view-pager back for all page animations in all view animations.
wowo.setUseSameEaseBack(true, 1); // Whether use same ease enum when swiping the view-pager back at a certain page in all view animations.
As an example of how to use WoWoViewPager, now the code is:
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());
ViewAnimation viewAnimation = new ViewAnimation(findViewById(R.id.test));
viewAnimation.add(WoWoScaleAnimation.builder().page(0).fromXY(1).toXY(0.5).build());
viewAnimation.add(WoWoScaleAnimation.builder().page(1).fromXY(0.5).toXY(4).build());
viewAnimation.add(WoWoScaleAnimation.builder().page(2).start(0).end(0.5).fromX(4).toX(1).keepY(4).build());
viewAnimation.add(WoWoScaleAnimation.builder().page(2).start(0.5).end(1).keepX(1).fromY(4).toY(1).build());
viewAnimation.add(WoWoScaleAnimation.builder().page(3).start(0).end(0.5).keepX(1).fromY(1).toY(3).build());
viewAnimation.add(WoWoScaleAnimation.builder().page(3).start(0.5).end(1).fromX(1).toX(3).keepY(3).build());
wowo.addAnimation(viewAnimation);
wowo.setEase(ease);
wowo.setUseSameEaseBack(useSameEaseTypeBack);
wowo.ready();
Or simplify:
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());
wowo.addAnimation(findViewById(R.id.test))
.add(WoWoScaleAnimation.builder().page(0).fromXY(1).toXY(0.5).build())
.add(WoWoScaleAnimation.builder().page(1).fromXY(0.5).toXY(4).build())
.add(WoWoScaleAnimation.builder().page(2).start(0).end(0.5).fromX(4).toX(1).keepY(4).build())
.add(WoWoScaleAnimation.builder().page(2).start(0.5).end(1).keepX(1).fromY(4).toY(1).build())
.add(WoWoScaleAnimation.builder().page(3).start(0).end(0.5).keepX(1).fromY(1).toY(3).build())
.add(WoWoScaleAnimation.builder().page(3).start(0.5).end(1).fromX(1).toX(3).keepY(3).build());
wowo.setEase(Ease.OutBack);
wowo.setUseSameEaseBack(useSameEaseTypeBack);
wowo.ready();
The effect as below:
Now it's your time to design. Combine the animations supported by WoWoViewPager in your way to make your application guide page like the follows:
You can check the implementations of the example guide pages: Example1 Example2
If you wanna custom your own animation, check this for here.
