---
# System prepended metadata

title: Drawable Animation
tags: [Android, 基礎, Java]

---

# Drawable Animation

###### tags:  `Android` `Java` `基礎`
###### 2018/10/16


## 目錄
[TOC]

## Drawable Animation是什麼

- 逐幀動畫，用在比較簡單的動畫
- 會一個接一個地加載多個Drawable資源來創建動畫
- 依照設置的duration以及item順序切換drawable，達到動畫的效果
- Drawable提供兩種具有動畫效果的標籤: animation-list & animated-rotate 
- [offical document](https://developer.android.com/guide/topics/graphics/drawable-animation)

## 動畫效果1.  animation-list

-逐幀動畫

### 怎麼用：
#### i) 在res/drawable/ 裡面新增一個XML檔
![](https://i.imgur.com/Fio8fAF.png)

```xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/baseline_android_black_18dp"
        android:duration="1000" />
    <item
        android:drawable="@drawable/baseline_check_circle_black_18dp"
        android:duration="1000" />
    <item
        android:drawable="@drawable/baseline_check_circle_outline_black_18dp"
        android:duration="1000" />

</animation-list>`
```

 - android:oneshot
    設置為true:它將僅循環一次然後停止並保持最後一幀; 設置為false，則動畫將循環播放

#### ii) 在要用這個動畫的Activity啓動動畫
 
![](https://i.imgur.com/UYPuUUT.png)


 ``` java
ImageView image = findViewById(R.id.imageView);
image.setBackgroundResource(R.drawable.animation_list);
imageAnimation = (AnimationDrawable) image.getBackground();
imageAnimation.start();
 ```
### 效果：

![](https://i.imgur.com/E7DRozs.gif)

 
## 動畫效果2. animated-rotate 

- 設置旋轉中心並不斷旋轉的動畫

### 怎麼用：
#### i) 在res/drawable/ 裡面新增一個XML檔

![](https://i.imgur.com/UAE69uS.png)

``` xml
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/baseline_android_black_18dp"
    android:pivotY="50%"
    android:pivotX="50%"
    android:visible="false"

/>
```
- android:pivotX
    旋轉起點 X 軸坐標，可以是整數值、百分數（或者小數）、百分數p 三種樣式，比如 50、50% / 0.5、50%p。當屬性值為數值時，表示在當前 View 的左上角，即原點處加上 50px，作為起始點；如果是百分數，比如 50%，表示在當前控件的左上角加上自己寬度的 50% （即自身寬度中心）作為起始點；如果是 50%p（字母 p 是 parent 的意思），取值的基數是父控件，那麼 50%p 就是表示在當前的左上角加上父控件寬度的 50% 作為起始點 x 軸坐標。

    總之就是：相對於對象的頂部邊緣的像素（50）；或相對於物體的頂部邊緣的百分比 (例如 「50%」)；或相對於父容器的頂部邊緣的百分比 (例如 「50%p」).

- android:pivotY
    旋轉起點 Y 軸坐標

- android:visible


#### ii) 在要用這個動畫的Activity設定動畫
![](https://i.imgur.com/jKYOfZj.png)

``` java
image = findViewById(R.id.imageView);
image.setBackgroundResource(R.drawable.animation_rotated);
```
### 效果：
![](https://i.imgur.com/Y7Veabn.gif)
