ViewPager动态变换效果之SCViewPager源码解析

序言：
我们知道在ViewPager中给我们提供了PageTransformer接口用于ViewPager切换的动画效果实现，一般我们需要实现这个接口里的transformPage方法实现切换的动画效果，这样我们就实现了ViewPager中Item之间切换的效果，例如下面的效果（摘自鸿洋博客图片）：

我们发现，这里实现的是Item之间切换的效果，但是每个Item页里面的View并没有动画效果，我们也知道在做App的Guide引导页的时候，通过几个静态的图片展示切换，效果太过平庸，所以这次我们就介绍下SCViewPager这个库如果实现Item的动态变换。效果图来一发：

开源项目地址：https://github.com/sacot41/SCViewPager

一：项目原理概述

我们通过上面的效果图发现，SCViewPager给我们提供了一种更棒的切换效果，效果比以前的静态图片切换展示确实强的太多。下面，我们就简要介绍下SCViewPager效果的实现原理。首先，必须要监听ViewPager的PageScrolled事件，当PageScrolled事件触发时，我们就进行动画的执行，这样就实现了效果。其次是效果怎么设计才能正确展示，这里就需要我们探究源码一步步解析才能明白其中的原理，我们可以简单的以SCViewPager提供的example进行研究下实现。
1、首先看example的布局文件：

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:tools="http://schemas.android.com/tools"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:clipChildren="true"        android:clipToPadding="true"        tools:context=".MainActivity">        <com.dev.sacot41.scviewpager.SCViewPager            android:id="@+id/viewpager_main_activity"            android:layout_width="match_parent"            android:layout_height="match_parent">        </com.dev.sacot41.scviewpager.SCViewPager>        <com.dev.sacot41.scviewpager.DotsView            android:orientation="horizontal"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_centerHorizontal="true"            android:layout_marginBottom="10dp"            android:id="@+id/dotsview_main"        />        <ImageView            android:id="@+id/imageview_main_activity_name_tag"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:paddingLeft="40dp"            android:paddingRight="50dp"            android:layout_alignParentTop="true"            android:rotation="-10"            android:src="@drawable/name_tag"/>        <ImageView            android:id="@+id/imageview_main_activity_currently_work"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="225dp"            android:src="@drawable/currently_work"/>        <ImageView            android:id="@+id/imageview_main_activity_at_skex"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="450dp"            android:src="@drawable/at_skex_2"/>        <ImageView            android:id="@+id/imageview_main_activity_commonly"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="95dp"            android:layout_centerHorizontal="true"            android:src="@drawable/commonly"/>        <ImageView            android:id="@+id/imageview_main_activity_django_python"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="75dp"            android:layout_marginTop="400dp"            android:layout_centerHorizontal="true"            android:src="@drawable/django_python"/>        <ImageView            android:id="@+id/imageview_main_activity_mobile"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="180dp"            android:layout_centerHorizontal="true"            android:src="@drawable/mobile"/>        <ImageView            android:id="@+id/imageview_main_activity_but"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:src="@drawable/but"/>        <ImageView            android:id="@+id/imageview_main_activity_diploma"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="250dp"            android:layout_centerHorizontal="true"            android:src="@drawable/diploma"/>        <ImageView            android:id="@+id/imageview_main_activity_why"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginBottom="50dp"            android:layout_alignParentBottom="true"            android:layout_centerHorizontal="true"            android:src="@drawable/why"/>       <ImageView           android:id="@+id/imageview_main_future"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_centerHorizontal="true"           android:src="@drawable/future"/>        <ImageView            android:id="@+id/imageview_main_arduino"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_below="@id/imageview_main_future"            android:layout_marginTop="20dp"            android:layout_marginLeft="50dp"            android:src="@drawable/arduino"/>        <ImageView            android:id="@+id/imageview_main_raspberry_pi"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_below="@id/imageview_main_arduino"            android:layout_marginTop="40dp"            android:layout_alignParentRight="true"            android:layout_marginRight="50dp"            android:src="@drawable/raspberry_pi_logo"/>        <ImageView            android:id="@+id/imageview_main_connected_device"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="75dp"            android:layout_marginLeft="50dp"            android:src="@drawable/connect_device"/>        <ImageView            android:id="@+id/imageview_main_check_out"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:src="@drawable/check_out"/>        <TextView            android:id="@+id/textview_main_github_link"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:paddingLeft="20dp"            android:paddingRight="20dp"            android:textColor="@color/theme_700"            android:layout_centerHorizontal="true"            android:layout_below="@id/imageview_main_check_out"            android:autoLink="web"            android:textAppearance="@android:style/TextAppearance.Large"            android:text="https://github.com/sacot41"/>        <TextView            android:id="@+id/textview_main_linkedin_link"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:paddingLeft="20dp"            android:paddingRight="20dp"            android:textColor="@color/theme_700"            android:layout_centerHorizontal="true"            android:layout_marginTop="50dp"            android:layout_below="@id/textview_main_github_link"            android:autoLink="web"            android:textAppearance="@android:style/TextAppearance.Large"            android:text="https://ca.linkedin.com/pub/samuel-côté/62/211/22a"/>    </RelativeLayout>

