【Android 基礎】Animation 動畫介紹和實現

時間 2019-11-10

標籤 Android 基礎 animation 動畫介紹實現欄目 Android 简体版

原文原文鏈接

在前面 PopupWindow 實現顯示仿騰訊新聞底部彈出菜單有用到Animation動畫效果來實現菜單的顯示和隱藏，本文就來介紹下吧。html

1.Animation 動畫類型android

Android的animation由四種類型組成：app

XML中ide

alph	漸變透明度動畫效果
scale	漸變尺寸伸縮動畫效果
translate	畫面轉換位置移動動畫效果
rotate	畫面轉移旋轉動畫效果

JavaCode中佈局

AlphaAnimation	漸變透明度動畫效果
ScaleAnimation	漸變尺寸伸縮動畫效果
TranslateAnimation	畫面轉換位置移動動畫效果
RotateAnimation	畫面轉移旋轉動畫效果

2.Android動畫模式動畫

Animation主要有兩種動畫模式：this

一種是tweened animation(漸變更畫)spa

XML中	JavaCode
alpha	AlphaAnimation
scale	ScaleAnimation

一種是frame by frame(畫面轉換動畫)
code

XML中	JavaCode
translate	TranslateAnimation
rotate	RotateAnimation

3.如何在XML文件中定義動畫xml

步驟以下：

①新建 Android 項目

②在res目錄中新建anim文件夾

③在anim目錄中新建一個my_anim.xml(注意文件名小寫)

④在 my_anim.xml 加入動畫代碼

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha />
    <scale />
    <translate />
    <rotate />
</set>

4.Android動畫解析--XML

4.1 alpha 漸變透明度動畫效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <!--
     透明度控制動畫效果 alpha
        浮點型值：
            fromAlpha 屬性爲動畫起始時透明度
            toAlpha   屬性爲動畫結束時透明度
            說明: 
                0.0表示徹底透明
                1.0表示徹底不透明
            以上值取0.0-1.0之間的float數據類型的數字
        
        長整型值：
            duration  屬性爲動畫持續時間
            說明:     
                時間以毫秒爲單位

    -->
</set>

4.2 scale 漸變尺寸伸縮動畫效果

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

    <scale
        android:duration="1000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.4"
        android:toYScale="1.4" />

</set><!--
     尺寸伸縮動畫效果 scale
       屬性：interpolator 指定一個動畫的插入器
        在我試驗過程當中，使用android.res.anim中的資源時候發現
        有三種動畫插入器:
            accelerate_decelerate_interpolator  加速-減速 動畫插入器
            accelerate_interpolator        加速-動畫插入器
            decelerate_interpolator        減速- 動畫插入器
        其餘的屬於特定的動畫效果
      浮點型值：
         
            fromXScale 屬性爲動畫起始時 X座標上的伸縮尺寸    
            toXScale   屬性爲動畫結束時 X座標上的伸縮尺寸     
        
            fromYScale 屬性爲動畫起始時Y座標上的伸縮尺寸    
            toYScale   屬性爲動畫結束時Y座標上的伸縮尺寸    
        
            說明:
                 以上四種屬性值    
    
                    0.0表示收縮到沒有 
                    1.0表示正常無伸縮     
                    值小於1.0表示收縮  
                    值大於1.0表示放大
        
            pivotX     屬性爲動畫相對於物件的X座標的開始位置
            pivotY     屬性爲動畫相對於物件的Y座標的開始位置
        
            說明:
                    以上兩個屬性值 從0%-100%中取值
                    50%爲物件的X或Y方向座標上的中點位置
        
        長整型值：
            duration  屬性爲動畫持續時間
            說明:   時間以毫秒爲單位

        布爾型值:
            fillAfter 屬性 當設置爲true ，該動畫轉化在動畫結束後被應用

-->

4.3 translate 畫面轉換位置移動動畫效果

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

    <translate
        android:duration="2000"
        android:fromXDelta="30"
        android:fromYDelta="30"
        android:toXDelta="-80"
        android:toYDelta="300" />
    <!--
     translate 位置轉移動畫效果
        整型值:
            fromXDelta 屬性爲動畫起始時 X座標上的位置    
            toXDelta   屬性爲動畫結束時 X座標上的位置
            fromYDelta 屬性爲動畫起始時 Y座標上的位置
            toYDelta   屬性爲動畫結束時 Y座標上的位置
            注意:
                     沒有指定fromXType toXType fromYType toYType 時候，
                     默認是以本身爲相對參照物             
        長整型值：
            duration  屬性爲動畫持續時間
            說明:   時間以毫秒爲單位



    -->

</set>

