android動畫切換(滑屏效果)實例


實現效果:屏幕實現滑屏切換效果,大家都知道的效果,就不截圖了

實現步驟:

1. 創建項目interface,我選擇的版本是Android3.0,

Application Name: Animation

Package Name: zf.itcast.animation

Create Activity:MainActivity

2. 在main.xml中定義兩個Activity,並且設置樣式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <!-- 頁面切換動畫控件 -->
    <ViewFlipper 
        android:id="@+id/viewFlipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >
        <!-- 第一頁 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
        >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/hello" 
                android:onClick="openActivity"/>
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/first_acvivity"
                />
        </LinearLayout>
        <!-- 第二頁 -->
        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#339900"
        >
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/second_acvivity"
                />
        </LinearLayout>
    </ViewFlipper>

</LinearLayout>

3. 在類MainActivity中設置動畫切換方法

package zf.itcast.animation;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

public class MainActivity extends Activity {
    //定義控件ViewFlipper
    private ViewFlipper viewFlipper;
    //定義手指開始觸點屏幕的橫坐標
    private float startX;
    //從左向右進入動畫
    private Animation enter_lefttoright;
    //從左向右退出動畫
    private Animation exit_lefttoright;
    //從右向左進入動畫
    private Animation enter_righttoleft;
    //從右向左退出動畫
    private Animation exit_righttoleft;
    
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //加載動畫效果
        enter_lefttoright = AnimationUtils.loadAnimation(this, R.anim.enter_lefttoright);
        exit_lefttoright = AnimationUtils.loadAnimation(this, R.anim.exit_lefttoright);
        enter_righttoleft = AnimationUtils.loadAnimation(this, R.anim.enter_righttoleft);
        exit_righttoleft = AnimationUtils.loadAnimation(this, R.anim.exit_righttoleft);
        
        viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
    }
    
    
    /**
     * <p>功能:屏幕觸屏事件</p>
     * @author 周楓
     * @date 2012-5-30
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //點擊屏幕,MotionEvent.ACTION_DOWN 為手指點擊屏幕事件
        if(event.getAction() == MotionEvent.ACTION_DOWN) {
            //獲取手指開始觸點橫坐標
            startX = event.getX();
            //手指抬起,結束滑屏
        } else if(event.getAction() == MotionEvent.ACTION_UP) {
            //獲取手指抬起,結束點橫坐標
            float endX = event.getX();
            //結束點橫坐標大於起始點橫坐標,說明手指是向右滑動
            if(endX > startX) {
                //控件進入動畫效果
                viewFlipper.setInAnimation(enter_lefttoright);
                //控件退出動畫效果
                viewFlipper.setOutAnimation(exit_lefttoright);
                //顯示下一頁
                viewFlipper.showNext();
            //結束點橫坐標小於起始點橫坐標,說明手指是向左滑動
            } else if (endX < startX) {
                viewFlipper.setInAnimation(enter_righttoleft);
                viewFlipper.setOutAnimation(exit_righttoleft);
                //顯示前一頁
                viewFlipper.showPrevious();
            }
            return true;
        }
        return super.onTouchEvent(event);
    }



    /**
     * <p>功能:打開新的Activity</p>
     * @author 周楓
     * @date 2012-5-30
     * @param 
     * @return void
     */
    public void openActivity(View v){
        Intent intent = new Intent(this, OtherActivity.class);
        startActivity(intent);
        //屏幕動畫淡入淡出效果切換,調用anim文件夾中創建的enteralpha(進入動畫)和exitalpha(淡出動畫)兩個動畫(注意:兩個xml文件命名不能有大寫字母)
        //如果想定義其他動畫效果,只需要改變enteralpha和exitalpha兩個文件
        this.overridePendingTransition(R.anim.enteralpha,R.anim.exitalpha);
    }
}

4. 在res文件夾下創建anim文件夾,新建4個動畫效果,分別為:enter_lefttoright.xml(從左到右進入效果),exit_lefttoright(從左向右退出動畫),
enter_righttoleft(從右向左進入動畫),exit_righttoleft(從右向左退出動畫),具體代碼為:

enter_lefttoright.xml(從左到右進入效果)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <!-- 平移動畫效果 從左到右  改變x軸坐標-->
    <translate 
        android:fromXDelta="-100%p"
        android:toXDelta="0"
        android:duration="2000"
    />
</set>

exit_lefttoright(從左向右退出動畫)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <!-- 平移動畫效果  改變x軸坐標-->
    <translate 
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="2000"
    />
</set>

enter_righttoleft(從右向左進入動畫)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <!-- 平移動畫效果 從左到右  改變x軸坐標-->
    <translate 
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="2000"
    />
</set>

exit_righttoleft(從右向左退出動畫)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <!-- 平移動畫效果  改變x軸坐標-->
    <translate 
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="2000"
    />
</set>


5. 關於string.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="hello">打開新Activity</string>
    <string name="app_name">Animation</string>
    <string name="new_window">新窗口</string>
    <string name="new_activity">這是新Activity</string>
    <string name="first_acvivity">第一頁</string>
    <string name="second_acvivity">第二頁</string>
</resources>

6. 成功實現,運行看效果吧~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM