viewpager简单3d滑动效果

Screenshot_2018-01-04-10-18-21-90.png

效果实现很简单,通过设置viewpager的setPageTransformer,自定义一个ViewPager.PageTransformer实现
可以看出

    public interface PageTransformer {
        /**
         * Apply a property transformation to the given page.
         *
         * @param page Apply the transformation to this page
         * @param position Position of page relative to the current front-and-center
         *                 position of the pager. 0 is front and center. 1 is one full
         *                 page position to the right, and -1 is one page position to the left.
         */
        void transformPage(View page, float position);
    }

PageTransformer借口内部只有transformPage一个方法,
transformPage有两个参数:
view :表示viewpager移动的view
position : 范围从(-3,3)

实现方式:


    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @Override
    public void transformPage(View view, float position) {
        view.setPivotY(view.getHeight() / 2);
        if (position < -1) { // [-Infinity,-1)
            //设置旋转轴
            view.setPivotX(0);
            //以y轴为平行旋转
            view.setRotationY(1 * mMaxRotate);

        } else if (position <= 1) { // [-1,1]
            if (position < 0)//[0,-1]
            {
                view.setPivotX(0);
            } else//[1,0]
            {
                view.setPivotX(view.getWidth());
            }
            view.setRotationY(-position * mMaxRotate);


        } else { // (1,+Infinity]
            view.setPivotX(view.getWidth());
            view.setRotationY(-1 * mMaxRotate);
        }

//        Log.d("pageTransform",view.toString()+"    "+position+"   "+view.getWidth());

        view.setTranslationX(-(view.getWidth() - pPix - 40)*position);
    }

项目地址:
https://github.com/dengzhi00/EfViewpager

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容