4.4 rotate 畫面轉移旋轉動畫效果

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

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+350" />
    <!--
     rotate 旋轉動畫效果
       屬性：interpolator 指定一個動畫的插入器
             在我試驗過程當中，使用android.res.anim中的資源時候發現
             有三種動畫插入器:
                accelerate_decelerate_interpolator   加速-減速 動畫插入器
                accelerate_interpolator               加速-動畫插入器
                decelerate_interpolator               減速- 動畫插入器
             其餘的屬於特定的動畫效果
                           
       浮點數型值:
            fromDegrees 屬性爲動畫起始時物件的角度    
            toDegrees   屬性爲動畫結束時物件旋轉的角度 能夠大於360度   

        
            說明:
                     當角度爲負數——表示逆時針旋轉
                     當角度爲正數——表示順時針旋轉              
                     (負數from——to正數:順時針旋轉)   
                     (負數from——to負數:逆時針旋轉) 
                     (正數from——to正數:順時針旋轉) 
                     (正數from——to負數:逆時針旋轉)       

            pivotX     屬性爲動畫相對於物件的X座標的開始位置
            pivotY     屬性爲動畫相對於物件的Y座標的開始位置
                
            說明:        以上兩個屬性值 從0%-100%中取值
                         50%爲物件的X或Y方向座標上的中點位置

        長整型值：
            duration  屬性爲動畫持續時間
            說明:       時間以毫秒爲單位

    -->

</set>

5.如何使用XML中的動畫效果

public static Animation loadAnimation (Context context, int id) 

//第一個參數Context爲程序的上下文    
//第二個參數id爲動畫XML文件的引用
//例子：
myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);
//使用AnimationUtils類的靜態方法loadAnimation()來加載XML中的動畫XML文件

6.如何使用XML中的動畫效果

//在代碼中定義 動畫實例對象
private Animation myAnimation_Alpha;
private Animation myAnimation_Scale;
private Animation myAnimation_Translate;
private Animation myAnimation_Rotate;
    
//根據各自的構造方法來初始化一個實例對象
myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);

myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
             Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

myAnimation_Translate=new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);

myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,
               Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

7.Android動畫解析--JavaCode

7.1 AlphaAnimation

①　AlphaAnimation類對象定義

private AlphaAnimation myAnimation_Alpha

②　AlphaAnimation類對象構造

//第一個參數fromAlpha爲 動畫開始時候透明度
//第二個參數toAlpha爲 動畫結束時候透明度
AlphaAnimation(float fromAlpha, float toAlpha) 
//說明:0.0表示徹底透明,1.0表示徹底不透明
myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);

③　設置動畫持續時間

//設置時間持續時間爲 5000毫秒
myAnimation_Alpha.setDuration(5000);

7.2 ScaleAnimation

①　ScaleAnimation類對象定義

private AlphaAnimation myAnimation_Alpha;

②　ScaleAnimation類對象構造

ScaleAnimation(float fromX, float toX, float fromY, float toY,
           int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) 

//第一個參數fromX爲動畫起始時 X座標上的伸縮尺寸    
//第二個參數toX爲動畫結束時 X座標上的伸縮尺寸     
//第三個參數fromY爲動畫起始時Y座標上的伸縮尺寸    
//第四個參數toY爲動畫結束時Y座標上的伸縮尺寸  
/*說明:
                    以上四種屬性值    
                    0.0表示收縮到沒有 
                    1.0表示正常無伸縮     
                    值小於1.0表示收縮  
                    值大於1.0表示放大
*/
//第五個參數pivotXType爲動畫在X軸相對於物件位置類型  
//第六個參數pivotXValue爲動畫相對於物件的X座標的開始位置
//第七個參數pivotXType爲動畫在Y軸相對於物件位置類型   
//第八個參數pivotYValue爲動畫相對於物件的Y座標的開始位置
myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
             Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

③　設置動畫持續時間

//設置時間持續時間爲 700毫秒
myAnimation_Scale.setDuration(700);

7.3 TranslateAnimation

①　TranslateAnimation類對象定義

private AlphaAnimation myAnimation_Alpha;

②　TranslateAnimation類對象構造

//第一個參數fromXDelta爲動畫起始時 X座標上的移動位置    
//第二個參數toXDelta爲動畫結束時 X座標上的移動位置      
//第三個參數fromYDelta爲動畫起始時Y座標上的移動位置     
//第四個參數toYDelta爲動畫結束時Y座標上的移動位置
TranslateAnimation(float fromXDelta, float toXDelta,float fromYDelta, float toYDelta)

③　設置動畫持續時間

//設置時間持續時間爲 2000毫秒
myAnimation_Translate.setDuration(2000);

7.4 RotateAnimation

①　RotateAnimation類對象定義

private AlphaAnimation myAnimation_Alpha;

②　RotateAnimation類對象構造

