Android-アニメーション

'_アニメーションは、動きと形状の変化を作成するプロセスです_

Androidでのアニメーションはさまざまな方法で可能です。この章では、トゥイーンアニメーションと呼ばれる、簡単で広く使用されているアニメーションの作成方法について説明します。

トゥイーンアニメーション

Tweenアニメーションは、開始値、終了値、サイズ、継続時間、回転角度e.t.cなどのパラメーターを取り、そのオブジェクトで必要なアニメーションを実行します。任意のタイプのオブジェクトに適用できます。そのため、これを使用するために、AndroidはAnimationというクラスを提供しています。

androidでアニメーションを実行するために、AnimationUtilsクラスの静的関数loadAnimation（）を呼び出します。 Animation Objectのインスタンスで結果を受け取ります。その構文は次のとおりです-

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),
   R.anim.myanimation);

2番目のパラメーターに注意してください。これは、アニメーションxmlファイルの名前です。 resディレクトリの下に anim という新しいフォルダーを作成し、animフォルダーの下にxmlファイルを作成する必要があります。

このアニメーションクラスには、以下にリストされている多くの便利な機能があります-

Sr.No	Method & Description
1	start() このメソッドはアニメーションを開始します。
2	setDuration(long duration) このメソッドは、アニメーションの継続時間を設定します。
3	getDuration() このメソッドは、上記のメソッドで設定された期間を取得します
4	end() このメソッドはアニメーションを終了します。
5	cancel() このメソッドはアニメーションをキャンセルします。

このアニメーションをオブジェクトに適用するには、オブジェクトのstartAnimation（）メソッドを呼び出すだけです。その構文は-

ImageView image1 = (ImageView)findViewById(R.id.imageView1);
image.startAnimation(animation);

例

次の例は、Androidでのアニメーションの使用方法を示しています。メニューからさまざまな種類のアニメーションを選択でき、選択したアニメーションが画面のimageViewに適用されます。

この例を試すには、エミュレータまたは実際のデバイスでこれを実行する必要があります。

Steps	Description
1	You will use Android studio IDE to create an Android application and name it as My Application under a package com.example.sairamkrishna.myapplication.
2	Modify src/MainActivity.java file to add animation code
3	Modify layout XML file res/layout/activity_main.xml add any GUI component if required.
4	Create a new folder under res directory and call it anim. Confim it by visiting res/anim
5	Right click on anim and click on new and select Android XML file You have to create different files that are listed below.
6	Create files myanimation.xml,clockwise.xml,fade.xml,move.xml,blink.xml,slide.xml and add the XML code.
7	No need to change default string constants. Android studio takes care of default constants at values/string.xml.
8	Run the application and choose a running android device and install the application on it and verify the results.

*MainActivity.java* の変更されたコードは次のとおりです。

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }

   public void clockwise(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),
         R.anim.myanimation);
      image.startAnimation(animation);
   }

   public void zoom(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(),
         R.anim.clockwise);
      image.startAnimation(animation1);
   }

   public void fade(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 =
         AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.fade);
      image.startAnimation(animation1);
   }

   public void blink(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 =
         AnimationUtils.loadAnimation(getApplicationContext(),
            R.anim.blink);
      image.startAnimation(animation1);
   }

   public void move(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 =
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
      image.startAnimation(animation1);
   }

   public void slide(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 =
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
      image.startAnimation(animation1);
   }
}

*res/layout/activity_main.xml* の変更されたコードは次のとおりです。

'_ここでabcはfinddevguidesのロゴについて示しています_

<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alert Dialog"
      android:id="@+id/textView"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"/>

   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="finddevguides"
      android:id="@+id/textView2"
      android:textColor="#ff3eff0f"
      android:textSize="35dp"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true"/>

   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView"
      android:layout_alignStart="@+id/textView"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zoom"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="40dp"
      android:onClick="clockwise"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="clockwise"
      android:id="@+id/button2"
      android:layout_alignTop="@+id/button"
      android:layout_centerHorizontal="true"
      android:onClick="zoom"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="fade"
      android:id="@+id/button3"
      android:layout_alignTop="@+id/button2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:onClick="fade"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blink"
      android:onClick="blink"
      android:id="@+id/button4"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="move"
      android:onClick="move"
      android:id="@+id/button5"
      android:layout_below="@+id/button2"
      android:layout_alignRight="@+id/button2"
      android:layout_alignEnd="@+id/button2"
      android:layout_alignLeft="@+id/button2"
      android:layout_alignStart="@+id/button2"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="slide"
      android:onClick="slide"
      android:id="@+id/button6"
      android:layout_below="@+id/button3"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView"/>

</RelativeLayout>

*res/anim/myanimation.xml* のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>

</set>

*res/anim/clockwise.xml* のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromDegrees="360"
      android:toDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>

</set>

*res/anim/fade.xml* のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >

   <alpha
      android:fromAlpha="0"
      android:toAlpha="1"
      android:duration="2000" >
   </alpha>

   <alpha
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0"
      android:duration="2000" >
   </alpha>

</set>

*res/anim/blink.xml* のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

*res/anim/move.xml* のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">

   <translate
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800"/>
</set>

*res/anim/slide.xml* のコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >

   <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:interpolator="@android:anim/linear_interpolator"
      android:toXScale="1.0"
      android:toYScale="0.0"/>
</set>

*res/values/string.xml* の変更されたコードは次のとおりです。

<resources>
   <string name="app_name">My Application</string>
</resources>

*AndroidManifest.xml* のデフォルトコードは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >

      <activity
         android:name="com.example.animation.MainActivity"
         android:label="@string/app_name" >

         <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
         </intent-filter>

      </activity>

   </application>
</manifest>

アプリケーションを実行してみましょう。実際のAndroidモバイルデバイスをコンピューターに接続していると思います。 Androidスタジオからアプリを実行するには、プロジェクトのアクティビティファイルの1つを開き、ツールバーの[画像を実行：/android/images/eclipse_run.jpg [Eclipse Run Icon]アイコンをクリックします。 Androidスタジオには次の画像が表示されます

Androidカメラチュートリアル

ズームボタンを選択すると、次の画面が表示されます-

Androidアニメーションチュートリアル

スライドボタンを選択すると、次の画面が表示されます

Androidアニメーションチュートリアル

移動ボタンを選択すると、次の画面が表示されます

Androidアニメーションチュートリアル

今時計回りのボタン、それは次の画面を表示します

Androidアニメーションチュートリアル

今フェードボタン、次の画面が表示されます

Androidアニメーションチュートリアル

注-エミュレータで実行すると、スムーズなアニメーション効果が得られない場合があります。スムーズなアニメーションを体験するには、Androidモバイルで実行する必要があります。