【开源】ParallaxPager视差动画效果的ViewPager

ParallaxPager视差动画效果的ViewPager

  •  https://github.com/prolificinteractive/ParallaxPager

    介绍：

    ViewPager在滑动page的时候页面中的子View会有一些动画效果，不同的元素可以从不同的方向消失或者是从不同的方向进入，形成视差错觉。

    运行效果：

 

使用说明：

首先在xml中引入ParallaxContainer：

1
2
3
4
<com.prolificinteractive.parallaxpager.ParallaxContainer
      android:id="@+id/parallax_container_1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

然后为ViewPager的每一个页面的布局都必须在资源文件中有一个xml文件与之对应，这些xml中的子view可以加上不同的属性(x_in、x_out等)以展示动画：

比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:x_in="@dimen/parallax_speed_medium"
      app:x_out="@dimen/parallax_speed_fast"
      app:y_in="@dimen/parallax_speed_medium_rev"
      app:y_out="@dimen/parallax_speed_fast"
      app:a_in="@dimen/parallax_speed_very_fast"
      app:a_out="@dimen/parallax_speed_very_fast"
      android:text="@string/text_1"
      />
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:x_in="@dimen/parallax_speed_medium_rev"
      app:x_out="@dimen/parallax_speed_fast"
      app:y_in="@dimen/parallax_speed_medium"
      app:y_out="@dimen/parallax_speed_fast_rev"
      app:a_in="@dimen/parallax_speed_very_fast"
      app:a_out="@dimen/parallax_speed_very_fast"
      android:text="@string/text_2"
      />
</LinearLayout>

然后在activity中这样使用ParallaxContainer和这些子页面：

1
2
3
4
5
6
7
8
9
10
// find the parallax container
ParallaxContainer parallaxContainer = (ParallaxContainer) findViewById(R.id.parallax_container);
// specify whether pager will loop
parallaxContainer.setLooping(true);
// wrap the inflater and inflate children with custom attributes
parallaxContainer.setupChildren(getLayoutInflater(),
    R.layout.parallax_view_1,
    R.layout.parallax_view_2,
    R.layout.parallax_view_3,
    R.layout.parallax_view_4);

posted on 2015-03-25 12:24  wasdchenhao  阅读(309)  评论(0)    收藏  举报

导航