展现的效果：

看到这个效果图是不是一脸懵逼，确实，这种布局效果图出来跟上面的动画效果对比确实让人大吃一惊，这个就是他设计的巧妙之处，根据设计的动画效果，首先在RelativeLayout中将View的起始位置设置布局完毕。

2、接着我们看看MainActivity中怎么实现的：

package com.dev.sacot41.myresume;import android.graphics.Point;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.view.View;import android.view.Window;import android.view.WindowManager;import com.dev.sacot41.scviewpager.DotsView;import com.dev.sacot41.scviewpager.SCPositionAnimation;import com.dev.sacot41.scviewpager.SCViewAnimation;import com.dev.sacot41.scviewpager.SCViewAnimationUtil;import com.dev.sacot41.scviewpager.SCViewPager;import com.dev.sacot41.scviewpager.SCViewPagerAdapter;public class MainActivity extends FragmentActivity {    private static final int NUM_PAGES = 5;    private SCViewPager mViewPager;    private SCViewPagerAdapter mPageAdapter;    private DotsView mDotsView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);        setContentView(R.layout.activity_main);        mViewPager = (SCViewPager) findViewById(R.id.viewpager_main_activity);        mDotsView = (DotsView) findViewById(R.id.dotsview_main);        mDotsView.setDotRessource(R.drawable.dot_selected, R.drawable.dot_unselected);        mDotsView.setNumberOfPage(NUM_PAGES);        mPageAdapter = new SCViewPagerAdapter(getSupportFragmentManager());        mPageAdapter.setNumberOfPage(NUM_PAGES);        mPageAdapter.setFragmentBackgroundColor(R.color.theme_100);        mViewPager.setAdapter(mPageAdapter);        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                mDotsView.selectDot(position);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        final Point size = SCViewAnimationUtil.getDisplaySize(this);        View nameTag = findViewById(R.id.imageview_main_activity_name_tag);        SCViewAnimation nameTagAnimation = new SCViewAnimation(nameTag);        nameTagAnimation.addPageAnimation(new SCPositionAnimation(this, 0,0,-size.y/2));        mViewPager.addAnimation(nameTagAnimation);        View currentlyWork = findViewById(R.id.imageview_main_activity_currently_work);        SCViewAnimation currentlyWorkAnimation = new SCViewAnimation(currentlyWork);        currentlyWorkAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));        mViewPager.addAnimation(currentlyWorkAnimation);        View atSkex = findViewById(R.id.imageview_main_activity_at_skex);        SCViewAnimationUtil.prepareViewToGetSize(atSkex);        SCViewAnimation atSkexAnimation = new SCViewAnimation(atSkex);        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 0, 0, -( size.y - atSkex.getHeight() )));        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 1, -size.x, 0));        mViewPager.addAnimation(atSkexAnimation);        View mobileView = findViewById(R.id.imageview_main_activity_mobile);        SCViewAnimation mobileAnimation = new SCViewAnimation(mobileView);        mobileAnimation.startToPosition((int)(size.x*1.5), null);        mobileAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -(int)(size.x*1.5), 0));        mobileAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -(int)(size.x*1.5), 0));        mViewPager.addAnimation(mobileAnimation);        View djangoView = findViewById(R.id.imageview_main_activity_django_python);        SCViewAnimation djangoAnimation = new SCViewAnimation(djangoView);        djangoAnimation.startToPosition(null, -size.y);        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 0, 0, size.y));        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, size.y));        mViewPager.addAnimation(djangoAnimation);        View commonlyView = findViewById(R.id.imageview_main_activity_commonly);        SCViewAnimation commonlyAnimation = new SCViewAnimation(commonlyView);        commonlyAnimation.startToPosition(size.x, null);        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));        mViewPager.addAnimation(commonlyAnimation);        View butView = findViewById(R.id.imageview_main_activity_but);        SCViewAnimation butAnimation = new SCViewAnimation(butView);        butAnimation.startToPosition(size.x, null);        butAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x,0));        butAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x,0));        mViewPager.addAnimation(butAnimation);        View diplomeView = findViewById(R.id.imageview_main_activity_diploma);        SCViewAnimation diplomeAnimation = new SCViewAnimation(diplomeView);        diplomeAnimation.startToPosition((size.x *2), null);        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x*2,0));        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x*2 ,0));        mViewPager.addAnimation(diplomeAnimation);        View whyView = findViewById(R.id.imageview_main_activity_why);        SCViewAnimation whyAnimation = new SCViewAnimation(whyView);        whyAnimation.startToPosition(size.x, null);        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x, 0));        mViewPager.addAnimation(whyAnimation);        View futureView = findViewById(R.id.imageview_main_future);        SCViewAnimation futureAnimation = new SCViewAnimation(futureView);        futureAnimation.startToPosition(null, -size.y);        futureAnimation.addPageAnimation(new SCPositionAnimation(this, 2, 0, size.y));        futureAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));        mViewPager.addAnimation(futureAnimation);        View arduinoView = findViewById(R.id.imageview_main_arduino);        SCViewAnimation arduinoAnimation = new SCViewAnimation(arduinoView);        arduinoAnimation.startToPosition(size.x * 2, null);        arduinoAnimation.addPageAnimation(new SCPositionAnimation(this, 2, - size.x *2, 0));        arduinoAnimation.addPageAnimation(new SCPositionAnimation(this, 3, - size.x, 0));        mViewPager.addAnimation(arduinoAnimation);        View raspberryView = findViewById(R.id.imageview_main_raspberry_pi);        SCViewAnimation raspberryAnimation = new SCViewAnimation(raspberryView);        raspberryAnimation.startToPosition(-size.x, null);        raspberryAnimation.addPageAnimation(new SCPositionAnimation(this, 2, size.x, 0));        raspberryAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));        mViewPager.addAnimation(raspberryAnimation);        View connectedDeviceView = findViewById(R.id.imageview_main_connected_device);        SCViewAnimation connectedDeviceAnimation = new SCViewAnimation(connectedDeviceView);        connectedDeviceAnimation.startToPosition((int)(size.x *1.5), null);        connectedDeviceAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -(int) (size.x * 1.5), 0));        connectedDeviceAnimation.addPageAnimation(new SCPositionAnimation(this, 3,  - size.x, 0));        mViewPager.addAnimation(connectedDeviceAnimation);        View checkOutView = findViewById(R.id.imageview_main_check_out);        SCViewAnimation checkOutAnimation = new SCViewAnimation(checkOutView);        checkOutAnimation.startToPosition(size.x, null);        checkOutAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));        mViewPager.addAnimation(checkOutAnimation);        View linkedinView = findViewById(R.id.textview_main_linkedin_link);        SCViewAnimation linkedinAnimation = new SCViewAnimation(linkedinView);        linkedinAnimation.startToPosition(size.x, null);        linkedinAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));        mViewPager.addAnimation(linkedinAnimation);        View githubView = findViewById(R.id.textview_main_github_link);        SCViewAnimation githubAnimation = new SCViewAnimation(githubView);        githubAnimation.startToPosition(size.x, null);        githubAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));        mViewPager.addAnimation(githubAnimation);    }}

