viewpage切换动画

近来闲得无聊，觉得有必要学习下viewpage的切换动画效果。

首先是先阅读官网对于viewpage动画的说明和demo:http://developer.android.com/training/animation/screen-slide.html

对于官网给出的demo我已无力吐槽了。。。

所以还是根据官网的Demo自己修改下吧！

省去布局文件，我们直接上Fragment的代码，主要用来显示，没有什么代码，很简单，不解释。

/**
 * Created by victor on 2016/5/12.
 */
public class ScreenSlidePageFragment extends Fragment {public static ScreenSlidePageFragment newInstance(int redId) {ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("tag", redId);
        fragment.setArguments(bundle);
        return fragment;
    }@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {Bundle bundle = getArguments();
        ImageView imageView = new ImageView(getContext());
        if (bundle != null) {imageView.setImageResource(bundle.getInt("tag"));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        }return imageView;
    }
}

接下来才是我们要看的重头戏。

先是简单的viewpage布局

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="true"/>

然后是我们的主控制器ScreenSlidePagerActivity，用来控制Fragment的切换，也就是上面的图片的显示切换效果；

import android.support.v4.app.FragmentActivity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

import com.example.viewpageanim.com.example.viewpageanim.transformer.ScaleInTransformer;

public class ScreenSlidePagerActivity extends FragmentActivity {private static final int IMAGES[] = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f};
    /**
     * The number of pages (wizard steps) to show in this demo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager mPager;

    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);

        mPager.setCurrentItem(1); // 默认显示第二页，当然显示页数至少需要2页

        mPager.setPageTransformer(true, new ScaleInTransformer());    }    /**     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in     * sequence.     */    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {        public ScreenSlidePagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return ScreenSlidePageFragment.newInstance(IMAGES[position]);        }        @Override        public int getCount() {            return NUM_PAGES;        }    }}

代码量很少，但是却实现了我们常用的轮播图效果。

下面我们来具体分析下。

onCreate中对pageview实例化，然后设置对应的Adapter，最后设置我们需要自定义的动画接口类ZoomOutPageTransformer
。

@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_screen_slide);

    mPager = (ViewPager) findViewById(R.id.pager);
    mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
    mPager.setAdapter(mPagerAdapter);
    mPager.setOffscreenPageLimit(3);
    mPager.setPageTransformer(true, new ZoomOutPageTransformer());

    mPager.setCurrentItem(1); // 默认显示第二页，当然显示页数至少需要2页

而ScreenSlidePagerAdapter中设置了固定的5页图片显示，很简单，没什么好说的。

另外我们最好再设置一下viewpage的缓存个数：

mPager.setOffscreenPageLimit(3);//设置缓存的页面数量

接下来就是来实现我们的PageTransformer接口了。

先看效果图：

不多说，上代码：

import android.annotation.TargetApi;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * Created by Victor on 2016/5/13.
 */
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {

private static final float MIN_SCALE = 0.75f;
    private static final float DEFAULT_MAX_ROTATE = 12.0f;
    private static final float MIN_ALPH = 0.4f;

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)public void transformPage(View view, float position) {int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);
        } else if (position <= 1) {if (position < 0) //[0,-1] ;[-1,0]
            {float scaleFactor = MIN_SCALE + (1 + position) * (1 - MIN_SCALE) ;
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

                float alphFactor = MIN_ALPH + (1 + position) * (1 - MIN_ALPH) ;
                view.setAlpha(alphFactor);

                view.setRotation(DEFAULT_MAX_ROTATE * position);

            } else //[0,1] ;[1,0]
            {float scaleFactor = MIN_SCALE + (1 - position) * (1 - MIN_SCALE);
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

                float alphFactor = MIN_ALPH + (1 - position) * (1 - MIN_ALPH) ;
                view.setAlpha(alphFactor);

                view.setRotation(DEFAULT_MAX_ROTATE * position);
            }} else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }}
}

这就是根据谷歌官网给的滑动缩放动画类修改后的动画效果，其中包括alph变化效果、缩放效果和旋转效果。要实现pageview的动画效果，我们必须实现接口

ZoomOutPageTransformer implementsViewPager.PageTransformer;

