آموزش استفاده از انیمیشن در برنامه نویسی اندروید

سلام دوستان این بار با آموزش استفاده از انیمیشن در برنامه نویسی اندروید برگشتیم انیمیشن در برنامه نویسی اندروید باعث متریال دیزاین شدن و باعث بالا بردن ux یا user experience و باعث بهتر شدن ui یا user Interfaceخود اپ شما و شاید بشه گفت شامل یکی از مباحث متریال دیزاین (Material Design) می شود . در ادامه با ما همراه باشید.

انیمیشن چیست ؟

انیمیشن پردازشی از ساخت حرکت و تغییر اشکال است.
بدون مقدمه اضافی بریم به بخش اصلی , به بیشتر object ها در اندروید میشه انیمیشن نسبت داد ما باید فولدری به نام anim یا animation درست کنیم برای این کار کلیک راست کرده و new folder را ایجاد می کنیم همانند عکس زیر این فولدر فایل های انیمشن های ما رو نگه می دارد انیمیشن های ما پسوندشان .xml است.

ما می توانیم بی شمار انیمیشن ایجاد کنیم فقط کافی است کمی تسلط بر زبان xml داشته باشیم .در ادامه چند animation را برای شما قرار می دهیم.
اولین انیمیشن fade_in فکر نکنم زیاد به توضیح باشد این انیمیشن سبب کم رنگ شدن object ما مثلا image می شود.(این ها فقط انیمیشن هستند و به اصطلاح لود نشده اند)

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

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<alpha

android:duration="1000"

android:fromAlpha="0.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="1.0" />

</set>

خب برای اینکه این انیمیشن رو لود کنیم باید یک instance ازش بگیریم (فراخوانیش کنیم).

   TextView txtMessage = (TextView) findViewById(R.id.txtMessage);
        // load the animation
       Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_in);

TextView txtMessage = (TextView) findViewById(R.id.txtMessage);

// load the animation

Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.fade_in);

بعد از این کار باید انیمیشن رو start کنیم

txtMessage.startAnimation(animFadein);

1	txtMessage.startAnimation(animFadein);

الان این کار سبب میشه تا Textview ما کم رنگ بشه. البته بهتر است این را در کلیک یک دکمه قرار دهید تا در تغییر را احساس کنید قبلا تر آموزش استفاده از دکمه را در سایت قرار داده ایم کافی است سرچ کنید.
برای یک انیمیشن سه listiner وجود دارد که عبارتند از :

onAnimationStart زمانی که یک انیمیشن شروع می شود.
onAnimationEnd زمانی که یک انیمیشن به پایان می رسد.
onAnimationRepeat زمانی که یک انیمیشن تکرار می شود.

برای استفاده از آن ها می توانید از implements اکتیویتی به نام AnimationListener استفاده کنید همانند زیر برای این کار نیاز است تا متغییر animFadein را global قرار دهید.

