動かす

# 動かす

DevFest Kansai 2016

2016/11/27

荒木佑一

---

# 自己紹介

荒木佑一

[@yuichi_araki](https://twitter.com/yuichi_araki)

Developer Programs Engineer @Google

- サポート ライブラリ (主に design と transition)
- Google I/O アプリ
- Google Santa Tracker アプリ
- [d.android.com/samples](http://d.android.com/samples) のサンプルいろいろ
- [CameraView](https://github.com/google/cameraview)
]

---

# 意味のある動き

マテリアル デザイン

[Choreography](https://material.google.com/motion/choreography.html) (振り付け)

- ユーザーが操作を行う
- 画面表示が変わる

両者の関係性を明瞭にするためアニメーションが有効
]

???

- Android アプリにおけるアニメーションの重要性が高まっている

---

# 本日の話題

.card[
- Animation
  - ViewSwitcher
  - Activity/Fragment のアニメーション
- Animator
  - ViewPropertyAnimator
  - animateLayoutChanges
  - Transition

サンプル: https://goo.gl/zaR6H2
]

???

- Android で利用できるアニメーション関連機能をざっとおさらい
- 以下については本日は話しません
  - Drawable のアニメーション (VectorDrawableCompat, AnimationDrawable)
  - Shared Element Transition (Activity/Fragment Transition)

---

# Animation と Animator

---

# Animation と Animator の共通点

コード (Java) またはリソース (XML) で定義・生成できる

リスナーを設定できる

AnimationSet/AnimatorSet で複数組み合わすことができる

Interpolator を設定できる
]

---

# 相違点 1: API レベル

## Animator

11 (Honeycomb)
]

???

- ちなみに Android のバージョンに名前が付いたのは Android 1.5 Cupcake (API レベル 3) が初めて
  - API レベル 1 と 2 に名前はない

---

# 相違点 2: 動かす対象

View

## Animator

何でも
]

???

- Animation は View Animation とも呼ばれる

---

# 相違点 3: 動かす属性

- 平行移動 (translate)
- 回転 (rotate)
- 透過 (alpha)
- 拡大縮小 (scale)

## Animator

対象に setter があれば何でも
]

---

# 使い分けの方針

- Gingerbread 以前をサポートする必要があるとき

## Animator

- 上記以外
- こちらを基本としたい
]

---

# Animation

---

# Animation の使い方

```xml
<translate
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="@integer/duration_long"
 android:fromXDelta="0"
 android:toXDelta="500"/>
```

```java
View target = ...;
Animation translate =
    AnimationUtils.loadAnimation(context, R.anim.translate);
target.startAnimation(translate);
```
]

???

- 平行移動の例
- XML で Animation を定義してコードから利用している
- コードで Animation を生成することもできる
- Gingerbread 向けでない限り直接使うことはもうあまりないのでは
- Animation は View を動かしたあと元の状態に戻す

---

# ViewSwitcher

---

# ViewSwitcher

FrameLayout を継承した ViewGroup

- ViewFlipper
- ViewSwitcher
- ImageSwitcher
- TextSwitcher
]

???

---

# 例: TextSwitcher

mTextSwitcher = (TextSwitcher) view.findViewById(R.id.text);
mTextSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
    @Override
    public View makeView() {
        // TextView を生成
        return LayoutInflater.from(MainActivity.this)
                .inflate(R.layout.switcher_text, mTextSwitcher, false);
    }
});
mTextSwitcher.setText("Hello"); // 始めはアニメーションなし
mTextSwitcher.setInAnimation(this, R.anim.text_in);
mTextSwitcher.setOutAnimation(this, R.anim.text_out);
```

```java
mTextSwitcher.setText("Bonjour"); // アニメーション付きで変更
```
]

???

- 例は TextSwitcher だが、ImageSwitcher など他の仲間もだいたい使い方は同じ
  - 最初に ViewFactory を設定する必要がある
  - この場合 TextSwitcher なので TextView を生成する
- テキストが表示されるときと消えるときのアニメーションを設定する
- 何かが変化したことをわかりやすくできる
  - リアルタイムでテキストが変わっていくカウントダウンなど
  - ロード中インジケーターとコンテンツの切り替え

---

# Activity/Fragment のアニメーション

---

# Activity のアニメーション

.card[
```java
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_sample);
    // 起動時のアニメーション
    `overridePendingTransition`(
        R.anim.slide_in_end, R.anim.slide_out_start);
}
```

```java
@Override
public void finish() {
    super.finish();
    // 終了時のアニメーション
    `overridePendingTransition`(
        R.anim.slide_in_start, R.anim.slide_out_end);
}
```
]

???

- Activity が起動するときと終了するときのアニメーションを指定できる
- デフォルトのアニメーションから変更したいときに

---

# Fragment のアニメーション

```java
getSupportFragmentManager().beginTransaction()
        .`setCustomAnimations`(
                R.anim.slide_in_end, R.anim.slide_out_start,
                R.anim.slide_in_start, R.anim.slide_out_end)
        .addToBackStack(null)
        .replace(R.id.container, sample.createFragment())
        .commit();
