SeniorUI20_PageTransformer实现视差、3D翻转、抓牌、元素等各种效果

本文链接：https://blog.youkuaiyun.com/baopengjian/article/details/103298668

本文深入解析ViewPager中PageTransformer接口的应用，展示如何通过transformPage方法实现多种动画效果，包括缩放、旋转及视差动画等，为移动应用界面设计提供丰富的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 PageTransformer

     * @param reverseDrawingOrder true if the supplied PageTransformer requires page views
     *                            to be drawn from last to first instead of first to last.
     * @param transformer PageTransformer that will modify each page's animation properties
     */
    public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
        setPageTransformer(reverseDrawingOrder, transformer, View.LAYER_TYPE_HARDWARE);
    }

Viewpager 的setPageTransformer实现每个Pager切换时的各种效果
PageTransformer

 /**
     * A PageTransformer is invoked whenever a visible/attached page is scrolled.
     * This offers an opportunity for the application to apply a custom transformation
     * to the page views using animation properties.
     *
     * <p>As property animation is only supported as of Android 3.0 and forward,
     * setting a PageTransformer on a ViewPager on earlier platform versions will
     * be ignored.</p>
     */
    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);
    }

此方法是滑动的时候每一个页面View都会调用该方法

view:当前的页面
position:当前滑动的位置
视差效果：在View正常滑动的情况下，给当前View或者当前view里面的每一个子view来一个加速度
而且每一个加速度大小不一样。
-1~0
0~1

二 transformPage方法实现不同效果

1 效果一

在这里插入图片描述

@Override
public void transformPage(View view, float position) {
	view.setScaleX(1-Math.abs(position));
	view.setScaleY(1-Math.abs(position));
}

2 效果二

在这里插入图片描述

@Override
public void transformPage(View view, float position) {
	view.setScaleX(Math.max(0.9f,1-Math.abs(position)));
	view.setScaleY(Math.max(0.9f,1-Math.abs(position)));
}

3 3D翻转

在这里插入图片描述

@Override
public void transformPage(View view, float position) {
			view.setPivotX(position<0f?view.getWidth():0f);//左边页面：0~-1；右边的页面：1~0
			view.setPivotY(view.getHeight()*0.5f);
			view.setRotationY(position*45f);//0~90度
}

4 3D内翻转

在这里插入图片描述

@Override
public void transformPage(View view, float position) {
 	//效果4 3D内翻转
	view.setPivotX(position<0f?view.getWidth():0f);
	//左边页面：0~-1；右边的页面：1~0
	view.setPivotY(view.getHeight()*0.5f);
	view.setRotationY(-position*45f);//0~90度
}

5 抓牌效果

在这里插入图片描述

@Override
public void transformPage(View view, float position) {
 	view.setPivotX(view.getWidth()*0.5f);//左边页面：0~-1；右边的页面：1~0
	view.setPivotY(view.getHeight()*0.5f);
	view.setRotationY(-position*45f);//0~90度
}

6 视差动画

在这里插入图片描述

@Override
public void transformPage(View view, float position) {
	 if(position<1&&position>-1){
			//找到里面的子控件
			ViewGroup v = (ViewGroup) view.findViewById(R.id.rl);
			int childCount = v.getChildCount();
			for (int i = 0; i < childCount; i++) {
				View childView = v.getChildAt(i);
				float factor = (float) Math.random()*3;
				if(childView.getTag()==null){
					childView.setTag(factor);
				}else{
					factor = (float) childView.getTag();
				}
				/**每一个子控件达到不同的视差效果，translationX是不一样的
				 * position : 0 ~ -1
				 * translationX: 0 ~ childView.getWidth();
				 */
				childView.setTranslationX(factor*childView.getWidth()*position);
			}
		}
}

注意：以上代码还可以进行组合，如缩放和旋转组合到一起，形成新的动画效果