Android實現繞球心旋轉的引導頁效果_Android

現在很多APP都會出現Android實現繞球心旋轉的引導頁效果，一個類似小車一直在往前開的旋轉式動畫效果。

先看一下預覽效果：

嗯，整體效果還算理想，基本實現了頁面繞螢幕底部中心旋轉。

這裡我們用到了Android系統的一個組件ViewFlipper，該控制項的主要作用是為其中的View切換提供動畫效果，主要的方法如下：

• setInAnimation：設定View進入螢幕時的動畫。
• setOutAnimation：設定View退出螢幕時的動畫。
• showNext：調用該方法可以顯示下一個View。
• showPrevious：調用該方法可以來顯示上一個View。
• setFilpInterval：設定View切換的時間間隔。參數為毫秒。
• startFlipping：開始進行View的切換。
• stopFlipping：停止View切換。
• setAutoStart：設定是否自動開始。如果設定為“true”，當ViewFlipper顯示的時候View的切換會自動開始。

首先看一下布局代碼：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/activity_main"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:background="#440000ff">  <ImageView    android:layout_width="match_parent"    android:layout_height="230dp"    android:layout_alignParentBottom="true"    android:background="@mipmap/guide_bg" />  <RelativeLayout    android:layout_width="match_parent"    android:layout_height="match_parent">    <ViewFlipper      android:id="@+id/vf"      android:layout_width="match_parent"      android:layout_height="match_parent">      <fragment        class="com.example.dell.guide.GuideOneFragment"        android:layout_width="match_parent"        android:layout_height="match_parent" />      <fragment        class="com.example.dell.guide.GuideTwoFragment"        android:layout_width="match_parent"        android:layout_height="match_parent" />      <fragment        class="com.example.dell.guide.GuideThreeFragment"        android:layout_width="match_parent"        android:layout_height="match_parent" />    </ViewFlipper>  </RelativeLayout></RelativeLayout>

主要就是一張在頁面底部的白色半球圖片，以及ViewFlipper內部的三個View，當然可以不用fragment，使用一般的Layout也行。

接下來就是對應的Activity：

public class MainActivity extends AppCompatActivity {  //處理手勢監聽  private GestureDetector detector;  private ViewFlipper flipper;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    flipper = (ViewFlipper) findViewById(R.id.vf);    detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {      @Override      public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {        if (e1.getX() - e2.getX() > 120.0F) { //從右向左滑動          flipper.setInAnimation(MainActivity.this, R.anim.tip_left_in);          flipper.setOutAnimation(MainActivity.this, R.anim.tip_left_out);          if (flipper.getDisplayedChild() < 2) {            flipper.showNext();          }        } else if (e1.getX() - e2.getX() < -120.0F) { //從左向右滑動          flipper.setInAnimation(MainActivity.this, R.anim.tip_right_in);          flipper.setOutAnimation(MainActivity.this, R.anim.tip_right_out);          if (flipper.getDisplayedChild() > 0) {            flipper.showPrevious();          }        }        return false;      }    });  }  @Override  public boolean onTouchEvent(MotionEvent event) {    if (detector != null) {      return detector.onTouchEvent(event);    }    return super.onTouchEvent(event);  }}

因為要實現手勢滑動來切換頁面，所以要建立一個GestureDetector對象：

detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {      @Override      public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {        //省略......        return false;      }    });

由於我們只關心，手指的左右滑動，所以重寫SimpleOnGestureListener的onFling()即可，然後在onTouchEvent()進行手勢監聽的綁定。到此我們的Activity就可以相應滑動的手勢了。

在onFling()方法中，當從右向左滑動時，通過setInAnimation()、setOutAnimation()設定flipper中view從右側進入的動畫和從左側退出的動畫，然後調用showNext()方法開始切換到下一頁，這樣就可以看到對應的動畫效果。從左向右滑動時情況類似，同樣需要設定view進入和退出的動畫，然後通過showPrevious()方法切換到上一頁。

具體的動畫檔案可以參考原始碼，這裡就不貼了。源碼下載

到此整個實現流程就介紹完了。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。