Android Icon Animatorを使う上で気をつけるポイント

概要

先日GoogleのRoman NurikさんによってAndroid Icon Animatorという、AnimatedVectorDrawableとAnimatedVectorDrawableCompatで使えるリソースファイルをWebブラウザ上で作成できるオーサリングツールが作られました。

機能は十分に揃っているのですぐにでも利用可能なのですが、使う上でいくつか気をつけないといけないポイントがあるので今回はそれらを紹介します。

気をつけるポイント

こまめにSaveを行う

現状のAndroid Icon Animatorには自動保存機能などは存在しないため、こまめに画面の左側にある File の Save を選択して、ローカルに .iconanim ファイルをバックアップしておくことをオススメします。
このファイルを File の Open で開くことでプロジェクトを復旧することができるので、Webブラウザが急に固まったときの惨事を軽減することができます。
私もアニメーションのチェックをしている際に過負荷で固まってしまったことがあり、Saveをしていなかったことでヒドく落ち込みました。

API Level 22以下をサポートしている場合はpathDataのアニメーションは使わない

手元で確認したところpathDataのアニメーションはAPI Level 22以下では動かないことがわかりました。
そのため、API Level 22以下をサポートしているアプリはpathDataを変更するアニメーションは使わない方が良さそうです。作りたいアニメーションが他の要素を使うことで実現可能であればそちらを使って対応するようにしましょう。

API Level 22以下で1つの要素に複数の異なるアニメーションを設定する場合には注意

API Level 22以下の場合、1つの要素に複数の異なるアニメーションを設定すると、2つ目以降のアニメーションが上手く動作しないことがわかりました。例えば、要素のサイズを変えるために scaleX と scaleY を同時に使用する場合がそれに当たります。
この問題に遭遇した場合は作成したリソースファイルを直接触って target を分けることで解決できます。

修正前

<target android:name="effect_layout">
    <aapt:attr name="android:animation">
        <set xmlns:android="http://schemas.android.com/apk/res/android">
            <objectAnimator
                android:name="effect_layout"
                android:duration="330"
                android:interpolator="@android:anim/decelerate_interpolator"
                android:propertyName="scaleX"
                android:startOffset="60"
                android:valueFrom="1"
                android:valueTo="1.333"
                android:valueType="floatType" />
            <objectAnimator
                android:name="effect_layout"
                android:duration="330"
                android:interpolator="@android:anim/decelerate_interpolator"
                android:propertyName="scaleY"
                android:startOffset="60"
                android:valueFrom="1"
                android:valueTo="1.333"
                android:valueType="floatType" />
        </set>
    </aapt:attr>
</target>

修正後

<target android:name="effect_layout">
    <aapt:attr name="android:animation">
        <objectAnimator
            android:name="effect_layout"
            android:duration="330"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:propertyName="scaleX"
            android:startOffset="60"
            android:valueFrom="1"
            android:valueTo="1.333"
            android:valueType="floatType" />
    </aapt:attr>
</target>
<target android:name="effect_layout">
    <aapt:attr name="android:animation">
        <objectAnimator
            android:name="effect_layout"
            android:duration="330"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:propertyName="scaleY"
            android:startOffset="60"
            android:valueFrom="1"
            android:valueTo="1.333"
            android:valueType="floatType" />
    </aapt:attr>
</target>

また scaleX を連続して行うなどの同一アニメーションを複数実行する場合には、作成したリソースファイルを直接使用して問題ないことを確認しています。

最後に

今後Android Icon AnimatorやSupport Libraryのアップデートで改善されるものもあると思いますが、現状のAndroid Icon Animatorは気をつけて使わないといけない点があるので注意して使ってください。
API Level 22以下の端末と、API Level 23以上の端末でアニメーションに違いがないか念入りにチェックすることをオススメします。