ViewPager的动画效果(学习自慕课网)

先上效果一:

先上效果二:

先上效果三:

首先定义好viewPager控件,其次,是调用一行代码实现动画效果,

pager.setPageTransformer(true,new DepthPageTransformer());

前提是需要做一些准备操作的,且只有api3.0以上才可以有效。

注:因为属性动画是3.0以后才出现的,如果想在3.0以下的手机上实现动画,需要做一些更改,用nineoldandroids框架来代替属性动画。这里先不向下兼容了。如有想向下兼容的朋友,可以访问宏阳大神的博客,地址  http://blog.csdn.net/lmj623565791/article/details/40411921/

public class MainActivity extends AppCompatActivity {

    private ViewPager pager;
    private int[] mImgIds=new int[]{R.drawable.ic_guaid1,R.drawable.ic_guaid2,R.drawable.ic_guaid3,R.drawable.ic_guaid4};
   private List<ImageView> mImages=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager = ((ViewPager) findViewById(R.id.pager));
        //为viewpager添加切换动画效果(api3.0以上)
//效果三
//        pager.setPageTransformer(true,new ZoomOutPageTransformer());
//效果二

//	pager.setPageTransformer(true,new RotateDownPageTransformer());
//效果一

pager.setPageTransformer(true,new DepthPageTransformer());

	

pager.setOffscreenPageLimit(3); pager.setAdapter(new PagerAdapter() { @Override public int getCount() { return mImgIds.length; } @Override public boolean isViewFromObject(View view, Object object) { return view==object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView=new ImageView(MainActivity.this); imageView.setImageResource(mImgIds[position]); container.addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((ImageView)object); } }); }}

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    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) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}
public class RotateDownPageTransformer implements ViewPager.PageTransformer
{  

    private static final float ROT_MAX = 20.0f;
    private float mRot;  

    public void transformPage(View view, float position)
    {  

        Log.e("TAG", view + " , " + position + "");

        if (position < -1)
        { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setRotation( 0);

        } else if (position <= 1) // a页滑动至b页 ; a页从 0.0 ~ -1 ;b页从1 ~ 0.0
        { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            if (position < 0)
            {  

                mRot = (ROT_MAX * position);
                view.setPivotX( view.getMeasuredWidth() * 0.5f);
                view.setPivotY( view.getMeasuredHeight());
                view.setRotation( mRot);
            } else
            {  

                mRot = (ROT_MAX * position);
                view.setPivotX( view.getMeasuredWidth() * 0.5f);
                view.setPivotY(view.getMeasuredHeight());
                view.setRotation( mRot);
            }  

            // Scale the page down (between MIN_SCALE and 1)

            // Fade the page relative to its size.

        } else
        { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setRotation( 0);
        }
    }
}  
时间: 2024-10-12 06:43:10

ViewPager的动画效果(学习自慕课网)的相关文章

ViewPager切换动画效果修改

比如我们点击向右按钮,希望左边的view移动过来,有个平移效果,但是用系统默认的ViewPager切换的时候,会一闪而过.这是为什么呢? 因为viewpager外面其实有个scrollview,你可以使用反射的方法,设置他的scroll时间.代码如下. 主要代码: //第一步: LayoutInflater mInflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View v

【JS学习】慕课网8-17编程练习 网页的返回与跳转

编程练习 制作一个跳转提示页面: 要求: 1. 如果打开该页面后,如果不做任何操作则5秒后自动跳转到一个新的地址,如慕课网主页. 2. 如果点击“返回”按钮则返回前一个页面. 代码如下: 需要注意的是23行要用window.location.href来指定  用window.open 的话是在新页面打开 27行用计时器setInterval来调用函数  也可以用setTimeout 但此时函数内外都要加上即注释掉的25行 10行超链接指向必须是javascript:跳转函数 1 <!DOCTYP

ViewPager切换动画效果改动

比方我们点击向右button,希望左边的view移动过来,有个平移效果,可是用系统默认的ViewPager切换的时候,会一闪而过. 这是为什么呢? 由于viewpager外面事实上有个scrollview,你能够使用反射的方法,设置他的scroll时间.代码例如以下. 主要代码: //第一步: LayoutInflater mInflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE)

iOS UIView动画效果 学习笔记

CGRect frame = _confirmV.frame; [UIView beginAnimations:nil context:nil];//动画定义开始 [UIView setAnimationDuration:0.5];//动画的时长 [UIView setAnimationDelay:0]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector:@selector(removeConfirmV

关于yii的缓存的学习(学习自慕课网---与《YII框架》不得不说的的故事—高效篇)

1.类的延时加载和表的映射 第一张截图主要是实现了类的分别调用,不用再开头把所有的文件都加载了.这样放在if的语句里面,就能加载用到的类 第二张图是实现了类的延时加载,主要是使用了spl_autoload_register 的函数只有当程序新建一个类的的时候,如果系统判断他不存在的话,就会通过那个函数去加载一次.yii也是使用的这个思想. 第三第四张图,是yii使用类的延时加载的方式,在yii的入口文件index.php那里,加载yii.php文件,然后yii.php文件里面也是使用了spl_a

深入css3帧动画实现ps时间轴动画效果steps()(前端网备份)

在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function> .它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps() 函数. steps() 第一个参数 number 为指定的间隔数(必须是正整数),即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态. <!DOCTYPE html> <html> <head> <met

AngularJs学习笔记(慕课网)

1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要在Controller中做数据格式化, ng有很好用的表单控件 不要在Controller里面做数据过滤操作, ng有$filter服务 一般来说, Controller是不会互相调用的, 控制器之间的交互会通过事件进行  ---> 这是强耦合 2. <html ng-app> <di

【JS学习】慕课网7-23编程练习 有关字符串数组

要求:1.显示打印的日期. 格式为类似“2014年03月21日 星期三” 的当前的时间.2.计算出该班级的平均分(保留整数).同学成绩数据如下:"小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76" 首先要知道日期对象的使用与返回函数 然后下面遇到一点问题,一定要认真看各个函数的说明,很多错误就是函数声明没仔细看, 如30行的substring函数终止位置记得要加1!! 如19行的spit函数分隔开以后返回的本身

AngularJs学习笔记-慕课网AngularJS实战

第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3.指令系统 (AngularJs特有的) 4.双向数据绑定(AngularJs特有的) 第2章 基本概念和用法 第3章 核心原理解析 第4章 用AngularJS开发移动APP 第5章 前端自动化测试 TDD(测试驱动开发) 课程地址:http://www.imooc.com/view/156