Skip to content

Optimized for scrolling app intros or making your CV app. Free and open source.

Notifications You must be signed in to change notification settings

nightlight9/WoWoViewPager

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

73 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WoWoViewPager

WoWoViewPager App Intros Example WoWoViewPager CV Example

Optimized for scrolling app intros or making your CV app. Free and open source.
WoWoViewPager combines animations and viewpager. When you are swiping viewpager, you are also controlling the frames of the animation. Just like rewinding time.

Guide

中文文档
Gradle
Note
Demo
Versions
Todo
License

Animations Usage

Basic Animations

  1. Translation Animation
  2. Scale Animation
  3. Alpha Animation
  4. Rotation Animation

Font Size Animations

  1. TextView Size Animation

Color Animations

  1. Background Color Animation
  2. TextView Color Animation
  3. Shape Color Animation
  4. State-List Color Animation
  5. Layer-List Color Animation

Path Animations

  1. Path Animation

Animation Types

  1. Ease
  2. RGB or HSV

Gradle

Just add the "compile 'com.nightonke:wowoviewpager:1.0.1'" in your build.gradle of your module.

dependencies {
    ...
    compile 'com.nightonke:wowoviewpager:1.0.1'
    ...
}

Note

  1. Thanks SCViewPager for giving me inspiration for codes.
  2. Thanks JazzHands for giving me inspiration for animations.
  3. I'll add more animations for WoWoViewPager.

Demo

There is a demo for the current animations that WoWoViewPager supports. And there are App intros example and CV example(the above gifs) in the demo.
WoWo V1.0.1
Or by link:
WoWo V1.0.1 in Github
WoWo V1.0.1 in Fir
Demo Animation Demo Ease Type
You can try every animation and ease type that WoWoViewPager supports.

Animations Usage

Basic Animations

Translation Animation

Translation animation helps to move a view.
Translation animation

