一、視圖動畫標簽 0.概述視圖動畫有5中類型組成： alpha：漸變透明度 scale：漸變尺寸伸縮 translate：畫面變換位置移動 rotate：畫面轉移旋轉移動 set：定義動畫集 1.scale標簽 scale_anim.xml pivotX有三種數值：直接數字，則是以控制項為原點坐標 ...

一、視圖動畫標簽

0.概述

視圖動畫有5中類型組成：
alpha：漸變透明度
scale：漸變尺寸伸縮
translate：畫面變換位置移動
rotate：畫面轉移旋轉移動
set：定義動畫集

1.scale標簽

scale_anim.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">  	 //動畫持續時間

    <scale
        android:fromXScale="0.1" //初始X軸的縮放
        android:fromYScale="0.1" //初始y軸的縮放
        android:toXScale="1.4"   //目標x軸的縮放
        android:toYScale="1.4"   //目標y軸的縮放
        android:pivotX="150"     //以控制項的位置原點坐標，動畫開始的起始位置x軸坐標
        android:pivotY="150"/>   //以控制項的位置原點坐標，動畫開始的起始位置y軸坐標
</set>

pivotX有三種數值：

150 直接數字，則是以控制項為原點坐標的xy的坐標值（150,150），以目標控制項為原點

150% 百分比的，是以控制項為原點坐標的，為控制項的寬度的150%的坐標，150%那就是控制項寬度的150%

150%p 上面同理，但是以父控制項的150%

java代碼

  startAnimBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //裝載動畫 R.anim.scale_anim 為動畫位置
                Animation scaleAnimation=AnimationUtils.loadAnimation(mContext,R.anim.scale_anim);
                //啟動動畫
                scaleTV.startAnimation(scaleAnimation);
            }
        });

效果

2.共同屬性

所有動畫都繼承自Animation類，所以有一些共同的屬性。

android:duration="3000"  //動畫持續時間，毫秒單位
android:fillAfter="true" //true動畫結束，保持控制項結束時的狀態
android:fillBefore="true"//true動畫結束，保持控制項最初始狀態
android:repeatCount="3"  //動畫重覆次數，infinite表示無限迴圈
android:repeatMode="restart" //重覆的類型，restart表示從頭開始，reverse表示倒序回放
android:interpolator="@android:interpolator/accelerate_cubic" //插值器，控制速度等

看看回放和倒序回放
倒序回放：

android:repeatCount="3"
android:repeatMode="reverse"

倒序回放.gif

回放：

android:repeatCount="3"
android:repeatMode="restart"

回放.gif

3.alpha標簽

<alpha
  android:duration="3000" //持續時間
	android:fromAlpha="0.1" //初始透明度
	android:toAlpha="1"/>   //最大透明度  數值在0.0~1.0之間

效果：

透明度.gif

4.rotate標簽

<alpha
	android:fromAlpha="0.01" //初始角度
	android:toAlpha="1"/>    //旋轉角度  取值範圍可以為負值，為逆時針，正值為順時針

效果：

旋轉.gif

5.translate標簽

   <translate
        android:fromXDelta="50"  //以控制項為原坐標，x軸加50 為起始X軸
        android:fromYDelta="50"  //以控制項為原坐標，y軸加50 為起始y軸
        android:toXDelta="400"   //目標x軸
        android:toYDelta="400" /> //目標y軸

效果：

位移.gif

7.set標簽

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="8000"
    android:fillAfter="false"
    android:fillBefore="true">
    <scale
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="150"
        android:pivotY="150"
        android:toXScale="1.4"
        android:toYScale="1.4" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"/>
    <rotate
        android:fromDegrees="0.0"
        android:toDegrees="360"/>
    <translate
        android:fromXDelta="50"
        android:fromYDelta="50"
        android:toXDelta="300"
        android:toYDelta="300" />
</set>

效果：

完整動畫.gif

二、視圖動畫代碼實現

0.概述

