viewPager的切换动画

2022-01-11 05:08:15

今天在看苏州通的代码，里面有个引导的代码，涉及到viewPager的切换动画：

DepthPageTransformer ：
 package com.soyoungboy.guide;

 import android.annotation.TargetApi;

 import android.os.Build;

 import android.support.v4.view.ViewPager;

 import android.view.View;

 /**

 *

 * @ClassName: DepthPageTransformer

 * @Description: TODO(viewPager切换动画)

 *

 */

 @TargetApi(Build.VERSION_CODES.HONEYCOMB)

 publicclassDepthPageTransformerimplementsViewPager.PageTransformer{

 privatestaticfloat MIN_SCALE =0.75f;

 /**

 * @Name transformPage

 * @Description TODO(这里用一句话描述这个方法的作用)

 * @param view

 * 滑动中的那个view

 * @param position

 * position这里是float类型，不是平时理解的int位置，而是当前滑动状态的一个表示，比如当滑动到正全屏时，

 * position是0

 * ，而向左滑动，使得右边刚好有一部被进入屏幕时，position是1，如果前一页和下一页基本各在屏幕占一半时

 * ，前一页的position是

 * -0.5，后一页的posiotn是0.5，所以根据position的值我们就可以自行设置需要的alpha，x/y信息

 * @see android.support.v4.view.ViewPager.PageTransformer#transformPage(android.view.View,

 * float)

 * @Date 2015-5-25 下午3:13:18

 **/

 @Override

 publicvoid transformPage(View view,float position){

 // TODO Auto-generated method stub

 int pageWidth = view.getWidth();

 if(position <-1){

 //前一页

 view.setAlpha(0);

 }elseif(position <=0){

 view.setAlpha(1);

 view.setTranslationX(0);

 view.setScaleX(1);

 view.setScaleY(1);

 }elseif(position <=1){

 //后一页

 view.setAlpha(1- position);

 view.setTranslationX(pageWidth *-position);

 float scaleFactor = MIN_SCALE +(1- MIN_SCALE)

 *(1-Math.abs(position));

 view.setScaleX(scaleFactor);

 view.setScaleY(scaleFactor);

 }else{

 view.setAlpha(0);

 }

 }

 }
 
ZoomOutPageTransformer ：
 package com.soyoungboy.guide;

 import android.annotation.TargetApi;

 import android.os.Build;

 import android.support.v4.view.ViewPager.PageTransformer;

 import android.view.View;

 @TargetApi(Build.VERSION_CODES.HONEYCOMB)

 publicclassZoomOutPageTransformerimplementsPageTransformer{

 privatestaticfloat MIN_SCALE =0.85f;

 privatestaticfloat MIN_ALPHA =0.5f;

 @Override

 publicvoid 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);

 }elseif(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);

 }

 }

 }
