打造APP引导页3D切换特效

野性酷女 2022-08-09 05:09 181阅读 0赞

众所周知，一款好的APP，肯定有个很炫的APP引导页或者一个启动页，一个很炫的APP的引导页，肯定会为你的APP瞬间提高逼格，使得APP的用户体验瞬间倍增。那么接下来就给出一个API（setPageTransformer），利用这个API你可以制作出很多意想不到的APP引导页效果。当然这个效果用在引导页上是有点大材小用，假如如果是在ViewPager中放入几个Fragment，并且Fragment切换是这样的3D的效果，想想你的主界面是个3D的Fragment进行且切换，或者你的主界面的Fragment是个缩放的效果进行切换。是不是想想都有点小激动，那么让我们开始吧。

一、引导页制作的思想：  
因为要实现页面的滑动所以采用ViewPager这个容器，因为这里不需要进行页面逻辑处理  
所以ViewPager可以直接放入一个View对象即可，但是为了以后的方便这里使用的Fragment  
，在ViewPager中放入若干个Fragment。  
二、3D引导页制作过程注意的问题以及遇到的问题:  
1、在MainActivity中设置页面滑动监听器setPageTransformer的时候，需要实现一个PageTransformer接口，  
并且重写里面方法transformPage的时候发现代码中没有 任何的错误，  
但是整个代码会有一个红叉，找了很久就是找不到错误，后来发现是sdk的版本指定的问题，  
直接在AndroidManifest.xml文件中修改最小sdk的版本改高些即可  
2、就是重写玩transfromPage方法后都没什么错误，一运行，第一个页面显示正常，当用手指去滑动第二个页面的时候程序直接崩溃了，  
而且log打印出了错误是Exception dispatching input event，还附带报了空指针错误，找了好久。后来发现transformPage方法中View获取的id  
就是3个Fragment的父布局的id，这个三个Fragment布局id必须一样才可以。  
三、引导页的制作步骤:  
1 引导页的布局：  
是在相对布局下面放一个ViewPager控件，并且放入俩个线性布局，并且这两个线性布局处于不同的层级，也即是  
这两个布局文件是重合的。一个线性布局，是放入下面进行页面切换时，小圆点的高亮显示的三个小圆点的ImageView控件，另一个则是  
放入当页面滑到第三个页面时，也即是最后一个页面时，需要把第一个线性布局中的小圆点remove掉，并在第二个线性布局中放入一个  
"立即体验"图片按钮，ImageView对象  
2 ViewPager中的页面实现:  
首先，在initView()方法中获取到ViewPager控件对象，然后给ViewPager设置一个适配器  
然后，因为我们是在ViewPager中放Fragment，所以在自定义适配器的时候需要去继承FragmentStatePagerAdapter，并且整个  
MainActivity不再是继承Activity而是继承FragmentActivity，自定义适配器并且还要去重写其中的方法  
第一个是构造方法，第二个是getCount()方法，返回ViewPager中有多少个Fragment，第三个就是具体返回  
当前的Fragment显示的内容。所以则为需要将每一个的Fragment与它相应的布局文件绑定在一起。  
注意：由于这里要实现的引导页，三个页面都差不多，所以可以重用一个Fragment。  
3 引导页中的小圆点的实现以及滑到最后一个页面的时候动态出现'立即体验'按钮  
3.1首先要给ViewPager设置一个页面滑动改变的监听器，并且重写其中的onPageSelected方法  
3.2先把一个布局linear父线性布局中的所有的VIew先remove，因为小圆点是动态创建的，如果滑过一个页面  
就会重建三个小圆点，如果不先remove则会产生6个小圆点的出现。  
3.3initCircleView()初始化小圆点的方法：  
/\*初始化下面小圆点的方法\*/  
public void initCircleView() \{  
for (int i = 0; i < layoutId.length; i++) \{  
ImageView iv=new ImageView(this);  
if (i==0) \{  
iv.setImageResource(R.drawable.circle\_two);  
\}else\{  
iv.setImageResource(R.drawable.circle);  
\}  
iv.setPadding(12, 3, 12, 3);  
linear.addView(iv);  
\}  
\}