這些標簽，都對應一個類，但他們都是派生自Animation類。

scale	ScaleAnimation
alpha	AlphaAnimation
rotate	RotateAnimation
translate	TranslateAnimation
set	AetAnimation

1.ScaleAnimation

四個構造方法來載入scale動畫

ScaleAnimation(Context context, AttributeSet attrs)
    
ScaleAnimation(float fromX, float toX, float fromY, float toY)
    
ScaleAnimation(float fromX, float toX, float fromY, float toY,
            float pivotX, float pivotY)
    
ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

ScaleAnimation(
float fromX, //初始x軸的縮放

float toX, //目標縮放

float fromY, //初始y軸縮放

float toY, //目標y軸縮放

int pivotXType, float pivotXValue, //以原坐標為原點，x軸的起始點

int pivotYType, float pivotYValue) //以原坐標為原點，y軸的起始點

pivotXType的類型有：

RELATIVE_TO_SELF 百分比，相對自身百分比 50%

RELATIVE_TO_PARENT 百分比，相對父控制項百分比 50%p

ABSOLUTE 具體數值比如 50

2.AlphaAnimation

AlphaAnimation(Context context, AttributeSet attrs)
    
AlphaAnimation(float fromAlpha, float toAlpha)

AlphaAnimation(
float fromAlpha, //初始透明度

float toAlpha) //目標透明度

3.RotateAnimation

RotateAnimation(Context context, AttributeSet attrs)
    
RotateAnimation(float fromDegrees, float toDegrees)
    
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
    
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue)

RotateAnimation(
float fromDegrees, //初始角度

float toDegrees, //目標角度

int pivotXType, float pivotXValue,
int pivotYType, float pivotYValue)

4.TranslateAnimation

TranslateAnimation(Context context, AttributeSet attrs)
    
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)  
    
TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue)

TranslateAnimation(
int fromXType, float fromXValue, //起始x軸坐標

int toXType, float toXValue, //目標x軸坐標

int fromYType, float fromYValue, //起始y軸坐標

int toYType, float toYValue) //目標y軸坐標

5.AnimationSet

AnimationSet(Context context, AttributeSet attrs)
    
AnimationSet(boolean shareInterpolator)   //true 共用一個插值器，false 各自定義插值器

都是繼承自Animation，有這些共同屬性

animationSet1.setDuration(3000);  //動畫時長
animationSet1.scaleCurrentDuration(4.0f);  //當前動畫時間
animationSet1.setFillAfter(true); //true動畫結束，保持控制項結束時的狀態
animationSet1.setFillBefore(true); //true動畫結束，保持控制項最初始狀態
animationSet1.setRepeatMode(Animation.RESTART); //迴圈模式
animationSet1.setStartOffset(1000); //在什麼時間停止動畫
animationSet1.setStartTime(500); //在什麼時間開始動畫
animationSet1.setRepeatCount(5);  //迴圈次數
animationSet1.setFillEnabled(true); //true動畫結束，保持控制項結束時的狀態

裝載所有動畫效果

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

                AlphaAnimation alphaAnimation1=new AlphaAnimation(0.1f,0.5f);
                RotateAnimation rotateAnimation1=new RotateAnimation(0.1f,0.1f);
                TranslateAnimation translateAnimation1=new TranslateAnimation(
                        Animation.ABSOLUTE,
                        50,
                        Animation.ABSOLUTE,
                        50);

                AnimationSet animationSet1=new AnimationSet(true); //裝載
                animationSet1.addAnimation(scaleAnimation1);
                animationSet1.addAnimation(alphaAnimation1);
                animationSet1.addAnimation(rotateAnimation1);
                animationSet1.addAnimation(translateAnimation1);

                animationSet1.setDuration(3000);
                animationSet1.scaleCurrentDuration(4.0f);
                animationSet1.setFillAfter(true);
                animationSet1.setFillBefore(true);
                animationSet1.setRepeatMode(Animation.RESTART);
                animationSet1.setStartOffset(1000);
                animationSet1.setStartTime(500);
                animationSet1.setRepeatCount(5);
                animationSet1.setFillEnabled(true);

