viewpager简单3d滑动效果

作者: 君莫醉 | 来源:发表于2018-01-04 10:33 被阅读88次
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

相关文章

网友评论

    本文标题:viewpager简单3d滑动效果

    本文链接:https://www.haomeiwen.com/subject/knolnxtx.html