3.4 然后调用一个自定义的setcurrentSelector方法，并且该方法会把当前Fragment的索引作为参数传进来  
setcurrentSelector方法的实现是先判断当前的position是否是最后一个索引，若是则需要把第一个线性布局中的所有view Remove掉  
并重新创建一个ImageView对象，也即是"立即体验"图片按钮。如果不是第一个position那就把小圆点通过initCircleView()重新初始化出来，  
此时并且把第二个线性布局remove掉。(以防当滑到最后一个页面时又滑回来按钮不消失的问题)，  
接着就是实现返回当前的position时，并把此时的position的小圆点换个颜色以实现高亮显示。  
3.5做到这里实现一般的引导页已经制作完成，接下来就是加特效了  
4 给ViewPager中的Fragment加上滑动时的特效：  
4.1 首先，在MainActivity中设置一个页面滑动监听器，setPageTransformer页面滑动监听器，  
第一个参数是个Boolean类型，第二个则是PageTransfromer接口  
VP.setPageTransformer(true, new MyTransformerPager());  
4.2 接着就是实现PageTransfromer接口，自定义一个MyTransformerPager类并去实现PageTransfromer接口重写transformPage方法  
4.3 transformPage方法具体实现:  
/\*  
position参数就是页面左边的位置  
\* 当我们的ViewPager滑动的时候，每一个页面都会回调这个方法  
\* view：某个页面对应的视图，就是布局XML  
\*/  
public void transformPage(View view, float position) \{  
\}  
4.4 position的详解(position很重要是实现加特效的关键):  
position 就是页面的左边位置，例如我们有三个页面，第一个页面的左边的为-1，第二个页面的左边为0，第三个页面的左边为1  
所以position是浮点型且变化的区间是(-1,1)<--->-1 ~ 0 ~ 1。  
5 加特效:  
5.1给每个Fragment布局中的子控件加一个滑动时的加速的效果，加速顾名思义必须要有一个加速偏移量  
首先，需要判断position的区间范围是否在(-1,1)之中。要想实现子控件的加速效果  
所以先获取到父容器，然后利用getChildCount()获取到父容器下的所有子控件，  
并给每个子控件设置一个加速偏移量  
5.2  
public void transformPage(View view, float position) \{  
//渐变效果判断区间（-1，1）  
if (position<1&&position>-1) \{  
ViewGroup r1=(ViewGroup) view.findViewById(R.id.rl);//此处获取的id值，三个Fragment的布局id都必须一样为rl,否则会报错误  
//视差加速效果，让里面的子控件都给一个加速偏移量  
for (int i = 0; i < r1.getChildCount(); i++) \{  
float factor =(float) (Math.random()\*2);//给出一个随机数使得每个控件的加速度大小不一致，才会看出效果  
View child=r1.getChildAt(i);  
//这里的position变化区间是-1~0~1,所以当向左边（X轴负方向）加速滑动的时候，此时需要一个负方向的加速度，position正好为负数  
//向右加速滑动的时候有正向加速度，然后此时的position为正的

//这样会出现一个抖动的效果，因为子控件每次进入for循环都会随机的加速一次，每次都会调用factor而每次的factor都是不一样的，所以会有时候快有时候慢  
//这时候就需要这样处理，第一次调用后，第二次还是用这个值，那如何用view绑定一个随机数呢？？  
if (child.getTag()==null) \{//如果是第一次调用，就设置随机数  
child.setTag(factor);  
\}else\{//如果不是第一次调用，就不需要再次调用，直接取第一次调用的获取到的随机数  
factor=(Float) child.getTag();  
\}  
//1 往正方向加速效果  
child.setTranslationX(position\*factor\*child.getWidth());//child.getWidth()根据子控件的宽度大小，宽度大的加速度就越大  
//2 往反方向减速效果  
// child.setTranslationX(-position\*factor\*child.getWidth());//  
//缩放效果

\}  
//3 缩放效果1  
//缩放范围0~1,为什么要用1-Math.abs(position)绝对值呢？  
//因为分析可知当position由0到1的时候，此时屏幕正显示的是position为0，但是整个页面已全部显示，此时的Scale为1  
//当向左边滑动的时候，position由0到1，Scale却是由1到0，所以用1-绝对值，正好可以对应Scale的变化  
/\* r1.setScaleX(1-Math.abs(position));  
r1.setScaleY(1-Math.abs(position));\*/  
//4 缩放效果2,先缩放缩放到小于0.8的时候就直接取最大值0.8固定的了，效果就是缩到一定的大小就不会缩放  
r1.setScaleX(Math.max(0.8f, 1-Math.abs(position)));  
r1.setScaleY(Math.max(0.8f, 1-Math.abs(position)));  
//5 3D翻外转效  
//绕着y轴旋转  
r1.setPivotX(position<0f?r1.getWidth():0f);//设置旋转中心点  
r1.setPivotY(r1.getHeight()\*0.5f);  
r1.setRotationY(position\*60);//如果这里的值越大，两个角度越小，像锥形  
  
//6 3D内翻转  
/\*r1.setPivotX(position<0f?r1.getWidth():0f);//设置旋转中心点  
r1.setPivotY(r1.getHeight()\*0.5f);  
r1.setRotationY(-position\*60);//如果这里的值越大，两个角度越小，像锥形  
\*/  
// 7 绕着自身正中心旋转  
/\*r1.setPivotX(r1.getHeight()\*0.5f);//设置旋转中心点  
r1.setPivotY(r1.getHeight()\*0.5f);  
r1.setRotationY(-position\*60);//如果这里的值越大，两个角度越小，像锥形  
\*/ \}  
\}