```
]

???

- Animation まとめ
  - Animation 自体をそのまま使うことはあまりないはずだが、一部の高レベル機能はまだ有用
  - 使わないでいいなら使わない方が学習コスト的にいいのでは

---

# Animator

---

# Animator

何かの値を変化させる

## ObjectAnimator (extends ValueAnimator)

変化した値を対象にセットする

## AnimatorSet

複数の Animator を組み合わせる
]

---

# 名前の罠

- ViewAnimator
  - ViewSwitcher の親クラス
- AdapterViewAnimator
  - StackView の親クラス
- ViewPropertyAnimator
  - 簡易アニメーション (内部で Animator を利用)
- StateListAnimator
  - Drawable の状態変化アニメーション (内部で Animator を利用)
]

---

# ValueAnimator

```java
Animator animator = ValueAnimator
        .ofInt(0, 100)      // 範囲
        .setDuration(5000); // ミリ秒
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator a) {
        int value = (int) `a.getAnimatedValue()`;
        // … value を使って何かする
    }
});
animator.start();
```
]

???

- コードでも XML でも生成できる
 - XML で作るなら <animator> タグ
- シンプル
 - 設定した型で設定した範囲の値が返ってくるだけ
 - デフォルトでサポートされている型は int, float, color 
 - 返ってきた値で何をするかは利用者次第

---

# ValueAnimator (XML)

.card[
```xml
<animator
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:valueFrom="0"
 android:valueTo="100"
 android:valueType="intType"
 android:duration="5000"/>
```

```java
ValueAnimator animator = (ValueAnimator) AnimatorInflater
    .loadAnimator(context, R.animator.count_up);

// AnimatorUpdateListener を設定

animator.start();
```
]

---

# ObjectAnimator

- 対象 Target に値を設定できる
  - セッター (set なんとか) が必要
- 開始値を自動的に取得する
  - ゲッター (get なんとか) が必要
]

---

# View をアニメーション

.card[
```java
View target = view.findViewById(R.id.target);
ObjectAnimator.ofFloat(target, "translationX", 500.f)
        .setDuration(1000)
        .start();
```
]

???

- View のプロパティー、ここでは translationX をアニメーションさせている
- "translationX" は文字列で指定されている
  - ObjectAnimator はどうやってプロパティーを View にセットしているのか

---

# 何でもアニメーション

.card[
```java
public class Target {
    private int mValue;
    Target(int value) { mValue = value; }
    void `setValue`(int value) { mValue = value; }
    int `getValue`() { return mValue; }
}
```

```java
Target target = new Target(10);
ObjectAnimator
        .ofInt(target, "value", 110)
        .setDuration(5000)
        .start();
```
]

???

- ObjectAnimator は何でもアニメーションできる
- カスタム View でカスタムのゲッター・セッターがあれば、それをアニメーションさせることもできる

---

# ObjectAnimator (XML)

.card[
```xml
<objectAnimator
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:propertyName="translationX"
 android:valueTo="500"
 android:duration="1000"
 android:valueType="floatType"/>
```

```java
Animator animator = AnimatorInflater
    .loadAnimator(getContext(), R.animator.slide);