activity里面使用动画：
 package com.soyoungboy.guide;

 import java.util.ArrayList;

 import java.util.List;

 import android.app.Activity;

 import android.content.Context;

 import android.content.SharedPreferences;

 import android.content.SharedPreferences.Editor;

 import android.os.Bundle;

 import android.support.v4.view.PagerAdapter;

 import android.support.v4.view.ViewPager;

 import android.support.v4.view.ViewPager.OnPageChangeListener;

 import android.view.LayoutInflater;

 import android.view.View;

 import android.view.View.OnClickListener;

 import android.view.animation.Animation;

 import android.view.animation.AnimationSet;

 import android.view.animation.AnimationUtils;

 import android.widget.Button;

 import android.widget.ImageView;

 import android.widget.TextView;

 publicclassMainActivityextendsActivityimplementsOnPageChangeListener{

 privateTextView pageNum;

 privateViewPager vp;

 privateList<View> views;

 privateViewPagerAdapter vpAdapter;

 privateLayoutInflater inflater;

 @Override

 protectedvoid onCreate(Bundle savedInstanceState){

 super.onCreate(savedInstanceState);

 setContentView(R.layout.activity_main);

 inflater =LayoutInflater.from(this);

 initViews();

 initPageNum();

 }

 privatevoid initPageNum(){

 pageNum =(TextView) findViewById(R.id.page_num);

 pageNum.setText("");

 }

 privatevoid initViews(){

 views =newArrayList<View>();

 /**

 * 要加载的引导图片

 */

 views.add(inflater.inflate(R.layout.views_one,null));

 views.add(inflater.inflate(R.layout.views_two,null));

 views.add(inflater.inflate(R.layout.views_three,null));

 views.add(inflater.inflate(R.layout.views_four,null));

 vpAdapter =newViewPagerAdapter(views,this);

 vp =(ViewPager) findViewById(R.id.viewpager);

 vp.setPageTransformer(true,newDepthPageTransformer());

 // vp.setPageTransformer(true, new ZoomOutPageTransformer());

 vp.setAdapter(vpAdapter);

 vp.setOnPageChangeListener(this);

 }

 publicclassViewPagerAdapterextendsPagerAdapter{

 privateList<View> views;

 privateActivity activity;

 publicViewPagerAdapter(List<View> views,Activity activity){

 this.views = views;

 this.activity = activity;

 }

 @Override

 publicvoid destroyItem(View arg0,int arg1,Object arg2){

 ((ViewPager) arg0).removeView(views.get(arg1));

 }

 @Override

 publicint getCount(){

 if(views !=null){

 return views.size();

 }

 return0;

 }

 @Override

 publicObject instantiateItem(View arg0,int arg1){

 ((ViewPager) arg0).addView(views.get(arg1),0);

 if(arg1 ==0){

 AnimationSet animationSet =newAnimationSet(true);

 Animation alphaAnimation =AnimationUtils.loadAnimation(

 MainActivity.this, R.anim.alpha);

 Animation tAnimation =AnimationUtils.loadAnimation(

 MainActivity.this, R.anim.trans);

 animationSet.addAnimation(alphaAnimation);

 animationSet.addAnimation(tAnimation);

 ImageView imageView =(ImageView) arg0

 .findViewById(R.id.first_image);

 imageView.startAnimation(animationSet);

 }

 if(arg1 == views.size()-1){

 Button mStart =(Button) arg0.findViewById(R.id.mstart);

 mStart.setOnClickListener(newOnClickListener(){

 @Override

 publicvoid onClick(View v){

 setGuided();

 goHome();

 }

 });

 }

 return views.get(arg1);

 }

 @Override

 publicboolean isViewFromObject(View arg0,Object arg1){

 return(arg0 == arg1);

 }

 publicvoid goHome(){

 // Intent intent = new Intent(activity, ContentActivity.class);

 // activity.startActivity(intent);

 // overridePendingTransition(android.R.anim.fade_in,

 // android.R.anim.fade_out);

 // activity.finish();

 }

 publicvoid setGuided(){

 SharedPreferences preferences = activity.getSharedPreferences(

 "first_pref",Context.MODE_PRIVATE);

 Editor editor = preferences.edit();

 editor.putBoolean("isFirst",false);

 editor.commit();

 }

 }

 @Override

 publicvoid onPageScrollStateChanged(int arg0){

 // TODO Auto-generated method stub

 }

 @Override

 publicvoid onPageScrolled(int arg0,float arg1,int arg2){

 // TODO Auto-generated method stub

 }

 @Override

 publicvoid onPageSelected(int arg0){

 if(arg0 ==0){

 pageNum.setText("");

 }else{

 pageNum.setTextColor(0xFF767676);

 pageNum.setText(arg0 +1+" - 4");

 }

 }

 publicvoid onResume(){

 super.onResume();

 }

 publicvoid onPause(){

 super.onPause();

 }

 }