源代码:

一、MainActivity.java:

import android.os.Bundle;
    import android.app.Activity;
    import android.content.Intent;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.app.FragmentStatePagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v4.view.ViewPager.OnPageChangeListener;
    import android.view.Menu;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.Window;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    
    public class MainActivity extends FragmentActivity  implements OnPageChangeListener,OnClickListener{//使用Fragment进行逻辑的切换，所以必须继承FragmentActivity
    	private ViewPager VP;
    	private LinearLayout linear,linear2;
    	private ImageView iv2;
    	private  int [] layoutId={
    			R.layout.welcomeone,
    			R.layout.welcometwo,
    			R.layout.welcomethree
    	};
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		requestWindowFeature(Window.FEATURE_NO_TITLE);
    		setContentView(R.layout.activity_main);
    		initView();
    	}
    	/*初始化整个界面*/
    	public void initView(){
    		VP=(ViewPager) findViewById(R.id.vp);
    		linear=(LinearLayout) findViewById(R.id.linear);
    		linear2=(LinearLayout) findViewById(R.id.linear2);
    		linear2.setOnClickListener(this);
    		initCircleView();//调用初始化小圆点的界面
    		MyAdapter adapter=new MyAdapter(getSupportFragmentManager());
    		VP.setAdapter(adapter);
    		//setPageTransformer页面滑动监听器，第一个参数是个Boolean类型，第二个则是PageTransfromer接口
    		VP.setPageTransformer(true, new MyTransformerPager());
    		VP.setOnPageChangeListener(this);
    	}
    	/*初始化下面小圆点的方法*/
    	public void initCircleView() {
    		for (int i = 0; i < layoutId.length; i++) {
    			ImageView iv=new ImageView(this);
    			if (i==0) {
    				iv.setImageResource(R.drawable.circle_two);
    			}else{
    				iv.setImageResource(R.drawable.circle);
    			}
    			iv.setPadding(12, 3, 12, 3);
    			linear.addView(iv);
    		}
    	}
    	/*自定义ViewPage适配器*/
    	class MyAdapter extends FragmentStatePagerAdapter{
    
    		public MyAdapter(FragmentManager fm) {
    			super(fm);
    		}
    		@Override
    	public Fragment getItem(int position) {//返回每个Fragment。就相当于ListView返回每一个View对象item
    			Fragment f=new MyViewPagerFragment();//
    			//f.setArguments(position);//返回是哪个页面的布局id
    			Bundle b =new Bundle();
    			b.putInt("layoutId", layoutId[position]);
    			f.setArguments(b);
    			return f;
    		}
    		@Override
    		public int getCount() {//首先会调用这个方法
    
    			return 3;
    		}
    
    	}
    	/*重写页面切换监听器的方法*/
    	@Override
    	public void onPageScrollStateChanged(int arg0) {
    		// TODO Auto-generated method stub	
    	}
    	@Override
    	public void onPageScrolled(int arg0, float arg1, int arg2) {
    		// TODO Auto-generated method stub
    
    	}
    	@Override
    	public void onPageSelected(int position) {
    		linear.removeAllViews();
    		setcurrentSelector(position);
    
    	}
    	/*页面滑动时小圆点切换的效果实现*/
    	private void setcurrentSelector(int position) {
    		if (position==2) {
    			iv2=new ImageView(this);
    			iv2.setImageResource(R.drawable.tiyan);
    			linear2.addView(iv2);
    			linear.removeAllViews();
    		}else{
    			initCircleView();//如果不是最后的页面则重新需要初始化小圆点
    			linear2.removeAllViews();//并把立即体验的按钮给删除掉
    		}
    		for (int i = 0; i < linear.getChildCount(); i++) {
    			ImageView child=(ImageView) linear.getChildAt(i);
    			if (i==position) {
    				child.setImageResource(R.drawable.circle_two);
    			}else{
    				child.setImageResource(R.drawable.circle);
    			}
    		}
    	}
    	/*点击事件的方法*/
    	@Override
    	public void onClick(View v) {
    		Intent intent =new Intent(this, MenuActivity.class);
    		startActivity(intent);
    		finish();
    	}
    }

二、MyViewPagerFragment.java

import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    public class MyViewPagerFragment extends Fragment {
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container,
    			Bundle savedInstanceState) {
    		Bundle bundle=  getArguments();
    		int layoutId=bundle.getInt("layoutId");
    		View v=View.inflate(getActivity(),layoutId,null);
    		return v ;
    	}
    }

