カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

Androidでアニメーション

この記事は最終更新日から1年以上経過しています。

ImageViewをアニメーションさせてみます。
まずはコードでアニメーションを設定する方法を紹介します。

以下のようなImageViewがあったとします。

<ImageView id="@+id/img"
  android:src="@drawable/icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />

ImageViewオブジェクトを生成

ImageView img = (ImageView)findViewById(R.id.img);

移動するアニメーション【TranslateAnimation】

//TranslateAnimation(float fromX, float toX, float fromY, float toY)
TranslateAnimation translate = new TranslateAnimation(0, 10, 0, 0);
//動作時間を設定(単位ms)
translate.setDuration(1000);
//繰り返す回数を設定(1度でよい場合は設定しない)
translate.setInterpolator(new CycleInterpolator(3));
 
//アニメーションを開始
img.startAnimation(translate);


透明度が変化するアニメーション【AlphaAnimation】

//AlphaAnimation(float fromAlpha, float toAlpha)
AlphaAnimation alpha = new AlphaAnimation(1, 0);
//動作時間を設定(単位ms)
alpha.setDuration(1000);
//繰り返す回数を設定(1度でよい場合は設定しない)
alpha.setInterpolator(new CycleInterpolator(3));
 
//アニメーションを開始
img.startAnimation(alpha);

回転するアニメーション【RotateAnimation】

//RotateAnimation(float from, float to, float pivotX, float pivotY)
RotateAnimation rotate = new RotateAnimation(0, 360, 30, 90);
//動作時間を設定(単位ms)
rotate.setDuration(1000);
 
//アニメーションを開始
img.startAnimation(rotate);

スケールを変更するアニメーション【ScaleAnimation】

//ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
ScaleAnimation scale = new ScaleAnimation(1,2,1,2, 30, 90);
//動作時間を設定(単位ms)
scale.setDuration(1000);
//繰り返す回数を設定(1度でよい場合は設定しない)
scale.setInterpolator(new CycleInterpolator(1));
 
//アニメーションを開始
img.startAnimation(scale);

アニメーションを組み合わせる【AnimationSet】

//AnimationSet(boolean shareInterpolator)
AnimationSet set = new AnimationSet(true);
//回転しながら
set.addAnimation(rotate);
//スケールが変化
set.addAnimation(scale);
//繰り返す回数を設定(1度でよい場合は設定しない)
set.setInterpolator(new CycleInterpolator(1));
 
//アニメーションを開始
img.startAnimation(set);

次にリソースにアニメーションをXMLで定義しておく方法を紹介します。
個別アニメーションは割愛し、setのみ紹介。

まずはresフォルダーにanimを作成し、新規にXMLファイルを作成します。
※XMLファイルを作成する際、「Tween Animation」を指定して作成するので、
animフォルダーは勝手に作ってくれます。
[anime_set.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" 
  android:interpolator="@android:anim/accelerate_interpolator" 
  android:shareInterpolator="true" 
  android:fillAfter="true">
  <scale 
    android:duration="1000" 
    android:fromXScale="1.0" 
    android:toXScale="1.5" 
    android:fromYScale="1.0" 
    android:toYScale="1.5" 
    android:pivotX="50%" 
    android:pivotY="50%" />
  <alpha 
    android:duration="1000" 
    android:fromAlpha="0.0" 
    android:toAlpha="1.0" />
</set>

アニメーションをセット

ImageView img = (ImageView)findViewById(R.id.img);
Animation Anim = AnimationUtils.loadAnimation(this, R.anim.anime_set);
cameraButton.setAnimation(Anim);
共通の設定
xmlns:android “http://schemas.android.com/apk/res/android”を指定。ルート要素のみ必要
android:duration アニメーション時間をミリ秒で設定
android:fillAfter アニメーション後の状態を保つ(true/false)
android:fillBefore アニメーション後に開始状態に戻す(true/false)
android:fillEnabled fillBeforeとfillAfterの制御
android:interpolator Interpolatorを設定
android:repeatCount 繰り返し回数を設定(無限に繰り返す場合は-1)
android:repeatMode 繰り返しモードを設定(restart/reverse)
android:startOffset 開始遅延時間を設定
android:zAdjustment Zオーダーを設定
Interpolatorの種類
AccelerateDecelerateInterpolator 加速と減速
AccelerateInterpolator 加速
AnticipateInterpolator 開始時に逆方向に溜める
AnticipateOvershootInterpolator 開始時に逆方向に溜め、終了時にはみ出す
BounceInterpolator 終了時にバウンド
CycleInterpolator 設定したアニメーションの負の方向も使用しながら繰り返す
DecelerateInterpolator 減速
LinearInterpolator 変化を加えない
OvershootInterpolator 終了時にはみ出す
例)
@android:anim/accelerate_interpolator
@android:anim/accelerate_decelerate_interpolator
個別の設定
alpha android:fromAlpha 開始透明度を指定(0.0から1.0)
android:toAlpha 終了透明度を指定(0.0から1.0)
rotate android:fromDegrees 開始角度を指定(0~360)
android:toDegrees 終了角度を指定(0~360)
android:pivotX 回転X軸を指定
android:pivotY 回転Y軸を指定
scale android:fromXScale 開始Xサイズを指定(1.0が元サイズ)
android:toXScale 終了Xサイズを指定(1.0が元サイズ)
android:fromYScale 開始Yサイズを指定(1.0が元サイズ)
android:toYScale 終了Yサイズを指定(1.0が元サイズ)
android:pivotX 原点X座標を指定
android:pivotY 原点Y座標を指定
translate android:fromXDelta 開始位置X座標を指定(-100%~100%)
android:toXDelta 終了位置X座標を指定(-100%~100%)
android:fromYDelta 開始位置Y座標を指定
android:toYDelta 終了位置Y座標を指定
set android:shareInterpolatorInterpolatorを共有するかどうかを指定
この記事がお役に立ちましたらシェアお願いします
18,052 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です