Android 使用XML做動畫UI的深入解析

更新時間：2013年07月11日 08:57:24 作者：

在Android應用程序，使用動畫效果，能帶給用戶更好的感覺。做動畫可以通過XML或Android代碼。本教程中，介紹使用XML來做動畫。在這里，介紹基本的動畫，如淡入，淡出，旋轉等，需要的朋友可以參考下

效果: http://www.56.com/u82/v_OTM4MDk5MTk.html
第一步: 創(chuàng)建anim文件夾放置動畫xml文件
在res文件夾下，創(chuàng)建一個anim的子文件夾。

第二步: 加載動畫
接著在Activity創(chuàng)建一個Animation類，然后使用AnimationUtils類加載動畫xml

Animation animFadein; 

@Override
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_fadein); 

txtMessage = (TextView) findViewById(R.id.txtMessage); 
btnStart = (Button) findViewById(R.id.btnStart); 

// 加載動畫 
animFadein = AnimationUtils.loadAnimation(getApplicationContext(), 
R.anim.fade_in); 

｝ 

第三步: 設置動畫監(jiān)聽器
如果你要監(jiān)聽動畫的事件，如開始，結束等，你需要實現AnimationListener監(jiān)聽器，重寫以下方法。
onAnimationEnd(Animation animation) - 當動畫結束時調用
onAnimationRepeat(Animation animation) - 當動畫重復時調用
onAniamtionStart(Animation animation) - 當動畫啟動時調用

復制代碼代碼如下:

@Override
public void onAnimationEnd(Animation animation) { 
// 在動畫結束后使用 

// check for fade in animation 
if (animation == animFadein) { 
Toast.makeText(getApplicationContext(), "Animation Stopped", 
Toast.LENGTH_SHORT).show(); 
} 

} 

@Override
public void onAnimationRepeat(Animation animation) { 
//當動畫重復時使用 

} 

@Override
public void onAnimationStart(Animation animation) { 
//當動畫開始使用 

}

最后一步: 讓動畫動起來啦?？梢允褂萌魏蜺I元素調用startAnimation方法。
以下是一個Textview元素調用的。
txtMessage.startAnimation(animFadein);
完整代碼:

復制代碼代碼如下:

FadeInActivity(淡入動畫) 
?package com.chaowen.androidanimations; 

import info.androidhive.androidanimations.R; 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.view.animation.Animation; 
import android.view.animation.AnimationUtils; 
import android.view.animation.Animation.AnimationListener; 
import android.widget.Button; 
import android.widget.TextView; 
import android.widget.Toast; 

/** 
 *  
 * @author chaowen 
 * 
 */
public class FadeInActivity extends Activity implements AnimationListener { 

    TextView txtMessage; 
    Button btnStart; 

    Animation animFadein; 

    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_fadein); 

        txtMessage = (TextView) findViewById(R.id.txtMessage); 
        btnStart = (Button) findViewById(R.id.btnStart); 

        // 加載動畫 
        animFadein = AnimationUtils.loadAnimation(getApplicationContext(), 
                R.anim.fade_in); 

        // 設置監(jiān)聽 
        animFadein.setAnimationListener(this); 

        // 按鈕 
        btnStart.setOnClickListener(new View.OnClickListener() { 

            @Override
            public void onClick(View v) { 
                txtMessage.setVisibility(View.VISIBLE); 

                // 開始動畫 
                txtMessage.startAnimation(animFadein); 
            } 
        }); 

    } 

    @Override
    public void onAnimationEnd(Animation animation) { 
        // 在動畫結束后使用 

        // check for fade in animation 
        if (animation == animFadein) { 
            Toast.makeText(getApplicationContext(), "Animation Stopped", 
                    Toast.LENGTH_SHORT).show(); 
        } 

    } 

    @Override
    public void onAnimationRepeat(Animation animation) { 
        //當動畫重復時使用 

    } 

    @Override
    public void onAnimationStart(Animation animation) { 
        //當動畫開始使用 

    } 

} 

一些重要的XML屬性
重要的XML動畫屬性
android:duration 動畫持續(xù)時間,時間以毫秒為單位
android:startOffset 動畫之間的時間間隔，從上次動畫停多少時間開始執(zhí)行下個動畫
android:interpolator 指定一個動畫的插入器
android:fillAfter 當設置為true ，該動畫轉化在動畫結束后被應用
android:repeatMode 定義重復的行為
android:repeatCount 動畫的重復次數

以下是一些基本的動畫XML.
Fade In: 淡入
alpha是漸變透明度效果，值由0到1
fade_in.xml

