※本記事は2021年7月2日に更新しました。
「簡単なアニメーションを実装したいな・・・」
「点滅ってどうやって実装するの？」
今回はそんな要望にお応えします。
まずはこちらの動画をご覧ください。
動画のアプリではボタンがチカチカと点滅しています。
本記事ではこの点滅アニメーションの実装の仕方について解説します。
ポイントを押さえれば意外と簡単ですよ。
前提として、本記事はAndroid Studio 4.2.1を対象に記載します。
また、筆者のAndroid Studioは日本語化しているため、日本語にて解説します。
本記事の使用言語はJavaとなります。
今回はProgate のJavaのレッスンがすべて理解できている、
という前提の上進めていきます。
では早速参りましょう！
前回の記事はこちら
点滅アニメーションの追加の仕方
Viewの点滅は、そのViewの透明度が上がったり下がったりで
表現することができます。
この点滅アニメーションの追加の仕方は以下の通りです。
- アニメーターXMLファイルを用意する
- アクティビティファイルでアニメーターを実装する
- アクティビティファイルでアニメーションの開始を宣言する
これらについて、一つ一つ解説していきます。
アニメーターXMLファイルを用意する
アニメーションの細かい設定は、アニメーターXMLファイルにて行います。
アニメーターXMLファイルは、resフォルダ内にanimatorフォルダを作成し、
その中に作成します。
Animatorフォルダの用意
resフォルダの上で右クリック⇒新規⇒Androidリソースディレクトリーを選択してください。
リソースタイプを「animator」にしてOKを押してください。
resフォルダにanimatorフォルダが作成されます。
アニメーターXMLファイルを用意する
animatorフォルダの中に、xmlファイルを作成します。
animatorフォルダの上で右クリック⇒新規⇒animatorリソース・ファイルを選択してください。
ファイルの名前は任意です。今回は『blink_animation』としてください。
アニメーターXMLファイルのソースコードは次のようになります。
1 2 3 4 5 6 7 8 9 | <?xml version="1.0" encoding="utf-8"?> <objectAnimator android:propertyName="alpha" android:duration="500" android:valueTo="0.5f" android:repeatCount="-1" android:repeatMode="reverse"/></set> |
これが、アニメーションの設定ファイルとなります。
アニメーションの設定ファイルは『set』で囲む形で記載します。
『objectAnimator』にて1種類のアニメーションを定義します。
『android:propertyName』では、アニメーションの種類を定義します。
今回は透明度を上げたり下げたりで点滅を表現するため、
透明度を表す、『alpha』を設定しています。
『android:duration』は1個のアニメーションを何msで行うかの設定です。
今回は透明度高い⇒低いの間隔を500msで行うようにします。
『android:valueTo』はアニメーションをどの値まで変化させるかの設定です。
今回は0.5fとしています。(fはfloat型を表す語尾)
『android:repeatCount』は何回アニメーションを繰り返すかの設定です。
正の整数で回数を設定、-1で無限に繰り返すことを設定します。
今回は無限に繰り返すため、-1を設定しています。
『android:repeatMode』は最初から繰り返すか、逆方向に繰り返すかの設定です。
最初から繰り返す場合はrepeat、逆方向に繰り返す場合はreverseを設定します。
今回はreverseを設定します。
他にもXMLファイルではいろいろな設定が可能です。
下のサイトにて詳細書かれていますので、ぜひ参考にしてみてください。
アクティビティファイルでアニメーターを実装する
アクティビティファイルでのアニメーターの実装方法です。
XMLファイルを用意しただけだと、アニメーションは画面に表示されません。
アクティビティファイルにて、アニメーションの実装を命令しなければなりません。
アニメーションはAnimatorSet オブジェクトで実装します。
実装の文は以下の通りです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | public class MainActivity extends AppCompatActivity { //アニメーションを定義するAnimatorSetオブジェクトを宣言する AnimatorSet set; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //ボタンオブジェクトをレイアウトから取得 Button button = findViewById(R.id.button); //AnimatorInflaterで、AnimatorSetオブジェクトを取得 //前もって作成したR.animator.blink_animationをインフレート set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this, R.animator.blink_animation); //アニメーション対称のオブジェクトを設定 set.setTarget(button); }} |
重要なのは15、16行目と18行目です。
15、16行目のAnimatorInflatorで現在のActivityに、
先に設定したblink_animation.xmlファイルをinflaterでインフレートして、
Animatorオブジェクトを作成しています。
これにより、先に設定したアニメーションがAnimatorオブジェクトに設定されます。
18行目、set.setTarget(・・・)で、・・・のオブジェクトにアニメーションをセットします。
これで、・・・のオブジェクトにアニメーションが設定されました。
以上がアニメーターの実装となります。
アクティビティファイルでアニメーションの開始を宣言する
上では、オブジェクトにアニメーターを設定するところまで行いました。
ここまででは、アニメーションは実行されません。
アニメーションの開始を宣言していないからです。
アニメーションの開始は、画面の準備ができてから、
つまりonCreateの後のonStartメソッドの中で行います。
実装文は以下の通りです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | public class MainActivity extends AppCompatActivity { //アニメーションを定義するAnimatorSetオブジェクトを宣言する AnimatorSet set; ・ ・ ・ //onCreateの中だとStartタイミングが早すぎて間に合わない。 //onCreateの後の工程のonStartにてstartを実装する @Override protected void onStart() { super.onStart(); //アニメーションの開始を宣言 set.start(); }} |
onStartの中で、～.start()を命令することでアニメーションが開始されます。
以上がアニメーションの実装方法となります。
サンプルコード
最後に、今回のサンプルコードを提示します。
今回のアプリはGitHubに公開しています。
下記URLの『SampleBlinkAnimation』です。
是非参考にしてください。
以下、サンプルコードです。
文字列リソースファイル string.xml
1 2 3 4 | <resources> <string name="app_name">SampleBlinkAnimation</string> <string name="button">Button</string></resources> |
レイアウトファイル activity_main.xml
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | <?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout> |
アニメーターXMLファイル blink_animation.xml
1 2 3 4 5 6 7 8 9 | <?xml version="1.0" encoding="utf-8"?> <objectAnimator android:propertyName="alpha" android:duration="500" android:valueTo="0.5f" android:repeatCount="-1" android:repeatMode="reverse"/></set> |
アクティビティファイル MainActivity.java
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | package com.zerokaraapp.sampleblinkanimation;import androidx.appcompat.app.AppCompatActivity;import android.animation.AnimatorInflater;import android.animation.AnimatorSet;import android.os.Bundle;import android.widget.Button;public class MainActivity extends AppCompatActivity { //アニメーションを定義するAnimatorSetオブジェクトを宣言する AnimatorSet set; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //ボタンオブジェクトをレイアウトから取得 Button button = findViewById(R.id.button); //AnimatorInflaterで、AnimatorSetオブジェクトを取得 //前もって作成したR.animator.blink_animationをインフレート set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this, R.animator.blink_animation); //アニメーション対称のオブジェクトを設定 set.setTarget(button); } //onCreateの中だとStartタイミングが早すぎて間に合わない。 //onCreateの後の工程のonStartにてstartを実装する @Override protected void onStart() { super.onStart(); //アニメーションの開始を宣言 set.start(); }} |
※javaファイルについて、1行目packageの部分は人によって異なります。
コピペする場合は2行目以降をコピペしてください。
ここまで出来たら一度アプリを実行してみましょう。
一番上の動画のアプリのように動作すれば成功です。
まとめ
本記事ではViewの点滅アニメーションの実装の仕方について解説しました。
アニメーションですが、実装は意外と簡単な印象でした。
文字の移動だったりのアニメーションも可能なので、
今後活用してみてください。
本記事が初心者の方の参考になれば幸いです。
次回の記事はこちら
コメント