Android 常用動畫之RotateAnimation

前兩天接到任務做一個UI，有用到動畫，於是抽空看了下Android動畫相關知識。

Android Animation共有四大類型，分別是

Alpha      透明度動畫

Scale      大小伸縮動畫

Translate 位移動畫

Rotate     旋轉動畫

這四類動畫按模式又可分為：

tweened animation(漸變動畫) —— alpha  與   scale

frame by frame(畫面轉換動畫) ——  translate  與 rotate

講一下我所了解到的rotate動畫的各個屬性：

在XML中：

 

官方給予的Rotate屬性如上所示。

android:drawable    需要進行旋轉動畫的圖片

android:fromDegrees  旋轉的起始點(旋轉開始的角度)

android:toDegrees     旋轉的結束點(旋轉最終角度)

andoird:pivotX       旋轉點的X值(距離左側的偏移量)

android:pivotY旋轉點的Y值(距離頂部的偏移量)

android: visible這個好理解，就是圖片初始的顯示狀態

我對這個的理解是：

rotate動畫是以設置的旋轉點(pivotX,pivotY)為坐標原點,順時針方向從旋轉起始角度(fromDegrees)到旋轉最終角度(toDegrees)的動畫，

其中旋轉點默認為圖片左上角是(0,0)。

現在寫一個rotate動畫的XML文件：rotate_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" >
      <rotate
            android:fromDegrees="0"
            android:interpolator="@android:anim/linear_interpolator"//設置轉動速率，這里設置的是勻速轉動
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="359"
            android:duration = "1500"
            android:repeatCount = "-1"
            android:drawable = "@drawable/ic_launcher"
            android:visible = "true">
        </rotate>

</rotate>

 

 

這里需要注意下：

android:pivotX 與 android:pivotY 這兩個屬性值為float，可以給具體數也可以給百分比。比如你知道圖片大小是100，你可以給(50,50)表示旋轉中心點距圖片左邊50，右邊50

如果不知道圖片的准確大小，可以跟代碼所示，給百分比。

上面的代碼中還有一些在官方API中並未提及的屬性，但是這些屬性依舊可以使用到。

 

android:interpolator：這個屬性是用來設置轉動速率的。

LinearInterpolator為勻速效果，Accelerateinterpolator為加速效果、DecelerateInterpolator為減速效果，

android:repeatCount 重復的次數，默認為0，必須是int，可以為-1表示不停止

android:duration屬性表示從android:fromDegrees轉動到android:toDegrees所花費的時間，單位為毫秒。可以用來計算速度。

android:startOffset 在調用start函數之后等待開始運行的時間，單位為毫秒，若為10，表示10ms后開始運行

android:repeatMode 重復的模式，默認為restart，即重頭開始重新運行，可以為reverse即從結束開始向前重新運行。

在android:repeatCount大於0或為infinite時生效

android:detachWallpaper 表示是否在壁紙上運行

android:zAdjustment 表示被animated的內容在運行時在z軸上的位置，默認為normal。normal保持內容當前的z軸順序top運行時在最頂層顯示bottom運行時在最底層顯示

 

以上屬性中，博主親測，均可以正常使用。

 

布局文件 activity_main.xml，沒什么特別的：

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

 

 

MainActivity.java

 

package com.example.rotateanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Animation rotate = AnimationUtils.loadAnimation(this, R.drawable.rotate_anim);
        ((ImageView)findViewById(R.id.img)).setAnimation(rotate);
        ((ImageView)findViewById(R.id.img)).startAnimation(rotate);
    }
}

這樣，運行工程，一個旋轉的Android小綠人就出現了。PS：不知道怎么制作動態圖，效果展示不了。

 

在編寫過程中有兩個地方需要大家注意：

1、在rotate_anim.xml文件中，最外層的item名字要為rotate，而不是set。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
      <rotate
            android:fromDegrees="0"
            android:interpolator="@android:anim/linear_interpolator"//設置轉動速率，這里設置的是勻速轉動
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="359"
            android:duration = "1500"
            android:repeatCount = "-1"
            android:drawable = "@drawable/ic_launcher"
            android:visible = "true">
        </rotate>

</set>

如果代碼如上所示，是set的話，屬性android:interpolator就會失效。具體原因我沒有找到，有知道的朋友希望能在博文下方解惑，多謝。

 

這種情況下 需要在代碼中設置動畫的interpolator：

 

Animation rotate = AnimationUtils.loadAnimation(this, R.drawable.rotate_anim);
        LinearInterpolator lin = new LinearInterpolator();
        rotate.setInterpolator(lin);
        ((ImageView)findViewById(R.id.img)).setAnimation(rotate);
        ((ImageView)findViewById(R.id.img)).startAnimation(rotate);

 

 

2.我試過在布局文件中直接設置ImageView的src：android:src="@drawable/rotate_anim" 結果是圖片會出現，但是不會旋轉，所以不要這樣做。

3. 如果ImageView本身就帶圖片了，那么rotate里面設置的drawable屬性是無效的。會優先使用ImageView自身的圖片

4.設置android:drawable屬性的時候，不要忘了設置android:visible = "true"，因為它默認是false(不可見)的。

 

 

 

在Java代碼中：

RotateAnimation共有三個構造方法，這里詳細講述第三個，也就是參數最多的那個。

下面是Google官網中對於RotateAnimation的相關參數介紹：

 

這里面大部分參數已經在上面介紹過了，重點說下pivotXType與pivotYType

int pivotXType,  動畫在X軸相對於物件位置類型，與下面的pivotXValue結合，確定X軸上旋轉中心。

可能值為：Animation.ABSOLUTE，Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT

如果pivotXType=Animation.ABSOLUTE，則此參數為旋轉中心在屏幕上X軸的值；

如果pivotXType=Animation.RELATIVE_TO_PARENT，則參數pivotXValue為旋轉中心在父控件水平位置百分比，如0.5表示在父控件水平方向中間位置；
如果pivotXType=Animation.RELATIVE_TO_SELF，則參數pivotXValue為旋轉中心在控件自身水平位置百分比，如果X和Y的Value都設置為0.5，則該控件以自身中心旋轉。

好了，貼代碼： activity_main.xml

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/>

</RelativeLayout>

MainActivity.java

package com.example.rotateanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private ImageView img;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView) findViewById(R.id.img);
        //用xml實現
    /*    Animation rotate = AnimationUtils.loadAnimation(this, R.drawable.rotate_anim);
//        LinearInterpolator lin = new LinearInterpolator();
//        rotate.setInterpolator(lin);
        img.setAnimation(rotate);
       img.startAnimation(rotate);*/
        //用Java code實現
        RotateAnimation rotate  = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        LinearInterpolator lin = new LinearInterpolator();
        rotate.setInterpolator(lin);
        rotate.setDuration(1500);//設置動畫持續時間
        rotate.setRepeatCount(-1);//設置重復次數
        rotate.setFillAfter(true);//動畫執行完后是否停留在執行完的狀態
        rotate.setStartOffset(10);//執行前的等待時間
        img.setAnimation(rotate);
    }
}

rotate里還有很多set屬性的方法，跟XML中的屬性一一對應，有興趣的可以自己去嘗試一下。

 

原創博文，轉載請注明出處

以上就是RotateAnimation的內容，有不對的地方歡迎指正~

點擊下載源碼

參考文章：

1.http://my.oschina.net/ryanisme/blog/109674

2.http://www.android100.org/html/201304/24/2282.html

3.http://blog.csdn.net/jason0539/article/details/16370405