animator.setTarget(view);
animator.start();
```
]

---

# ValueAnimator と ObjectAnimator

- 値を変化させるだけ
  - リスナーで変化した値を取得して利用
- 初期値指定 必須

## ObjectAnimator

- 変化した値を対象にセットする
  - 変化した値は対象のセッターでセット
- 初期値指定 任意
  - 省略した場合は対象のゲッターで現在値を取得
]

---

# AnimatorSet

.card[
```java
AnimatorSet set = new AnimatorSet();
set.playTogether(
    ObjectAnimator.ofFloat(view1, "translationX", 500.f),
    ObjectAnimator.ofPropertyValuesHolder(view2,
        PropertyValuesHolder.ofFloat("alpha", 0.f),
        PropertyValuesHolder.ofFloat("translationY", 100.f)));
set.setDuration(1000);
set.start();
```

複数の Animator を同時・逐次再生できる

対象が同じなら ObjectAnimator と PropertyValuesHolder を組み合わせることもできる
]

---

# ViewPropertyAnimator

---

# ViewPropertyAnimator

```java
target.animate().translationX(500.f).alpha(0.f);
```

または

```java
ViewCompat.animate(target).translationX(500.f).alpha(0.f);
```

.start() がなくても開始する
]

???

- ViewCompat を使っても古いバージョンでアニメーションが起こるわけではない
- start() があれば即時開始
  - ValueAnimator や ObjectAnimator の場合 start() がないと開始しないので

---

# ViewPropertyAnimator vs ObjectAnimator

- 簡単、型安全
- AnimatorSet で組み合わせられない
- 勝手に始まる

## ObjectAnimator

- View でなくても使える柔軟性
- やや冗長
]

???

- 使いやすいからといって何でも ViewPropertyAnimator にするのは逆に大変
  - ある程度複雑なことは ObjectAnimator や ValueAnimator の仕様を検討する

---

# animateLayoutChanges

---

# animateLayoutChanges

```xml
<LinearLayout
 android:id="@+id/box"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 `android:animateLayoutChanges="true"`
 android:orientation="vertical"/>
```

```java
// 追加
mBox.addView(view);

// 削除
mBox.removeView(view);
```
]

???

- どんな ViewGroup でも使える
- XML の属性だけなら古い API レベルでも無視されるだけ

---

# Transition

---

# Transition

サポートライブラリで 14 までバックポート
]

---

# setVisibility をアニメーション

```java
    mTarget.setVisibility(
        mTarget.getVisibility() == View.VISIBLE ?
        View.GONE :
        View.VISIBLE);
```

- VISIBLE → GONE
- GONE → VISIBLE
- アニメーションの途中で切り替えたら？
- その View 以外にも View があったら？
]

???

- VISIBLE → GONE: アニメーションで alpha を 0 に。アニメーションが完了したら setVisibility(GONE) するリスナーをセットしておく。
- GONE → VISIBLE: 先に setVisibility(VISIBLE) する。その際 alpha は 0 で。アニメーションで alpha を 1 にする。
- 途中で切り替えても大丈夫にするにはアニメーションのオブジェクトを保持しておいて、現在アニメーション中か判別する必要がある
- 開始する alpha の値は現在の alpha でなくてはいけない
- 他の View を移動するアニメーションも行う必要がある

---

# beginDelayedTransition

.card[
```java
*   TransitionManager.beginDelayedTransition(mRoot);
    mTarget.setVisibility(
        mTarget.getVisibility() == View.VISIBLE ?
        View.GONE :
        View.VISIBLE);
```

デフォルト (AutoTransition) で対応しているもの

- アニメーション前後で存在の有無が違う View はフェードイン・フェードアウト
- 位置・サイズが違う View は平行移動・サイズ変更
]

???

- この一行だけでアニメーションができる
- 他の例
  - View の LayoutParams を書き換えて左寄せと右寄せを切り替える
  - LinearLayout の先頭の View が GONE になって後ろの View がずれる

---

# カスタム Transition

- void captureStartValues(TransitionValues)
- void captureEndValues(TransitionValues)

取得した値にしたがって Animator を生成する

- Animator createAnimator(ViewGroup, TransitionValues, TransitionValues)

```java
TransitionManager.beginDelayedTransition(mRoot, `new MyTransition()`);
```
]

---

# まとめ

???

何でも View.animate で解決しようとしない

---

# Android プラットフォーム

# サポート ライブラリ

## b.android.com

### バグ報告、機能要望はこちらから
### ※ スクリーンショット (動画) 重要

???

- Animator: start() で開始
- ViewPropertyAnimator: start() しなくても開始