public class FadeInActivity extends Activity implements AnimationListener {
.
.
.
// set animation listener
animFadein.setAnimationListener(this);
.
.
.
// animation listeners
    @Override
    public void onAnimationEnd(Animation animation) {
        // Take any action after completing the animation
        // check for fade in animation
        if (animation == animFadein) {
            Toast.makeText(getApplicationContext(), "Animation Stopped",
                    Toast.LENGTH_SHORT).show();
        }
    }
    @Override
    public void onAnimationRepeat(Animation animation) {
        // Animation is repeating
    }
    @Override
    public void onAnimationStart(Animation animation) {
        // Animation started
    }

public class FadeInActivity extends Activity implements AnimationListener {

// set animation listener

animFadein.setAnimationListener(this);

// animation listeners

@Override

public void onAnimationEnd(Animation animation) {

// Take any action after completing the animation

// check for fade in animation

if (animation == animFadein) {

Toast.makeText(getApplicationContext(), "Animation Stopped",

Toast.LENGTH_SHORT).show();

}

@Override

public void onAnimationRepeat(Animation animation) {

// Animation is repeating

}

@Override

public void onAnimationStart(Animation animation) {

// Animation started

}

این هم از این آموزش من بعضی از انیمیشن ها را برای شما قرار تا اگر خواستید از همین انیمیشن ها استفاده کنید.

1. Fade In
2. Fade Out
3. Cross Fading
4. Blink
5. Zoom In
6. Zoom Out
7. Rotate
8. Move
9. Slide Up
10. Slide Down
11. Bounce
12. Sequential Animation
13. Together Animation

نکات مهم در انیمیشن های پایین
android:duration به معنی اینه که چه زمانی انیمیشن به پایان می رسد .
android:startOffset این برای زمانی کاربرد دارد که شما بخواهید از چند انیمیشن پشت سر هم استفاده کنید.
android:interpolator ریت (rate) تغییر انیمیشن
android:fillAfter بررسی می کنه که ایا تکان خوردن انیمیشن به پایان رسیذه است یا نه و دو مقدار true و false می پذیرد اگر false باشد به حالت اولی حود باز خواهد گشت و دقت کنید در این ویژگی از node به نام set استفاده می شود.
android:repeatMode برای تکرار انیمیشن استفاده می شود. و اگر برابر با reverse قرار گیرد همان کار را بر عکس نیز انجام می دهد.
android:repeatCount تعداد تکرار انیمیشن را مشخص می کند و اگر برابر با infinte باشد به صورت نامحدود اجرا می شود.
نود scale که تعداد زیاد ویژگی دارد در پایین به چندتایی از آن ها رسیدگی می کنیم.
pivotX=”50%” و pivotY=”50%” باعث zoom شدن به منظقه میانه می شود (وسط اون object )
fromXScale و fromYScale از یک مقیاسی در به یک مقیاس دیگر می رود این بخش به مقیاس دیگر toXScale و toYScale هستند

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

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<alpha

android:duration="1000"

android:fromAlpha="0.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="1.0" />

</set>

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

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<alpha

android:duration="1000"

android:fromAlpha="1.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="0.0" />

</set>

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

<?xml version="1.0" encoding="utf-8"?>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" >
    </scale>
</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<scale

xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="1000"

android:fromXScale="1"

android:fromYScale="1"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="3"

android:toYScale="3" >

</scale>

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" >
    </scale>
</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<scale

xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="1000"

android:fromXScale="1.0"

android:fromYScale="1.0"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="0.5"

android:toYScale="0.5" >

</scale>

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="600"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/cycle_interpolator"/>
</set>

<?xml version="1.0" encoding="utf-8"?>

<rotate android:fromDegrees="0"

android:toDegrees="360"

android:pivotX="50%"

android:pivotY="50%"

android:duration="600"

android:repeatMode="restart"

android:repeatCount="infinite"

android:interpolator="@android:anim/cycle_interpolator"/>

</set>

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

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

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

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

<?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="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

<?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="0.0"

android:interpolator="@android:anim/linear_interpolator"

android:toXScale="1.0"

android:toYScale="1.0" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true"

android:interpolator="@android:anim/bounce_interpolator">

<scale

android:duration="500"

android:fromXScale="1.0"

android:fromYScale="0.0"

android:toXScale="1.0"

android:toYScale="1.0" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >
    <!-- Use startOffset to give delay between animations -->
    <!-- Move -->
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="300"
        android:toXDelta="75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="1100"
        android:toYDelta="70%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="1900"
        android:toXDelta="-75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="2700"
        android:toYDelta="-70%p" />
    <!-- Rotate 360 degrees -->
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/cycle_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="3800"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360" />
</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true"

android:interpolator="@android:anim/linear_interpolator" >

<translate

android:duration="800"

android:fillAfter="true"

android:fromXDelta="0%p"

android:startOffset="300"

android:toXDelta="75%p" />

<translate

android:duration="800"

android:fillAfter="true"

android:fromYDelta="0%p"

android:startOffset="1100"

android:toYDelta="70%p" />

<translate

android:duration="800"

android:fillAfter="true"

android:fromXDelta="0%p"

android:startOffset="1900"

android:toXDelta="-75%p" />

<translate

android:duration="800"

android:fillAfter="true"

android:fromYDelta="0%p"

android:startOffset="2700"

android:toYDelta="-70%p" />

<rotate

android:duration="1000"

android:fromDegrees="0"

android:interpolator="@android:anim/cycle_interpolator"

android:pivotX="50%"

android:pivotY="50%"

android:startOffset="3800"

android:repeatCount="infinite"

android:repeatMode="restart"

android:toDegrees="360" />

</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="4000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4" >
    </scale>
    <!-- Rotate 180 degrees -->
    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360" />
</set>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true"

android:interpolator="@android:anim/linear_interpolator" >

<scale

xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="4000"

android:fromXScale="1"

android:fromYScale="1"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="4"

android:toYScale="4" >

</scale>

<rotate

android:duration="500"

android:fromDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:repeatCount="infinite"

android:repeatMode="restart"

android:toDegrees="360" />

</set>

و یه چیز جالب به طور مثال خواستید از دو تا انیمیشن هم زمان استفاده کنید مثالا خواستید از fade_in به fade_out برید می تونید از کد زیر استفاده کنید.

TextView txtView1, txtView2;
Animation animFadeIn, animFadeOut;
animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_in);
animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_out);
animFadeIn.setAnimationListener(this);
animFadeOut.setAnimationListener(this);
txtMessage2.setVisibility(View.VISIBLE);
txtMessage2.startAnimation(animFadeIn);
txtMessage1.startAnimation(animFadeOut);