activity_main.xml
 
  1.  <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    
 xmlns:tools="http://schemas.android.com/tools"
    
 android:layout_width="match_parent"
    
 android:layout_height="match_parent"
    
 tools:context=".GuideActivity">
    
 <android.support.v4.view.ViewPager
    
 android:id="@+id/viewpager"
    
 android:layout_width="match_parent"
    
 android:layout_height="match_parent"/>
    
 <TextView
    
 android:id="@+id/page_num"
    
 android:layout_width="wrap_content"
    
 android:layout_height="wrap_content"
    
 android:layout_alignParentBottom="true"
    
 android:layout_centerHorizontal="true"
    
 android:layout_marginBottom="45dp"
    
 android:textSize="25sp"
    
 android:textColor="#ffeeeeee"
    
 android:text="hehe"/>
    
 </RelativeLayout>
    
 alpha.xml
    
 <?xml version="1.0" encoding="utf-8"?>
    
 <setxmlns:android="http://schemas.android.com/apk/res/android"
    
 android:interpolator="@android:anim/accelerate_interpolator">
    
 <alpha
    
 android:duration="1000"
    
 android:fromAlpha="0.0"
    
 android:toAlpha="1.0">
    
 </alpha>
    
 </set>
trans.xml
 <?xml version="1.0" encoding="utf-8"?>

 <setxmlns:android="http://schemas.android.com/apk/res/android"

 android:interpolator="@android:anim/accelerate_interpolator">

 <translate

 android:duration="1000"

 android:fromXDelta="50%"

 android:fromYDelta="0%"

 android:toXDelta="0%"

 android:toYDelta="0%">

 </translate>

 </set>
views_one.xml
  1.  <?xml version="1.0" encoding="utf-8"?>
    
 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    
 android:layout_width="match_parent"
    
 android:layout_height="match_parent"
    
 android:background="@drawable/welcomeback"
    
 android:orientation="vertical">
    
 <ImageView
    
 android:id="@+id/first_image"
    
 android:layout_width="wrap_content"
    
 android:layout_height="wrap_content"
    
 android:src="@drawable/welcome1"
    
 android:layout_centerVertical="true"
    
 android:layout_margin="20dp"/>
    
 </RelativeLayout>
views_two.xml
  1.  <?xml version="1.0" encoding="utf-8"?>
    
 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    
 android:layout_width="match_parent"
    
 android:layout_height="match_parent"
    
 android:background="#ffffffff"
    
 android:orientation="vertical"
    
 android:padding="20dp">
    
 <ImageView
    
 android:id="@+id/second_image"
    
 android:layout_width="wrap_content"
    
 android:layout_height="wrap_content"
    
 android:layout_centerInParent="true"
    
 android:src="@drawable/welcome2"/>
    
 </RelativeLayout>
views_three.xml
  1. <?xml version="1.0" encoding="utf-8"?>
    
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    
android:layout_width="match_parent"
    
android:layout_height="match_parent"
    
android:padding="20dp"
    
android:background="#ffffffff"
    
android:orientation="vertical">
    
<ImageView
    
android:id="@+id/third_image"
    
android:layout_width="wrap_content"
    
android:layout_height="wrap_content"
    
android:layout_centerInParent="true"
    
android:src="@drawable/welcome3"/>
    
</RelativeLayout>
views_four.xml
  1.  <?xml version="1.0" encoding="utf-8"?>
    
 <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    
 android:layout_width="match_parent"
    
 android:layout_height="match_parent"
    
 android:background="#ffffffff"
    
 android:orientation="vertical">
    
 <ImageView
    
 android:id="@+id/forth_image"
    
 android:layout_width="wrap_content"
    
 android:layout_height="wrap_content"
    
 android:layout_centerInParent="true"
    
 android:src="@drawable/welcome4"/>
    
 <Button
    
 android:id="@+id/mstart"
    
 android:layout_below="@+id/forth_image"
    
 android:layout_width="wrap_content"
    
 android:layout_height="wrap_content"
    
 android:background="#00ffffff"
    
 android:text="Start!"
    
 android:layout_centerHorizontal="true"
    
 android:textColor="#ffa4a4a4"
    
 android:padding="20dp"/>
    
 </RelativeLayout>

源码demo下载地址：

https://github.com/soyoungboy/Guide

对应引用：

https://github.com/soyoungboy/appcompat_v7

上一篇：[刷题]算法竞赛入门经典(第2版) 5-4/UVa10763 - Foreign Exchange


下一篇：Oracle的基础案例