6.Animation

animationSet1.cancel(); //取消動畫
animationSet1.reset();  //將控制項重置到初始化狀態
animationSet1.setAnimationListener(AnimationListener listener); //設置監聽

監聽,利用監聽可以實現動畫的連續效果，比如，先實現縮放，再實現位移

  animationSet1.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        //動畫開始
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        //動畫結束
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                        //動畫結束
                    }
                });

三、基礎插值器

0.概述

控制動畫變化速率的值，就叫插值器，也叫加速器。有Interpolator類來決定。

使用方法
在xml中使用：
android:interpolator="@android:anim/accelerate_interpolator"

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:duration="3000"
    android:fillAfter="false"
    android:fillBefore="true">
</set>

在java代碼中使用;
animationSet1.setInterpolator(new AccelerateInterpolator());

1.系統插值器

系統已經定義了一些常見的插值器

AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	先加速，後減速
AccelerateInterpolator	@android:anim/accelerate_interpolator	開始慢，後一直加速
DecelerateInterpolator	@android:anim/decelerate_interpolator	開始一瞬間加到最大，後慢慢減慢
LinearInterpolator	@android:anim/linear_interpolator	勻速加速器
BounceInterpolator	@android:anim/bounce_interpolator	模擬自由落體回彈的效果
AnticipateInterpolator	@android:anim/anticipate_interpolator	反方向效果一段時間，再執行正常動畫，如，旋轉。先反旋轉一段距離
OvershootInterpolator	@android:anim/overshoot_interpolator	動畫結束之後，再執行一段時間
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	開始時，反方向效果一段時間，結束時，超過效果時間一段時間
CycleInterpolator(1)	@android:anim/cycle_interpolator	動畫特定迴圈播放的次數，速率沿正弦曲線變化

四、動畫示例

1.鏡頭由遠及近

控制項

<ImageView
        android:id="@+id/img"
        android:src="@drawable/ali"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

java代碼


                ScaleAnimation scaleAnimation=new ScaleAnimation(
                        0.5f,
                        1.2f,
                        0.5f,
                        1.2f,
                        Animation.RELATIVE_TO_SELF,0.5f,
                        Animation.RELATIVE_TO_SELF,0.5f);
                scaleAnimation.setFillAfter(true);
                scaleAnimation.setInterpolator(new AccelerateInterpolator());
                scaleAnimation.setDuration(6000);
                imgIV.startAnimation(scaleAnimation);

效果：

由遠及近.gif

2.載入框效果

   <ImageView
        android:id="@+id/load"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:src="@drawable/load" />

     RotateAnimation rotateAnimation=new RotateAnimation(
                        0,
                        360,
                        Animation.RELATIVE_TO_SELF,0.5f,
                        Animation.RELATIVE_TO_SELF,0.5f);
                rotateAnimation.setFillAfter(true);
                rotateAnimation.setRepeatCount(Animation.INFINITE); //無限迴圈
                rotateAnimation.setInterpolator(new LinearInterpolator()); //勻速
                rotateAnimation.setDuration(2000);
                loadIV.startAnimation(rotateAnimation);

效果：

載入.gif

編程中我們會遇到多少挫折？表放棄，沙漠盡頭必是綠洲。

Android 視圖動畫

一、視圖動畫標簽

0.概述

1.scale標簽

2.共同屬性

3.alpha標簽

4.rotate標簽

5.translate標簽

7.set標簽

二、視圖動畫代碼實現

0.概述

1.ScaleAnimation

2.AlphaAnimation

3.RotateAnimation

4.TranslateAnimation

5.AnimationSet

6.Animation

三、基礎插值器

0.概述

1.系統插值器

四、動畫示例

1.鏡頭由遠及近

2.載入框效果