/**
 *
 * @param page                The translation animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The translation animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The translation animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromX               The starting horizontal position of this view 
                              relative to its left position, in pixels
                              
 * @param fromY               The starting vertical position of this view 
                              relative to its top position, in pixels
                              
 * @param targetX             The ending horizontal position of this view 
                              relative to its left position, in pixels
                              
 * @param targetY             The ending vertical position of this view 
                              relative to its top position, in pixels
                              
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoTranslationAnimation(
        0, 
        0f, 
        1f,
        findViewById(R.id.test).getTranslationX(),
        findViewById(R.id.test).getTranslationY(),
        -screenW / 2 + WoWoUtil.dp2px(40, this),
        -screenH / 2 + WoWoUtil.dp2px(40, this),
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoTranslationAnimation(
        1, 
        0f, 
        1f,
        -screenW / 2 + WoWoUtil.dp2px(40, this),
        -screenH / 2 + WoWoUtil.dp2px(40, this),
        screenW - WoWoUtil.dp2px(80, this),
        screenH - WoWoUtil.dp2px(80, this),
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

As you can see, the code above helps to make part of effect in the above gif(from page 1 to page 3, 2 translation animations totally). For more codes about the animation, please check the code.

Scale Animation

Scale animation helps to scale a view.
Scale animation

/**
 *
 * @param page                The scale animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The scale animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The scale animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param targetScaleX        Target scale x = target x / original y
 
 * @param targetScaleY        Target scale y = target y / original y
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoScaleAnimation(
        3, 0f, 0.5f,
        2f,
        1f,
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoScaleAnimation(
        3, 0.5f, 1f,
        1f,
        2f,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

You can combine several animations to create a complex animation. For example, you can create 2 translation animations to make a polyline. Let's see the code above. From offset 0 to offset 0.5 starting from page 3, the width of the view doubles. And then, the height of the view doubles from offset 0.5 to offset 1. For more codes about the animation, please check the code.

Alpha Animation

Alpha animation helps to change the opacity of the view, making fading or appearing effects.
Alpha animation

/**
 *
 * @param page                The alpha animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The alpha animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The alpha animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromAlpha           Original alpha
     
 * @param targetAlpha         Target alpha
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoAlphaAnimation(
        3, 0f, 0.5f,
        1,
        0.3f,
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoAlphaAnimation(
        3, 0.5f, 1f,
        0.3f,
        1f,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

That's quite easy to understand. For more codes about the animation, please check the code.

Rotation Animation

Rotation animation helps to rotate a view.
Rotation animation

/**
 *
 * @param page                The alpha animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The alpha animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The alpha animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
 *        _ _ _ _ _ _ _
 *      /|    x
 *     / |
 *    /  |y
 *   /   |
 *  /z   |
 * /     |
 *
 * @param pivotX              The x value of the pivot of this rotation animation
 
 * @param pivotY              The y value of the pivot of this rotation animation
 
 * @param targetX             The target degree on x axis
 
 * @param targetY             The target degree on y axis
 
 * @param targetZ             The target degree on z axis
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoRotationAnimation(
        0, 0f, 1f,
        pivotX, pivotY,
        0,
        0,
        180,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

The code above will cause the view upside down. Notice that in the above gif, the pivot of the 2 textview are different. For more codes about the animation, please check the code.

Font Size Animation

TextView Size Animation

TextView size animation helps to change the font size of textview.

/**
 *
 * @param page                The textview size animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The textview size animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The textview size animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromSize            Original text size in sp
 
 * @param targetSize          Target text size in sp
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoTextViewSizeAnimation(
        0, 0f, 1f,
        50,
        20,
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoTextViewSizeAnimation(
        1, 0f, 1f,
        20,
        60,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

For more codes about the animation, please check the code.

Color Animations

Background Color Animation

Background color animation helps to change the color of background.
Background Color Animation

/**
 *
 * @param page                The background color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The background color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The background color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromColor           Original color
 
 * @param targetColor         Target color
 
 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoBackgroundColorAnimation(
        0, 0f, 1f,
        Color.parseColor("#ff0000"),
        Color.parseColor("#00ff00"),
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

Notice that background color animation can only do its job when the view has the setBackgroundColor() method. For more codes about the animation, please check the code.
What is colorChangeType?

TextView Color Animation

TextView color animation helps to change the font color of textview only.

/**
 *
 * @param page                The textview color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The textview color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The textview color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromColor           Original color
 
 * @param targetColor         Target color
 
 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoTextViewColorAnimation(
        0, 0f, 1f,
        Color.parseColor("#ff0000"),
        Color.parseColor("#00ff00"),
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

Notice that textview color animation can only do its job when the view is textview. For more codes about the animation, please check the code.
What is colorChangeType?

Shape Color Animation

Shape color animation helps to change the shape-drawable background color of view.

/**
 *
 * @param page                The shape-drawable color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The shape-drawable color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The shape-drawable color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromColor           Original color
 
 * @param targetColor         Target color
 
 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoShapeColorAnimation(
        0, 0f, 1f,
        Color.parseColor("#ff0000"),
        Color.parseColor("#00ff00"),
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

Notice that shape-drawable color animation can only do its job when the background of view is shape-drawable.
Like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"  >
    <solid android:color="@color/red"/>
</shape>

For more codes about the animation, please check the code.
What is colorChangeType?

State-List Color Animation

State-List color animation helps to change the state-list-drawable background color of view.

/**
 *
 * @param page                The state-list-drawable color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The state-list-drawable color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The state-list-drawable color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromColor           Original colors, corresponding to the items in xml
 
 * @param targetColor         Target colors, corresponding to the items in xml
 
 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoStateListColorAnimation(
        0, 0f, 1f,
        new int[]{Color.parseColor("#ff0000"), Color.parseColor("#ff0000"), Color.parseColor("#ff0000")},
        new int[]{Color.parseColor("#00ff00"), Color.parseColor("#00ff00"), Color.parseColor("#00ff00")},
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

And the corresponding drawable is:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="10dp" />
            <solid android:color="@color/red" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="2dp" />
            <solid android:color="@color/red"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="2dp" />
            <solid android:color="@color/red"/>
        </shape>
    </item>
</selector>

Notice that state-list-drawable color animation can only do its job when the background of view is state-list-drawable. For more codes about the animation, please check the code.
What is colorChangeType?

Layer-List Color Animation

Layer-List color animation helps to change the layer-list-drawable background color of view.

/**
 *
 * @param page                The layer-list-drawable color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)
                              
 * @param startOffset         The layer-list-drawable color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param endOffset           The layer-list-drawable color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
                              
 * @param fromColor           Original colors, corresponding to the items in xml
 
 * @param targetColor         Target colors, corresponding to the items in xml
 
 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class
 
 * @param easeType            Ease type, please check the ease type section
 
 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoLayerListColorAnimation(
        0, 0f, 1f,
        new int[]{
          Color.parseColor("#000000"), 
          Color.parseColor("#ff0000"), 
          Color.parseColor("#00ff00"), 
          Color.parseColor("#00ff00"), 
          Color.parseColor("#ff0000")},
        new int[]{
          Color.parseColor("#0000ff"), 
          Color.parseColor("#00ff00"), 
          Color.parseColor("#ff0000"), 
          Color.parseColor("#ff0000"), 
          Color.parseColor("#00ff00")},
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

And the corresponding drawable is:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item1"
        android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp">
        <shape android:shape="rectangle">
            <size android:width="200dp"
                android:height="200dp"/>
            <solid android:color="@color/black"/>
        </shape>
    </item>

    <item
        android:id="@+id/item2"
        android:top="20dp" android:left="20dp" android:bottom="100dp" android:right="100dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/red"/>
        </shape>
    </item>
    
    <item
        android:id="@+id/item3"
        android:top="20dp" android:left="100dp" android:bottom="100dp" android:right="20dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/green"/>
        </shape>
    </item>

    <item
        android:id="@+id/item4"
        android:top="100dp" android:left="20dp" android:bottom="20dp" android:right="100dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/green"/>
        </shape>
    </item>
    
    <item
        android:id="@+id/item5"
        android:top="100dp" android:left="100dp" android:bottom="20dp" android:right="20dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/red"/>
        </shape>
    </item>
</layer-list>

Notice that layer-list-drawable color animation can only do its job when the background of view is layer-list-drawable. For more codes about the animation, please check the code.
What is colorChangeType?

Path Animation

Path Animation

Path animation helps to draw a path. And you can add an image to the head of the path like this:
Ease
All you need to do is:

Add this in xml:
<com.nightonke.wowoviewpager.WoWoPathView
    android:id="@+id/pathview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    app:pathColor="@color/white"
    app:pathWidth="5"
    app:headImageId="@drawable/airplane"
    app:headImageWidth="240"
    />

You can set the attributes in xml:

Attribute Describe Type
app:pathColor color of the path resource of color
app:pathWidth width of the path float
app:headImageId image of the head resource of image
app:headImageWidth width of the head float
app:headImageHeight height of the head float
Create a path:

To create a path, you must know something about Path.
I suggest you use the [cubicTo](http://developer.android.com/intl/zh-cn/reference/android/graphics/Path.html#cubicTo(float, float, float, float, float, float)) function to draw a curve and [lineTo](http://developer.android.com/intl/zh-cn/reference/android/graphics/Path.html#lineTo(float, float)) function to draw a line.
You can use these websites to get the 6 parameters of the cubicTo function:
Canvature
BezierTool
As the above gif shows, there are only 3 curves to combine this path:

WoWoPathView pathView = (WoWoPathView)findViewById(R.id.pathview);
ViewGroup.LayoutParams layoutParams = pathView.getLayoutParams();
layoutParams.height = screenH;
// set the pathView a little wider,
// then the airplane can hide
layoutParams.width = screenW + 200;
pathView.setLayoutParams(layoutParams);

// use this to adjust the path
int xoff = -300;
int yoff = screenH - 616 - 300;
float xScale = 1.5f;
float yScale = 1;

Path path = new Path();
path.moveTo(xScale * (565 + xoff), screenH + yoff);
path.cubicTo(
        xScale * (509 + xoff), yScale * (385 + yoff),
        xScale * (144 + xoff), yScale * (272 + yoff),
        xScale * (394 + xoff), yScale * (144 + yoff));
path.cubicTo(
        xScale * (477 + xoff), yScale * (99 + yoff),
        xScale * (596 + xoff), yScale * (91 + yoff),
        xScale * (697 + xoff), yScale * (128 + yoff));
path.cubicTo(
        xScale * (850 + xoff), yScale * (189 + yoff),
        xScale * (803 + xoff), yScale * (324 + yoff),
        xScale * (66 + xoff), yScale * (307 + yoff));

// set the path to pathView
pathView.setPath(path);
ViewAnimation animation = new ViewAnimation(pathView);
animation.addPageAnimaition(new WoWoPathAnimation(
        0, 0f, 1f,
        easeType,
        useSameEaseTypeBack));
wowo.addAnimation(animation);

Ease

To make the animations more lifesome, you can choose different ease type to play the animations.
Ease
Of course you can use linear function. You can find all the ease enums here.

RGB or HSV

All the color changing animation has 2 types, RGB and HSV(Hue [0 .. 360), Saturation [0...1] and Value [0...1] If hsv values are out of range, they are pinned). The HSV changing type may looks more comfortable in nature. For instance, to change red to green, in HSV, it will be red->yellow->green. In RGB, it will be red->some color between red and green->green. But usually the RGB changing type is the good one. Because HSV sometimes looks strange(my opinion). You can see the performance of these 2 types in the gif of Background Color Animation.

Versions

1.0.1

First version for 11 animations.

Todo

  1. Try to add more animations.
  2. Auto-Create path.

License

Copyright 2016 Nightonke

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

About

Optimized for scrolling app intros or making your CV app. Free and open source.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 100.0%