Path Animation

WoWoPathAnimation helps to play an animation with a path and a image-head. It changes the process of WoWoPathView to make the animation effect. Check the demo activity for more details.

Add WoWoPathView

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.nightonke.wowoviewpagerexample.WoWoPathAnimationActivity">

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

    <com.nightonke.wowoviewpager.WoWoPathView
        android:id="@+id/path_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        app:wowo_pathColor="@android:color/white"
        app:wowo_pathWidth="2dp"
        app:wowo_dynamicPath="true"
        app:wowo_headImageSrc="@drawable/airplane"
        app:wowo_headImageWidth="90dp"
        />

    <TextView style="@style/PageIndexTextView" />

</RelativeLayout>

The attributes of WoWoPathView:

app:wowo_dashPath Boolean value to determine whether the path is a dash path.
app:wowo_dashPathSegmentLength The segment line length of the dash path.
app:wowo_dashPathPaddingLength The padding line length of the dash path.
app:wowo_dynamicPath Whether the path keeps moving as the above gif shows.
app:wowo_dynamicPathSpeed The speed of dynamic-path-movement.
app:wowo_pathColor The color of the path.
app:wowo_pathWidth The width of the path.
app:wowo_headImageSrc The resource of the image-head.
app:wowo_headImageWidth The width of the image-head.
app:wowo_headImageHeight The height of the image-head.

Notice the dash and dynamic is only available from Lollipop. I cannot make the path moving below API 21. If someone finds the solution, please tell me or make a PR.

Add Animation

The next step is to add a path to WoWoPathView and create a WoWoPathAnimation:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WoWoPathView pathView = (WoWoPathView) findViewById(R.id.path_view);

    // For different screen size, try to adjust the scale values to see the airplane.
    float xScale = screenW / 720f;
    float yScale = screenH / 1280f;

    pathView.newPath()
            .pathMoveTo(screenW / 2, screenH + yScale * 100)
            .pathCubicTo(xScale * 313, screenH - yScale * 531,
                    xScale * (-234), screenH - yScale * 644,
                    xScale * 141, screenH - yScale * 772)
            .pathCubicTo(xScale * 266, screenH - yScale * 817,
                    xScale * 444, screenH - yScale * 825,
                    xScale * 596, screenH - yScale * 788)
            .pathCubicTo(xScale * 825, screenH - yScale * 727,
                    xScale * 755, screenH - yScale * 592,
                    xScale * (-100), screenH - yScale * 609);

    ViewAnimation animation = new ViewAnimation(pathView);
    animation.add(WoWoPathAnimation.builder().page(0).from(0).to(1).path(pathView).build());
    wowo.addAnimation(animation);
    wowo.setEase(ease);
    wowo.setUseSameEaseBack(useSameEaseTypeBack);
    wowo.ready();
}

You can use the setPath method of WoWoPathView to define the track of the animation with an existed Path. Or newPath method or create a new path like the above code. WoWoPathView defines the same methods as Path, like pathMoveTo, pathLineTo, pathQuadTo, etc.