上面的代码都是按照一个逻辑处理，首先穿件一个SCViewAnimation对象，然后调用该对象的startToPosition方法指定View的起始位置，然后在创建一个动画类型（SCPositionAnimation）添加到SCViewAnimation中即可。实现也是非常简单，主要是动画的起点、终点位置的确定。通过上面的布局和代码，我们可以看出SCViewPager使用起来是非常简单，方便的。那么我们还需要学习更深入一点，看看它的源码分析实现的原理。

二：SCViewPager源码分析

在上面我们简要的看了SCViewPager的使用，现在我们就结合源码分析下实现过程。 首先看看结构图：

（1）、DotsView：底部原点View，自定义的底部圆点
（2）、SCPageAnimation：抽象类，用于定义View的动画效果实现；
（3）、SCPositionAnimation：平移动画效果，一个SCPageAnimation实现的子类
（4）、SCSizeAnimation：大小改变动画效果，SCPageAnimation的实现子类
（5）、SCViewAnimation：视图动画，提供指定动画起始位置的startToPoSition()、addPageAnimation()和applyAnimation()方法，主要负责动画的管理。
（6）、SCViewAnimationUtil：工具类
（7）、SCViewPager：自定义的ViewPager，重写onPageScrolled()方法，实现滑动切换执行动画。
（8）、SCViewPagerAdapter：FragmentStatePagerAdapter的子类，设置ViewPager的Adapter属性。