復制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" > 

    <alpha 
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" /> 

</set>

Fade Out ：淡出
以Fade In剛好相反，值由1到0.
fade_out.xml

復制代碼代碼如下:

 <?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" > 

    <alpha 
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" /> 

</set> 

Cross Fading: 交叉的淡入和淡出
同時使用Fade in和Fade out可以達到交叉的效果

復制代碼代碼如下:

public class CrossfadeActivity extends Activity implements AnimationListener { 

    TextView txtMessage1, txtMessage2; 
    Button btnStart; 

      
    Animation animFadeIn, animFadeOut; 

    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        // TODO Auto-generated method stub 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_crossfade); 

        txtMessage1 = (TextView) findViewById(R.id.txtMessage1); 
        txtMessage2 = (TextView) findViewById(R.id.txtMessage2); 
        btnStart = (Button) findViewById(R.id.btnStart); 

        // load animations 
        animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(), 
                R.anim.fade_in); 
        animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(), 
                R.anim.fade_out); 

        // set animation listeners 
        animFadeIn.setAnimationListener(this); 
        animFadeOut.setAnimationListener(this); 

        // button click event 
        btnStart.setOnClickListener(new View.OnClickListener() { 

            @Override
            public void onClick(View v) { 

                txtMessage2.setVisibility(View.VISIBLE); 

                txtMessage2.startAnimation(animFadeIn); 

                  
                txtMessage1.startAnimation(animFadeOut); 
            } 
        }); 

    } 

    @Override
    public void onAnimationEnd(Animation animation) { 

  

        if (animation == animFadeOut) { 
            txtMessage1.setVisibility(View.GONE); 
        } 

        if(animation == animFadeIn){ 
            txtMessage2.setVisibility(View.VISIBLE); 
        } 

    } 

    @Override
    public void onAnimationRepeat(Animation animation) { 
        // TODO Auto-generated method stub 

    } 

    @Override
    public void onAnimationStart(Animation animation) { 
        // TODO Auto-generated method stub 

    } 

}

BLink: 若隱若現，酷
blink.xml

復制代碼代碼如下:

 <?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <alpha android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="600"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/> 
</set> 

Zoom In : 放大
zoom_in.xml

復制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" > 

    <scale 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" > 
    </scale> 

</set> 

Zoom Out: 縮小
zoom_out.xml

復制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" > 

    <scale 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" > 
    </scale> 

</set>

Rotate: 旋轉
rotate.xml

復制代碼代碼如下:

 <?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="600"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/cycle_interpolator"/> 

</set> 

還有幾個就不再列出，有興趣下源碼看。點擊下載

您可能感興趣的文章:

Android中Binder IPC機制介紹
大家好，本篇文章主要講的是Android中Binder IPC機制介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下，方便下次瀏覽
2021-12-12
Android Mms之:深入MMS支持
本篇文章是對Android中MMS支持進行了詳細的分析介紹，需要的朋友參考下
2013-05-05
Android下2d物理引擎Box2d用法簡單實例
這篇文章主要介紹了Android下2d物理引擎Box2d用法,實例分析了在Android平臺上使用Box2d的基本技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
android 仿微信聊天氣泡效果實現思路
微信聊天窗口的信息效果類似iphone上的短信效果，以氣泡的形式展現,實現這種效果主要用到ListView和BaseAdapter，配合布局以及相關素材，接下來為大家介紹下如何實現
2013-04-04
Android?拍照后返回縮略圖的兩種方法介紹
大家好，本篇文章主要講的是Android?拍照后返回縮略圖的兩種方法介紹，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下
2022-01-01
HttpClient通過Post上傳文件的實例代碼
這篇文章主要介紹了HttpClient通過Post上傳文件的實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
Android音頻錄制MediaRecorder之簡易的錄音軟件實現代碼
這篇文章主要介紹了Android音頻錄制MediaRecorder之簡易的錄音軟件實現代碼，有需要的朋友可以參考一下
2014-01-01
Android仿百度外賣自定義下拉刷新效果
大家在使用百度外賣的訂餐的時候，會看到有個下拉刷新功能非常不錯，今天小編就通過代碼給大家介紹android仿百度外賣自定義下拉刷新，感興趣的朋友一起學習吧
2016-04-04
Android編程調用Camera和相冊功能詳解
這篇文章主要介紹了Android編程調用Camera和相冊功能,結合實例形式分析了Android的拍照及相冊調用功能相關實現技巧與操作注意事項,需要的朋友可以參考下
2017-02-02
Android實現接近傳感器
這篇文章主要為大家詳細介紹了Android實現接近傳感器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-04-04