然后设置mPager.setPageTransformer(new ZoomOutPageTransformer());

看完代码后，下面我们来解释下pageview的position区间是什么意思。

动画的整个区间范围是[-Infinity,+Infinity]，这个范围又分为3个小范围。

--为了方便分析，我们假设有A、B、C三页，设置默认显示第二页B--

mPager.setCurrentItem(1); // 默认显示第二页，当然显示页数至少2页

区间[-Infinity, -1)对应的是第一页A不可见视图；

区间[1, + Infinity)对应的是第三页C不可见视图；

区间[-1,1]就是我们在滑动过程中出现的两页视图

注意：这里默认pageview的属性android:clipChildren="true",所以当动画停下来后，pageview只有当前页可见。

而对于android:clipChildren="false"的情况需要另外分析。我们先从简单的入手。

所以现在我们关心的就是[-1,1]区间的动画怎么实现。[-1,1]区间又可以分为两个部分：

手势：向右滑动

[-1,0)区间，即将出现的是A页，此时的动画是A页的动画。

那么(0,1]区间，则表示的是B页正在向右消失，此时是B页的动画。

手势：向左滑动

(0, -1]区间，表示的是B页正在向左消失，此时是B页的动画。

那么[1,0)区间，则表示的是C页正在向左，此时是C页的动画。

需要注意的是，不同的手势，[-1,1]区间的变化范围不同。网上有部分资料对于区间[-1,1]的解释有误，或混乱！

搞清楚了[-Infinity,+Infinity]区间的意义，那么写动画就方便多了。

看完之后，你的脑袋里是否有Ding的一一声呢？赶紧打开死丢丢，打造出一个属于你的ViewPage切换效果吧！

另外，我们注意到Viewpage是在3.0之后引入的，所以对于3.0之前的版本没有效果。但是已经有大神给出了解决方案，

那就是使用nineoldandroids来实现动画效果，自定义ViewPage。

源码都在上面了，就不上传了。

如分析有问题，欢迎回复讨论。

内容参考连接：http://blog.csdn.net/lmj623565791/article/details/51339751，感谢鸿洋大神

http://blog.csdn.net/lmj623565791/article/details/40411921/ 解决viewpage版本的向下兼容问题

https://github.com/luhaoaimama1/Zbanner

viewpage切换动画相关推荐

Android项目实战（四）：ViewPager切换动画（3.0版本以上有效果）
原文:Android项目实战(四):ViewPager切换动画(3.0版本以上有效果) 学习内容来自"慕课网" 一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换 ...
用Angular制作单页应用视图切换动画
视图,动画单页应用(Single Page Web Application)往往有一个基本的要点,那就是把多个视图集成到一个网页内,然后去控制这些视图的显示和隐藏.此外,视图的切换动作几乎都会引入动 ...
Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节 ...
Android的Activity屏幕切换动画(一)-左右滑动切换
为什么80%的码农都做不了架构师?>>> 这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过 ...
Android -- ViewPager切换动画，PageTransformer
transformPage(View view, float position) view就是滑动中的那个view,position这里是float类型,是当前滑动状态的一个表示,比如当滑动到正全屏时 ...
Android开发中activity切换动画的实现
(1)我们在MainAcitvity中定义两个textview,用于点击触发切换Activity事件,下面是布局文件代码. <LinearLayoutandroid:layout_width=& ...
android activity切换动画
今天,实在没有什么可以写的内容,在网上找了好久,才决定写今天的内容.自己还是想保持每天写博客的习惯. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左 ...
Android 编程下设置 Activity 切换动画
为 Activity 设置切换动画我们知道,我们可以在 AndroidManifest.xml 文件中,通过 android:theme 属性设置 Activity 的主题.主题中定义了关于 Act ...
转 Android的Activity屏幕切换动画(一)-左右滑动切换
这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下 ...
android 应用切换动画,怎么在Android应用中利用Activity对动画进行切换
怎么在Android应用中利用Activity对动画进行切换发布时间:2020-11-27 16:19:53 来源:亿速云阅读:107 作者:Leah 今天就跟大家聊聊有关怎么在Android应用 ...

viewpage切换动画

viewpage切换动画相关推荐

最新文章

热门文章