三、MyTransformerPager.java

import android.support.v4.view.ViewPager.PageTransformer;
    import android.view.View;
    import android.view.ViewGroup;
    
    public class MyTransformerPager implements PageTransformer {
    	/**
    	 * @author zhongqihong
    	 * position参数就是页面左边的位置
    	 * 当我们的ViewPager滑动的时候，每一个页面都会回调这个方法
    	 * view：某个页面对应的视图，就是布局XML
    	 * */
    	@Override
    	public void transformPage(View view, float position) {
    		//渐变效果判断区间（-1，1）
    		if (position<1&&position>-1) {
    			ViewGroup r1=(ViewGroup) view.findViewById(R.id.rl);//此处获取的id值，三个Fragment的布局id都必须一样为rl,否则会报错误
    			//视差加速效果，让里面的子控件都给一个加速偏移量
    					for (int i = 0; i < r1.getChildCount(); i++) {
    				float factor =(float) (Math.random()*2);//给出一个随机数使得每个控件的加速度大小不一致，才会看出效果
    				View child=r1.getChildAt(i);
    				//这里的position变化区间是-1~0~1,所以当向左边（X轴负方向）加速滑动的时候，此时需要一个负方向的加速度，position正好为负数
    				//向右加速滑动的时候有正向加速度，然后此时的position为正的
    
    				//这样会出现一个抖动的效果，因为子控件每次进入for循环都会随机的加速一次，每次都会调用factor而每次的factor都是不一样的，所以会有时候快有时候慢
    				//这时候就需要这样处理，第一次调用后，第二次还是用这个值，那如何用view绑定一个随机数呢？？
    			   if (child.getTag()==null) {//如果是第一次调用，就设置随机数
    				child.setTag(factor);
    			}else{//如果不是第一次调用，就不需要再次调用，直接取第一次调用的获取到的随机数
    				factor=(Float) child.getTag();
    			}
    			   //1 往正方向加速效果
    			   child.setTranslationX(position*factor*child.getWidth());//child.getWidth()根据子控件的宽度大小，宽度大的加速度就越大
    			      //2 往反方向减速效果
    			  // child.setTranslationX(-position*factor*child.getWidth());//
    			//缩放效果
    
    			}
    			//3 缩放效果1
    			//缩放范围0~1,为什么要用1-Math.abs(position)绝对值呢？
    			//因为分析可知当position由0到1的时候，此时屏幕正显示的是position为0，但是整个页面已全部显示，此时的Scale为1
    			//当向左边滑动的时候，position由0到1，Scale却是由1到0，所以用1-绝对值，正好可以对应Scale的变化
    			/*		r1.setScaleX(1-Math.abs(position));
    			r1.setScaleY(1-Math.abs(position));*/
    			//4 缩放效果2,先缩放缩放到小于0.8的时候就直接取最大值0.8固定的了，效果就是缩到一定的大小就不会缩放
    			r1.setScaleX(Math.max(0.8f, 1-Math.abs(position)));
    			r1.setScaleY(Math.max(0.8f, 1-Math.abs(position)));
    			//5 3D翻外转效
    			//绕着y轴旋转
    			r1.setPivotX(position<0f?r1.getWidth():0f);//设置旋转中心点
    			r1.setPivotY(r1.getHeight()*0.5f);
    			r1.setRotationY(position*60);//如果这里的值越大，两个角度越小，像锥形
    		
    			//6 3D内翻转
    			/*r1.setPivotX(position<0f?r1.getWidth():0f);//设置旋转中心点
    			r1.setPivotY(r1.getHeight()*0.5f);
    			r1.setRotationY(-position*60);//如果这里的值越大，两个角度越小，像锥形
    */	
    			// 7 绕着自身正中心旋转
    			/*r1.setPivotX(r1.getHeight()*0.5f);//设置旋转中心点
    			r1.setPivotY(r1.getHeight()*0.5f);
    			r1.setRotationY(-position*60);//如果这里的值越大，两个角度越小，像锥形
    */			}
    	}
    }

四、activity\_main.xml

3D外翻转切换特效运行效果:

![Center][]

缩放切换效果:

![Center 1][]

3D内翻转效果:

![Center 2][]

绕着自身正中心旋转效果:

![Center 3][]

[Center]: /images/20220731/9f4e3c2a04204086912ef8b8bfc0fb4d.png
[Center 1]: /images/20220731/b3c8de9e475c44d99939adc721cc2299.png
[Center 2]: /images/20220731/37ee30ba67ea40eba0d6e0969df967da.png
[Center 3]: /images/20220731/843575af9640420c9c3ac594b4daa5ab.png