NETFLIXのスプラッシュかっこいい
NETFLIXみたいなオサレでカッコいいスプラッシュと共に
アプリを起動したい！！！！
※参考GIF
・・・
開始早々挫けて申し訳ないです。
こんなオサレかっこいい複雑スプラッシュはアプリだけじゃ実現できなさそうです。
多分アニメーターさんに頼んで動画としてアプリに埋め込んでいるんだろうなぁ🤔
一文字一文字とても手が混んでいます。
しかしやり方を工夫すればアニメーション素人の僕でも、
結構簡単になんちゃってNETFLIXアニメーションを実装できるんじゃないかと思い立ち、
ちょっと実装チャレンジしてみました。
クオリティはほんのちょっとだけ下がります。
Androidでのアニメーション設定方法
Java側からアニメーションを設定することもできますが、
今回はxmlファイルにアニメーションの詳細を定義しておき、
Javaから読み込むという方式を採用しています。
alpha値の設定で徐々にタイトルが見えるようにする
alpha値を数秒かけて0から1にすることで、
徐々にタイトルのテキストが見えるように設定しました。
resフォルダ直下にanimフォルダを新規作成し、そこにalpha.xmlを定義しています。
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromAlpha="0"
android:toAlpha="1.0">
</alpha>| android:duration | アニメーション時間(ミリ秒) |
| android:fromAlpha | 透明度の開始値 |
| android:toAlpha | 透明度の終了値 |
今回は4秒かけて、
透明度0から徐々にテキストが浮かび上がるようなアニメーションとしています。
アニメーションのリピート回数やリピート方法などまだ設定可能な項目はあります。
公式リファレンス参照:
https://developer.android.com/guide/topics/resources/animation-resource?hl=ja
あとはこの定義したアニメーションファイルをJava側で読み込みます。
TitleFragment.java
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
TextView textView = view.findViewById(R.id.title_text);
/* 設定したalpha.xmlを読み込み */
Animation alphaAnim = AnimationUtils.loadAnimation(getContext(), R.anim.alpha);
textView.startAnimation(alphaAnim);
}AnimationUtils#loadAnimationを使ってアニメーションファイルをロードし、
View#startAnimation(Animation)でスタートしてあげます。
⬇️タイトルが徐々に表示されるようになりました。
Scaleの設定で画像を縮小する
alpha値の設定をしただけでも結構いい感じになりましたが、
もう一つ、左から順に文字が現れるようにしたい。スライドインにしたい！と思いました。
しかし残念ながらAndroidのアニメーションにスライドインは現在ないらしく。。
そこで思いついたのが、
「上に画像を被せて徐々に画像をずらせばスライドインしたように見えるのでは？🤔」
という案でした。
白画像ではわかりやすいのでシャチのイラストで可視化していますが⬇️のイメージ
TITLE SPLASHがスライドインしているように見えますよね？笑
resフォルダ直下に作成したanimフォルダ内にscale.xml を新規作成しています。
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0"
android:toYScale="1.0"
android:pivotX="100%">
</scale>| android:duration | アニメーション時間(ミリ秒) |
| android:fromXScale | 開始時の横幅の拡大率 |
| android:fromYScale | 開始時の縦幅の拡大率 |
| android:toXScale | 終了時の横幅の拡大率 |
| android:toYScale | 終了時の縦幅の拡大率 |
| android:pivotX | 横幅変化の目標点 |
今回かぶせる画像の縦幅は変化しなくて良いので、
fromYScaleとtoYXcaleは”1.0″で固定しています。
横幅を最大値”1.0″から、右端に向けて最小値”0″にしています。
画像がどっち向き(右or左)に縮むかをpivotXで設定していて、これが0だと左を目指して画像が縮小されます。
X方向とY方向について補足画像載せておきます。⬇️
あとはこの定義したアニメーションファイルをJava側で読み込みます。
今までは変化が分かりやすいようにシャチの画像を読み込んでいましたが、
白い無地の画像に差し替えます。
TitleFragment.java
ImageView imageView = view.findViewById(R.id.white_image);
/* 設定したscale.xmlを読み込み */
Animation scaleAnim = AnimationUtils.loadAnimation(getContext(), R.anim.scale);
imageView.startAnimation(scaleAnim);alphaのアニメーションを設定した時と手順は同じです。
これで⬇️のように左から徐々に浮き出てくるタイトルが完成しました。
ソースコード全容
どうでしょうか！
少しはNETFLIXスプラッシュに近づくことができたのではないでしょうか？？
できてますよね？？？？？？？？？☺️
アニメーションは結構簡単に導入できます！ぜひチャレンジしてみてください。
最後に今回のサンプルアプリのソースコードを載せておきます。
参考になれば幸いです。
ご精読ありがとうございました！！
alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromAlpha="0"
android:toAlpha="1.0">
</alpha>
scale.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0"
android:toYScale="1.0"
android:pivotX="100%">
</scale>
title_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:fontFamily="@font/rajdhani_medium"
android:text="TITLE SPLASH"
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
android:textColor="#101BE1"
android:textSize="160px"
android:textStyle="bold" />
<ImageView
android:id="@+id/white_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/white_blind" />
</FrameLayout>
TitleFragment.java
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class TitleFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.title_fragment, container, false);
return view;
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
/* タイトルテキストにalphaアニメーションを設定 */
TextView textView = view.findViewById(R.id.title_text);
Animation alphaAnim = AnimationUtils.loadAnimation(getContext(), R.anim.alpha);
textView.startAnimation(alphaAnim);
/* 白無地画像に縮小アニメーションを設定 */
ImageView imageView = view.findViewById(R.id.white_image);
Animation scaleAnim = AnimationUtils.loadAnimation(getContext(), R.anim.scale);
imageView.startAnimation(scaleAnim);
}
}