L Developer Preview マテリアルデザイン - アニメーション

原文
マテリアルデザイン内でのアニメーションがユーザーのアクションに対するフィードバックとアプリ内でユーザーと対話するときの視覚的な一貫性を提供します。マテリアルテーマは標準でボタンとactivityの移り変わりのために複数のアニメーションを提供し、Android L Developer Previewが提供する追加APIはそれらのアニメーションをカスタマイズし、新しいアニメーションを作ることが出来ます。
・Touch feedback
・Reveal effect
・Activityの切り替え
・Curved motion
・View状態の変化

Touch feedback

ボタンのための標準のフィードバックは新しいRippleDrawableクラスを使用し、波紋エフェクトにより異なる状態に切り替わります。

殆どの場合において、この機能を使用するためには波紋の範囲をviewに留めるためにandroid:attr/selectableItemBackgroundでbackgroundを指定するか、Viewを超えて波紋を広げるためにandroid:attr/selectableItemBackgroundBorderlessを指定する必要があります。RippleDrawable を作ってあなたのViewにセットすることも出来ます。あるいはripple属性を使ってXMLリソースとしてRippleDrawable を定義することも出来ます。Android L Develoepr PreviewはRipple effectを使ってselection colorをアニメーションしています。

標準のタッチフィードバックカラーを変更するために、テーマのandroid:colorControlHighlight属性を使ってRippleDrawable objectsに色をアサインできます。

Reveal effect

ViewAnimationUtils.createCircularRevealメソッドにより、Viewの表示・非表示を行うときに円形に切り抜かれたアニメーションを適用できます。
このエフェクト使って、前方の非表示ビューを表示する。

// 前方の非表示View
View myView = findViewById(R.id.my_view);

// くり抜く円の中央部分を求める
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// くり抜く円の最終的な半径を求める
int finalRadius = myView.getWidth();

// Viewのためのアニメーションを作成して開始する
// (初期値の半径はゼロ)
ValueAnimator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

このエフェクトを使って、前面の表示ビューを非表示にする

// 前面に表示されているview
final View myView = findViewById(R.id.my_view);

// 切り抜く円の中央を求める
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// 切り抜く円の最初の半径を求める
int initialRadius = myView.getWidth();

// アニメーションを作成する（最後の半径はゼロ）
ValueAnimator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// アニメーションが完了しviewが非表示になったら呼び出される
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// アニメーションを開始
anim.start();

Activityの切り替え

enter/exit transition、そして要素を共有すりActivity間の切り替えでカスタムアニメーションを指定することが出来ます。

・ enter transitionはActivityのViewがどうやってシーンに入ってくるか決定します。例えば、explode enter transitionはViewがそれぞれシーンの外側から飛んできてスクリーンの中央に集まります。
・ exit transitionはActivityのViewがどうやってシーンから出ていくかを決定します。例えば、explode exit transitionはViewが中央から外側に向かって飛んでいきます。
・shared element transitionは2つの移り変わるActivity間で共有されているViewがどのようにActivity間で変化するかを決定します。例えば、2つのActivityが同じ画像を異なる場所とサイズで持っていた時、moveImage shared elementは画像をActivity間でスムーズに移動、スケールさせます。

Android L Developer Previewはこれらのenter transitionとexit transitionをサポートします。
・explode シーンの中央に向かってviewが入ったり出たりします
・slide シーンの端からViewが入ってきたり出たりします。
・fade シーンにViewがフェードイン・アウトしたりします。

それぞれのTransitionはenterあるいはexittransitionをサポートするandroid.transition.Visibilityクラスを継承しています。より詳細はAPIreferenceの android.transition.Transitionクラスを見てください。

Android L Developer Previewは以下のShared elements transitionもサポートしています。