上面我们已经简单的说了，效果的实现就是通过监听PageScrolled方法来实现，当然仅仅知道这一点还是不够的，比如这些View控件怎么布局的，动画怎么实现的，这些都是技术点，所以我们就深入到各个类学习源码的实现。

1、SCPageAnimation抽象类

public abstract class SCPageAnimation {    public int page;    public abstract void applyTransformation(View onView, float positionOffset);}

在这个抽象类中定义了一个page成员变量和applyTransformation方法，page变量用于标识动画作用在第几个ViewPager页面，applyTransformation方法用于执行动画

2、SCPositionAnimation类：

public class SCPositionAnimation extends SCPageAnimation {    public int xPosition;    public int yPosition;    private float xStartPosition;    private float yStartPosition;    /**     * @param forPage page to apply animation     * @param dx x moving, in dp     * @param dy y moving, in dp     */    public SCPositionAnimation(Context context, int forPage, int dx, int dy) {        this.page = forPage;        this.xPosition = dx;        this.yPosition = dy;        this.xStartPosition = -1;        this.yStartPosition = -1;    }    public void applyTransformation(View onView, float positionOffset) {        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) onView.getLayoutParams();        if (positionOffset <= 0.0001) {            xStartPosition = onView.getTranslationX();            yStartPosition = onView.getTranslationY();            return;        }        onView.setTranslationX((int)(xPosition * positionOffset) + xStartPosition);        onView.setTranslationY((int)(yPosition * positionOffset) + yStartPosition);        onView.requestLayout();    }}

类很简短，继承自SCPageAnimation，该类新增了四个成员变量用于记录控件位置。主要是applyTransformation方法中通过positionOffset(该值介于[0,1))计算View的平移位置，通过setTranslationX/Y方法达到实现效果。

3、SCSizeAnimation源码

public class SCSizeAnimation extends SCPageAnimation {    public float dHeigh;    public float dWidth;    private int startHeigh;    private int startWidth;    /**     *     * @param forPage page to apply animation     * @param dh height variation, in percentage     * @param dw width variation, in percentage     */    public SCSizeAnimation(int forPage, float dh, float dw) {        this.page = forPage;        this.dHeigh = dh;        this.dWidth = dw;    }    @Override    public void applyTransformation(View onView, float positionOffset) {        ViewGroup.LayoutParams param = onView.getLayoutParams();        if(positionOffset <= 0) {            startHeigh = onView.getMeasuredHeight();            startWidth = onView.getMeasuredWidth();            return;        }        param.height = (int)(dHeigh * startHeigh * positionOffset) + startHeigh;        param.width = (int)(dWidth * startHeigh * positionOffset) + startWidth;        onView.setLayoutParams(param);    }}

同样，这个类也是很简短，它新增了startHeight、startWidth两个成员变量，用于记录控件的初始宽高，在applyTransformation方法中通过获取View的LayoutParams属性进行改变控件的大小，以此来实现效果的动态变化。

4、SCViewAnimation类

public class SCViewAnimation {    private View view;    private HashMap<Integer, ArrayList<SCPageAnimation>> pageAnimationMap;    public SCViewAnimation(View inView) {        this.view = inView;        this.pageAnimationMap = new HashMap<Integer, ArrayList<SCPageAnimation>>();    }    public void startToPosition(Integer xPosition, Integer yPosition) {        if (xPosition != null) this.view.setX(xPosition);        if (yPosition != null) this.view.setY(yPosition);        this.view.requestLayout();    }    public void addPageAnimation(SCPageAnimation inPageAnimation) {        ArrayList<SCPageAnimation> animationList = pageAnimationMap.get(inPageAnimation.page);        if (animationList == null) animationList = new ArrayList<SCPageAnimation>();        animationList.add(inPageAnimation);        pageAnimationMap.put(inPageAnimation.page, animationList);    }    public void applyAnimation(int page, float positionOffset) {        ArrayList<SCPageAnimation> animationList = pageAnimationMap.get(page);        if (animationList == null) return;        for(SCPageAnimation animation : animationList) {            animation.applyTransformation(this.view, positionOffset);        }    }}

SCViewAnimation类主要用于管理View的动画，该类包含一个HashMap