RotateAnimation(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
            
//第一個參數fromDegrees爲動畫起始時的旋轉角度    
//第二個參數toDegrees爲動畫旋轉到的角度   
//第三個參數pivotXType爲動畫在X軸相對於物件位置類型  
//第四個參數pivotXValue爲動畫相對於物件的X座標的開始位置
//第五個參數pivotXType爲動畫在Y軸相對於物件位置類型   
//第六個參數pivotYValue爲動畫相對於物件的Y座標的開始位置
myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

②　RotateAnimation類對象構造

//設置時間持續時間爲 3000毫秒
myAnimation_Rotate.setDuration(3000);

8.如何使用Java代碼中的動畫效果

使用從View父類繼承過來的方法startAnimation()來爲View或是子類View等等添加一個動畫效果

public void startAnimation (Animation animation)

9.仍是來個栗子吧

9.1 使用XML文件方式

①效果圖以下：

②在XML文件中定義動畫，前面已說起

③主界面佈局，這沒啥好說的，很簡單 o(∩_∩)o

④主界面邏輯代碼，主要就是這個了，控制動畫顯示

package com.yanis.base;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class AnimationActivity extends Activity implements OnClickListener {
    private ImageView imgPic;
    private Button btnAlpha, btnScale, btnTranslate, btnRotate;
    private Animation myAnimation;

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

        intiView();

        initData();
    }

    /**
     * 初始化組件
     */
    private void intiView() {
        imgPic = (ImageView) findViewById(R.id.imgPic);
        btnAlpha = (Button) findViewById(R.id.btnAlpha);
        btnScale = (Button) findViewById(R.id.btnScale);
        btnTranslate = (Button) findViewById(R.id.btnTranslate);
        btnRotate = (Button) findViewById(R.id.btnRotate);
    }

    /**
     * 初始化數據
     */
    private void initData() {
        btnAlpha.setOnClickListener(this);
        btnScale.setOnClickListener(this);
        btnTranslate.setOnClickListener(this);
        btnRotate.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btnAlpha:
            /**
             * 使用XML中的動畫效果 第一個參數Context爲程序的上下文 第二個參數id爲動畫XML文件的引用
             */
            myAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
            imgPic.startAnimation(myAnimation);
            break;

        case R.id.btnScale:
            myAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
            imgPic.startAnimation(myAnimation);
            break;

        case R.id.btnTranslate:
            myAnimation = AnimationUtils.loadAnimation(this,
                    R.anim.translate_anim);
            imgPic.startAnimation(myAnimation);
            break;

        case R.id.btnRotate:
            myAnimation = AnimationUtils
                    .loadAnimation(this, R.anim.rotate_anim);
            imgPic.startAnimation(myAnimation);
            break;

        }
    }
}

9.2 使用Java代碼方式

博文遊戲開發基礎（動畫）中有實例說明，此處再也不贅述。

10. 用Animation-list實現逐幀動畫

栗子效果圖以下：

步驟以下：

①在res/drawable目錄添加圖片素材

②在drawable文件夾中添加動畫Animation-list幀佈局文件

<?xml version="1.0" encoding="utf-8"?>
<!--
    根標籤爲animation-list，其中oneshot表明着是否只展現一遍，設置爲false會不停的循環播放動畫  
    根標籤下，經過item標籤對動畫中的每個圖片進行聲明  
    android:duration 表示展現所用的該圖片的時間長度  

-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/cmmusic_progress_1"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_2"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_3"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_4"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_5"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_6"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_7"
        android:duration="150">
    </item>
    <item
        android:drawable="@drawable/cmmusic_progress_8"
        android:duration="150">
    </item>
</animation-list>

③主界面頁面佈局設置，太簡單，不贅述了

④主界面代碼以下：

package com.yanis.base;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class AnimationActivity extends Activity implements OnClickListener {
    private ImageView imgPic;
    private Button btnStart, btnStop;
    private AnimationDrawable animationDrawable;

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

        intiView();

        initData();
    }

    /**
     * 初始化組件
     */
    private void intiView() {
        imgPic = (ImageView) findViewById(R.id.imgPic);
        btnStart = (Button) findViewById(R.id.btnStart);
        btnStop = (Button) findViewById(R.id.btnStop);
    }

    /**
     * 初始化數據
     */
    private void initData() {
        btnStart.setOnClickListener(this);
        btnStop.setOnClickListener(this);
        //Sets a drawable as the content of this ImageView.
        imgPic.setImageResource(R.drawable.loading_anim);
        //給動畫資源賦值
        animationDrawable = (AnimationDrawable) imgPic.getDrawable();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btnStart:
            animationDrawable.start();//開始
            break;

        case R.id.btnStop: 
             animationDrawable.stop(); //中止
            break;

        }
    }
}

本文地址：http://www.cnblogs.com/yc-755909659/p/4290114.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。