・changeBounds ターゲットviewのレイアウトがアニメーションして変化します
・changeClipBounds ターゲットViewのclipがアニメーションして変化します。
・changeTransform ターゲットViewのサイズと向きがアニメーションして変化します。
・moveImage imageViewのためにサイズとスケールがアニメーションします。
アプリ内のActivity transitionが有効な場合、標準で切り替わっているActivity間のcross-feding transitionが有効になっています。

図1： 1つの共有Elementによるシーンの移り変わり

カスタム transitionsを指定する

まず始めに、マテリアルテーマを継承するスタイルを定義するときにandroid:windowContentTransitions 属性により、window content transitionsを有効にします。スタイル定義で、特定のenter、exitあるいはshared element transitionを定義することも出来ます。

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- window content transitionsを有効にする -->
  <item name="android:windowContentTransitions">true</item>

  <!-- enterとexit transitionsを指定する -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- shared element transitionsを指定する -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/move_image</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/move_image</item>
</style>

下記の例ではmove_image transitionを定義しています。

<!-- res/transition/move_image.xml -->
<!-- (下記のShared Transitionsも見てください) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <moveImage/>
</transitionSet>

moveImage要素はandroid.transition.MoveImageクラスと一致します。詳細はAPI referenceのandroid.transition.Transition .を見てください。

代わりにWindow.requestFeatureメソッドをコールしwindow content transitionをコード内で有効にする。

// あなたのActivity内で実行する（theme内でtransitionを有効にしていない場合）
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// exit transitionをセットする
getWindow().setExitTransition(new Explode());

以下のメソッドを呼びTransitionオブジェクトを使ってコード内でTransitionを指定する
・Window.setEnterTransition
・Window.setExitTransition
・Window.setSharedElementEnterTransition
・Window.setSharedElementExitTransition

setExitTransition と setSharedElementExitTransition メソッドは呼び出したActivityの終了時の動きを定めます。setEnterTransition とsetSharedElementEnterTransition メソッドは呼び出したActivityの開始時の動きを定めます。

transitionの全体のエフェクトを取得するために、window content transitionを呼び出し時とActivity呼び出し後の両方で有効にするよう必要があります。そうしないと、呼び出されたActivityは終了時のtransitionを始め、（scaleあるいはfadeのような）window transitionが表示されます。
Enter transitionを素早く開始するために、呼び出されるAnctivityで Window.setAllowEnterTransitionOverlapメソッドを使用して下さい。これにより、enter transitionをより劇的にします。同様に、Activityを呼び出しexit transitionのためにWindow.setAllowExitTransitionOverlaメソッドを呼び出してください。

transitionを使ってのActivity開始

Activityでtransitionを有効にし、exit transition を設定していたらstartActivityメソッドで他のActivityを起動するときにtransitionが起動されます。2つめのAcitivityのためにenter transitionを設定していたらActivityが開始されるときにもtransitionが起動されます。

Shared elements transitions

要素を共有する２つのActivity間でschened transition animationを作るために
1.style内でWindow content transitionsを有効にする
2.Style内で共有する要素を指定する。
3.XML リソースとしてtransitionを定義する。
4.それぞれのレイアウトで共有する要素に対しandroid : viewName属性に共通の名称を割り当てる。
5. ActivityOptions.makeSceneTransitionAnimationメソッドを使用する

// clickイベントを取得した要素を取得する
final View imgContainerView = findViewById(R.id.img_container);

// このActivityのtransitionのために共通のエレメントを取得する
final View androidRobotView = findViewById(R.id.image_small);

// click listenerを定義する
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // transition animationを作る - android:viewName="robot"で定義された
        // 両Activityのレイアウト内にある画像
            ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // 新しいactivityを開始する
        startActivity(intent, options.toBundle());
    }
});

動的にコード内で生成したviewを共有するには、View.setViewNameメソッドでそれぞれのActivityに共通の要素名を指定してください。

scene transition animationを逆再生するために、2番目のActivityを終了したときに、Activity.finish の代わりに Activity.finishAfterTransitionメソッドを呼んでください。

