انیمیشن در اندروید از جهات بسیاری امکانپذیر است . در این مقاله ما تلاش خواهیم نمود یک راه حل آسان و کلی تری را  در خصوص ساخت انیمیشن در اندروید ارائه دهیم.  مثال اشاره شده  به دنبال گام های اساسی برای خلق انیمیشن بر روی عنصر UI بوده است که از این طریق سعی دارد نحوه  بکارگیری آن را در انواع مختلف آن نشان دهد.

به منظور ایجاد انیمیشن در اندروید، ما نیاز داریم  تابع loadAnimation را از کلاس  AnimationUtils فراخوانی کنیم.

که سینتکس آن به شرح زیر می باشد:

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

توجه داشته باشید که پارامتر دوم تعریف شده در قسمت R.anim.youranimation  مربوط به فایل انیمیشن ماست که بصورت XML نوشته شده و در زیردایرکتوری anim قرار می گیرد. از این رو شما باید برای فراخوانی آن، یک فایل جدیدبا عنوان anim ایجاد کنید و و فایل xml خود را با نام معینی در آن قرار دهید.

کلاس انیمیشن دارای توابع کاربردی بسیاری است که در پایین به برخی از آنها اشاره می شود:

start()

این متد انیمیشن را شروع می کند.

setDuration(long duration)

این متد مدت زمان مشخصی را برای یک انیمیشن تعریف می کند .

getDuration()

این متد انیمیشن را در در مدت زمان تعیین شده در متد فوق اجرا می کند.

 end()

این متد به انیمیشن دستور پایان یافتن را می دهد.

cancel()

این متد انیمیشن را کنسل می کند.

برای انجام انیمیشن بر روی یک آبجکت کافی است که آن را با استفاده از متد () startAnimation برای آن آبجکت فراخوانی کنیم که سینتکس آن به شرح زیر می باشد.

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

در مثال زیر، استفاده از انیمیشن در اندروید برای شما عزیزان نشان داده می شود. با یادگیری این مثال شما قادر خواهید بود بر روی  ImageView  انواع مختلفی از انیمیشن را پیاده کنید .برای اجرای این مثال، شما نیاز به  شبیه ساز و یا یک دستگاه واقعی دارید.

اگر در داخل برنامه اکلیپس یا اندروید استودیو قرار دارید پروژه جدیدی را  ایجاد کنید

   اکلیپس :File ⇒ New Android ⇒ Application Project

اندروید استودیو :File ⇒ New  ⇒ New Project

اما اگر هنوز برنامه خود را باز نکرده اید یکی از برنامه های فوق را باز نموده و بعد از تعیین مشخصات(نامگذاری) ، تعیین حداقل sdk  و نوع اکتیویتی (blank  یا Empty) ، نام اکتیویتی ابتدایی و اصلی خود  را همان MainActivity قرار دهید. بعد از لود کامل برنامه ، در مسیر res ⇒layout لایه متناظر اکتیوتی اصلی یعنی activity_main را پیدا نمود و کدهای مندرج و پیش فرض آن را پاک کرده و کدهای xml  زیر را به آن اضافه کنید:

<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="ANIMATION"
        android:id="@+id/textView"
        android:textSize="40dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="psrd.ir"
        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="200dp"
        android:id="@+id/imageView"
        android:src="@drawable/image"
        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"/>


    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_below="@+id/imageView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="37dp">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="zoom"
            android:id="@+id/button"

            android:onClick="clockwise"
            android:layout_alignParentTop="true"
            android:layout_alignRight="@+id/btn"
            android:layout_alignEnd="@+id/btn" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="clockwise"
        android:id="@+id/btn"
        android:onClick="zoom"
        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="fade"
        android:id="@+id/btn3"
        android:onClick="fade"
        android:layout_below="@+id/btn4"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="blink"
        android:onClick="blink"
        android:id="@+id/btn4"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="move"
        android:onClick="move"
        android:id="@+id/btn5"
        android:layout_below="@+id/btn6"
        android:layout_alignLeft="@+id/btn6"
        android:layout_alignStart="@+id/btn6" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="slide"
        android:onClick="slide"
        android:id="@+id/btn6"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />
    </RelativeLayout>

</RelativeLayout>

در اکتیویتی ما به ازای هر عملیات انیمیشن یک باتن یا دکمه در نظر گرفته ایم که کلیک بر روی هریک، نوع انیمیشن بر روی عکس اعمال خواهد شد. بعد از افزودن کدهای xml به لایوت مذکور ، به سراغ کلاس اصلی اکتیوتی یعنی MainActivity می رویم و کدهای زیر به آن می افزاییم.

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;


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 img = (ImageView)findViewById(R.id.imageView);
        Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.myanimation);
        img.startAnimation(animation);
    }

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

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

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

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

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

بعد از افزودن کدهای کلاس اصلی، وقت آن است که کدها و فایل های xml مربوط به انیمیشن ها، را در فایلی که به همین منظور باید ایجاد کنیم، قرار دهیم. برای ایجاد دایرکتوری مربوط به انیمیشن ، بر روی  res  یا همان resource راست کلیک کرده و از آپشن های ظاهر شده گزینه Android resorce directoy را انتخاب می کنیم در پنجره ظاهر شده در قسمت مربوط resorce Type  گزینه anim  را پیدا کرده و آن را در حالت انتخاب قرار داده و سپس دکمه ok  را می زنیم . همانطور که می بینید در قسمت فایل های مربوط به res  فایلی با نام anim ایجاد شده است. بعد از ایجاد فایل به منظور قرار دادن فایل های مربوط به انیمیشن ها ، بر روی anim راست کلیک کرده و از منوی new ، آپشن یا زیرمنوی Animation resource file  را انتخاب می کنیم و در پنچره ظاهر شده نام فایل xml مربوط به انیمیشن را نوشته و بر روی دکمه ok کلیک می کنیم. به همین روال به ترتیب فایل های Xml مربوط به myanimation – clockwise-fade-blink-move-slide را ایجاد می کنیم. بعد از ایجاد فایل های xml  کدهای آن را با عناوین مشخص به شرح زیر به آنها می افزاییم.

کدهای مربوط به   myanimation بصورت زیر می باشد

<?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>

کدهای مربوط به فایل انیمیشن 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>

کدهای مربوط به فایل انیمیشن 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>

کدهای مربوط به فایل انیمیشن 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>

کدهای مربوط به فایل انیمیشن 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>

کدهای مربوط به فایل انیمیشن 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>

حال پروژه را اجرا کرده و از آن در آموزش هر چه بیشتر خود استفاده کنید. اگر مشکلی در اجرای کدها وجود دارد یا سوال مشخصی از نویسنده سایت دارید سوالات خود را در قسمت دیدگاه ها بیان کنید. موفق و موید باشید

کپی برداری از محتوای سایت psrd، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربران ، مجاز است) (کپی برداری توسط سایر وب سایت ها  غیرقانونی بوده و در صورت رویت به ستادسازماندهی اطلاع داده خواهد شد.