この記事はand factory.inc Advent Calendar 2021 23日目の記事です。
昨日は@doiheiさんのGitHub Template Repository使ってみたでした。
はじめに
Android12が出てから、YoutubeやGoogle公式アプリ(MapやGmail)のSplashにアニメーションが追加されて、めちゃくちゃオシャレになったよね👀
ユーザーの目に入るのはアプリを開く一瞬だけだけど、ちょっと動きが追加されるだけでワクワク感が出ててとっても素敵。
是非とも真似したいと思って色々調べてきたので、Splashアイコンのアニメーション実装方法を紹介するよ。
完成形
| Before | After |
|---|---|
 |
 |
ミニマムな修正にしたかったので、今回はDroid君のalphaを変えるだけ。
違いは地味だけど、比較して見ればちゃんとアニメーションされてるのがわかるね。
実装手順
実装手順は下記の通り。
- AnimatedVectorDrawableを用意する。
- theme.xmlにSplashの設定を追加する。
- AndroidManifestでthemeを設定する。
順に解説していくよ。
1. AnimatedVectorDrawableを用意する。
まずは、アニメーションさせるアイコンのリソースを追加するよ。
公式のドキュメントによると
AnimationDrawable と AnimatedVectorDrawable でオブジェクトのアニメーション化と描画が可能な場合、開始ウィンドウを表示しつつアニメーションを再生することもできます。
らしいんだけど、AnimationDrawableを設定しても何故かアニメーションしてくれなかったので、僕はAnimatedVectorDrawableを作ったよ。
未だになんでできなかったかわかってないので、詳しい人教えて欲しい。
「は？？AnimationDrawableならまだしも、AnimatedVectorDrawableとか自前で用意するの大変じゃん！」と思ったんだけど、ありがたいことにShape Shifterってツールを使えば簡単に作れちゃった。
まずは画面左下にあるImportでアニメーション前のベクター画像かsvg画像をインポートする。
次に、追加した画像のpathの横にある⏰マークで、「時間経過で変更したい値」を選択するよ。
今回は時間経過とともにalphaを変更したいので、fillAlphaを選択する。
※GmailやGoogleMapみたいに時間経過で形も変わるような場合は、多分pathDataを選択するんだと思う。
すると画面右側で何秒間でどれくらい値を変えるのかを編集できるようになるので設定していく。
Splashのアニメーションは最長で1,000msだから、endTimeは1000を設定。
fromValueとtoValueは読んで字の如く、元の値と変化後の値なので、元の値は透明の0、変化後の値はくっきり1に設定。
あとはこいつをexportして一旦リソース完成〜✨
作ったリソースはdrawable配下に置いてあげてね。
今回は必要なことしかやってないけど、慣れればもっといろんなことができそうね。
2. theme.xmlにSplashの設定を追加する。
作ったリソースを設定するには、theme.xmlを使うよ。
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Splashanimationsample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- ここから先を追加する -->
<item name="android:windowSplashScreenIconBackgroundColor">#3DDC84</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/avd_anim</item>
<item name="android:windowSplashScreenAnimationDuration">10000</item>
</style>
</resources>
android:windowSplashScreenIconBackgroundColorはアイコン背景の色。
公式ドキュメントの②に当たる部分だね。
ここも元々入っているic_launcher_background.xmlを使いたかったんだけど、どうやら色しか設定できないみたい。
凝った背景にしたいなら、リソース作る段階で背景を入れておかないとダメっぽい。
android:windowSplashScreenAnimatedIconはさっき作ったアイコンを設定する。
android:windowSplashScreenAnimationDurationはアニメーションさせる時間を設定する。
これでtheme.xmlの設定は完了！
AndroidManifestでthemeを設定する。
あとはAndroidManifest.xmlで、作ったthemeを設定するだけ。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.splash_animation_sample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Splashanimationsample"><!-- こいつが入ってるのを確認する -->
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
themeを設定するのは、applicationでもactivityでもいいみたい。
これにて実装完了！🎉
やった〜
まとめ
- Splashアイコンのアニメーションは意外と簡単に実装できる。
- AnimatedVectorDrawableも意外と簡単に作れる。
僕はAnimationDrawableを使おうと頑張って時間食っちゃったけど、最初からAnimatedVectorDrawableを使えば超簡単に実装できちゃいそうね。
今回はalphaだけの質素なアニメーションだったけど、プロジェクトに導入するときはGoogleアプリやYoutubeみたいなギュン！🌀って感じのやつ作りたいな。
作ったサンプルはここにあるよ。
わからんかったら見てね。
終わり。
参考
おまけ
- 下位バージョンでも同一のSplash画面を表示したい場合は、Splash Screen 互換ライブラリを使うといいらしい。