【Android開発】ビューを揺らすシェイク（ぐらつき）アニメーションの実装方法

はじめに

この記事では、Androidアプリで画像やビューを左右に揺らすシェイク（揺れ／ぐらつき）アニメーションの実装方法を解説します。ボタンをタップするとImageViewが振動するシンプルなデモを、実際のコード例とともにわかりやすく紹介していきます。

手順1：Android Studioで新しいプロジェクトを作成する

まずはAndroid Studioを起動し、メニューから「File」⇒「New Project」を選択します。必要な項目を入力して、新しいプロジェクトを作成しましょう。

手順2：レイアウトファイル（activity_main.xml）を編集する

次に、res/layout/activity_main.xml に以下のコードを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
   xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent">
   <Button
      android:id = "@+id/button"
      android:layout_centerHorizontal = "true"
      android:layout_marginTop = "100dp"
      android:layout_width = "150dp"
      android:text = "Click"
      android:layout_height = "wrap_content"/>
   <ImageView
      android:id = "@+id/imageView"
      android:src = "@mipmap/ic_launcher_round"
      android:layout_width = "match_parent"
      android:layout_height = "300dp" />
</RelativeLayout>

上記のコードでは、画面上部に配置したButtonと、アニメーションの対象となるImageViewを定義しています。このボタンを押すことで、ImageViewにシェイクアニメーションを適用する仕組みです。

手順3：MainActivity.java を編集する

続いて、src/MainActivity.java に以下のコードを記述します。

package com.example.andy.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
   ImageView view;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      view = findViewById(R.id.imageView);
      findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            Animation animShake = AnimationUtils.loadAnimation(MainActivity.this, R.anim.shake);
            view.startAnimation(animShake);
         }
      });
   }
}

このコードでは、ユーザーがボタンをクリックすると、AnimationUtils.loadAnimation() でシェイク用アニメーションを読み込み、startAnimation() によってImageViewに適用しています。このアニメーションを定義するために、animフォルダ内にshake.xmlというファイルを作成する必要があります。

shake.xml を作成する

res/anim/shake.xml を新規作成し、以下のコードを記述してください。なお、animフォルダが存在しない場合は、resフォルダを右クリックして「New」⇒「Android Resource Directory」を選択し、Resource typeに「anim」を指定すれば作成できます。

<?xml version = "1.0" encoding = "utf-8"?>
<set xmlns:android = "https://schemas.android.com/apk/res/android">
   <translate android:duration = "150"
      android:fromXDelta = "-10%"
      android:repeatCount = "5"
      android:repeatMode = "reverse"
      android:toXDelta = "10%"/>
</set>

ここではtranslateタグを使用し、X方向に-10%〜+10%の範囲でビューを移動させています。150ミリ秒間隔で5回リピートし、「repeatMode = reverse」を指定することで、行って戻るような自然な往復の揺れが表現できます。durationやfromXDelta / toXDeltaの値を調整すれば、揺れの速さや幅も自由にカスタマイズ可能です。

アプリを実行して動作を確認する

それではアプリを実行してみましょう。AndroidスマートフォンをPCに接続した状態で、Android Studioのツールバーにある「Run」アイコンをクリックします。実行デバイスとして自分の端末を選択すると、端末にはまず次のような初期画面が表示されます。

続いてボタンをクリックすると、背景の画像が以下のように揺れます。

まとめ

AndroidのView Animation（Tween Animation）を活用すれば、XMLファイルを1つ用意するだけで、簡単にシェイクアニメーションを実装できます。フォームの入力エラー時の警告演出や、通知・注意を促したい場面など、さまざまなUIで応用できるテクニックなので、ぜひ自分のアプリでも試してみてください。