複数の要素を共有する

複数の共有エレメントを持っている2つのActivity間の scene transition animationを作るために、両layoutのAndroid: viewName attribute （あるいはそれぞれのActivityでView.setViewNameを使って）共有する要素を定義し、下記のようにActivityOptionsオブジェクトを作ります。

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Curved Motion

マテリアルデザインのAnimationは時間軸に伴う空間内での動きをcurvesに依存します。Android L Developer Preview はアニメーションのタイミングカーブとモーションパターンカーブをカスタマイズして定義できる新しいAPIを提供します。

PathInterpolator クラスは新しいベジェカーブあるいはPathオブジェクトに基づく補完を行います。このinterpolator はコンストラクターの引数に(0,0)から(1,1)のアンカーポイントとコントロールポイントで表される1x1のスクエアなモーションカーブで指定します。XMLリソースとしてPathInterpolator を定義することも出来ます。

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

Android L Developer Previewはマテリアルデザイン内で3つの基本的なカーブをXMLリソースとして提供しています。
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
Animator.setInterpolationメソッドにPathInterpolatorオブジェクトを渡すことが出来ます。

ObjectAnimator クラスの新しいコンストラクターは2つ以上のプロパティーを使って経路に沿ったアニメーションを作ることが出来ます。例えば、下記のanimatorはPathオブジェクトを使ってViweのXとYプロパティーをアニメートさせます。

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

View状態の変化によるアニメーション

新しいStateListAnimatorクラスでビューの状態が変わるときに実行されるアニメーションを定義できます。下記の例はどうやってXMLリソースでStateListAnimatorを定義するかを示します。

<!-- viewが押されたら、translationZプロパティをアニメートさせる-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="2"
        android:valueType="floatType"/>
        <!-- XやYのような他のプロパティのように
     他のobjectAnimator要素もここで持てます-->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="2"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

注意 Android L Developer Preview releaseの既知の問題としてアニメーションが正しい振る舞いをするようにStateListAnimator 内で valueFrom値を提供することが必要です。

新しいAnimatedStateListDrawable はviewに関する状態が変化したときにアニメーションを表示するdrawableを作ります。Android L Developer Previewのいくつかのシステムウィジェットが標準でこのアニメーションを使用します。以下の例はどのようにXMLリソースとしてAnimatedStateListDrawableを定義するかを示します。

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- それぞれの状態でことなるdrawableを渡します-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- transitionを指定します -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Drawableの色づけ

Android L Developer Previewはbitmapあるいはnine-patcheをアルファマスクとして定義しcolorリソースやテーマの属性で色づけすることが出来ます。（例 android : attr / colorPrimary）1度だけこのassetsを作り、自動的にテーマにマッチするように色づけできます。

bitmapに色づけするために、BitmapDrawableやNinePatchDrawable.にsetTintメソッドかandroid:tint属性を使用します。

setTintメソッドでPower-Duffモードにセットしコード内でNinePatchDrawableとBitmapDrawableオブジェクトの色を混合することも出来ます。layoutで tint modeを設定するには android : tintMode属性を使います。

イメージから特出した色を抽出する

Android L Developer Preview Support Library はPaletteクラスを含んでいて、画像の特出した色を抽出できます。このクラスは、以下の特出した色を抽出します：
・鮮明
・鮮明で暗い
・鮮明で明るい
・くすんでいる
・くすんでいて暗い
・くすんでいて明るい
これらの色の抽出するには画像をロードするバックグラウンドスレッドで静的メソッドPalette.generateにBitmapを渡します。あなたがスレッドを使用できない場合はPalette.generateAsyncを呼びリスナーを渡してください。

画像から特出した色を受け取るためにPalette.getVibrantColor.などのPallets内のgetterメソッドを使用します。

より詳細は android.support.v7.graphics.Palette のAPIリファレンスを見てください。

---

Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.