-
Notifications
You must be signed in to change notification settings - Fork 451
Basic Usage
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 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());
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
Basic Animations
- Position Animation
- Position 3D Animation
- Translation Animation
- Translation 3D Animation
- Scale Animation
- Alpha Animation
- Rotation Animation
- Elevation Animation
TextView Animations
Color Animations
- Background Color Animation
- Shape Color Animation
- State-List Color Animation
- Layer-List Color Animation
Interface Expansibility