public class SCViewAnimationUtil {    public static void prepareViewToGetSize(View view) {        view.measure( View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),  View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());    }    public static Point getDisplaySize(Activity activity) {        Display display = activity.getWindowManager().getDefaultDisplay();        final Point size = new Point();        display.getSize(size);        return size;    }}

工具类，主要有两个方法：
（1）、prepareViewToGetSize(view):调用view的measure()方法测量，获取view的宽高。
（2）、getDisplaySize(activity)：获取屏幕显示的大小

6、SCViewPager类：

public class SCViewPager extends ViewPager {    private ArrayList<SCViewAnimation> mViewAnimation;    public SCViewPager(Context context) {        super(context);        this.mViewAnimation = new ArrayList<SCViewAnimation>();    }    public SCViewPager(Context context, AttributeSet attr) {        super(context, attr);        this.mViewAnimation = new ArrayList<SCViewAnimation>();    }    public void addAnimation(SCViewAnimation inViewAnimation) {        mViewAnimation.add(inViewAnimation);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        super.onPageScrolled(position, positionOffset, positionOffsetPixels);        for (int i = 0; i < mViewAnimation.size(); i++) {            mViewAnimation.get(i).applyAnimation(position, positionOffset);        }    }}

这里是对ViewPager进行各简单的重写，重写了onPageScrolled方法，该方法包含三个参数，position页面的位置,positionOffset页面滑动的比例，取值范围[0,1)，positionOffsetPixels页面滑动的距离，单位px。在这个方法里，遍历所有的SCViewAnimation结合，然后调用applyAnimation方法执行动画。

7、SCViewPagerAdapter类

public class SCViewPagerAdapter extends FragmentStatePagerAdapter {    private ArrayList<SCViewPagerFragment> mFragmentList;    private int mNumberOfPage = 0;    private int mBackgroundColor;    public SCViewPagerAdapter(FragmentManager fm) {        super(fm);        mFragmentList = new ArrayList<>();    }    public void setNumberOfPage(int numberOfPage) {        mNumberOfPage = numberOfPage;    }    public void setFragmentBackgroundColor(int colorResource) {        mBackgroundColor = colorResource;    }    @Override    public Fragment getItem(int position) {        SCViewPagerFragment fragment = null;        if (mFragmentList.size()-1 >= position) fragment = mFragmentList.get(position);        if (fragment == null) {            fragment = new SCViewPagerFragment();            fragment.setBackground(mBackgroundColor);        }        return fragment;    }    @Override    public int getCount() {        return mNumberOfPage;    }    public static class SCViewPagerFragment extends Fragment {        private int color;        public SCViewPagerFragment() {            this.color = R.color.white;        }        public void setBackground(int inColor) {            this.color = inColor;        }        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {            LinearLayout view = new LinearLayout(getActivity());            view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));            view.setOrientation(LinearLayout.VERTICAL);            view.setBackgroundColor(getResources().getColor(this.color));            return view;        }        @Override        public void onActivityCreated(Bundle savedInstanceState) {            super.onActivityCreated(savedInstanceState);        }    }}

在SCViewPagerAdapter类中，我们只关注一个成员变量mNumberOfPage，用于设置我们有多少个页面，然后由系统生成相应个数的Fragment，以此达到滑动效果，这里所有的Fragment只显示包含一个LinearLayout的空布局，不包含我们动画展示的View。

至此，我们针对各个类的源码已经介绍完毕，总体的代码量不多，代码也不复杂，主要是一个巧妙。在这里，使用的Fragemnt内容是不关涉到我们的动画View，我们通过将动画View和ViewPager放在同一页面，然后通过startToPosition指定控件的位置，达到控件的隐藏效果，起始他们都是在MainActivity页面，然后将ViewPager的滑动事件绑定到动画的执行，就可以制作出效果。源码看完了，我们在结合example的例子分析下，比如：

View nameTag = findViewById(R.id.imageview_main_activity_name_tag);SCViewAnimation nameTagAnimation = new SCViewAnimation(nameTag);nameTagAnimation.addPageAnimation(new SCPositionAnimation(this, 0,0,-size.y/2));mViewPager.addAnimation(nameTagAnimation);

首先获取View控件nameTag，然后创建SCViewAnimation类，传入nameTag控件进行绑定，然后添加SCPositionAnimation动画，该动画中指定page=0，dx=0,dy=-size.y/2，最后将该SCViewAnimation添加到ViewPager中的SCViewAnimation集合中。滑动进行动画效果展示。

==========
作者：mr_dsw
博客地址：http://blog.csdn.net/mr_dsw
转载注明出处，谢谢

==========