رفتن به مطلب
انجمن اندروید ایران | آموزش برنامه نویسی اندروید و موبایل
  • android.png.1fab383bc8500cd93127cebc65b1dcab.png

انیمیشن در اندروید


پست های پیشنهاد شده

با اضافه کردن انیمیشن ، جذابیت  برنامه افزایش پیدا می کند.

انیمیشن ها می توانند از طریق xml یا کدهای اندروید انجام شود.

در این آموزش میخواهیم چند نمونه انیمیشن(محو شدن، چرخش،اسلاید و ...) را ایجاد کنیم.

مرحله 1: ایجاد یک فایل xml برای تعریف انیمیشن

در این مرحله پوشه ای به نام anim در پوشهres ایجاد می کنیم.

res ⇒ anim ⇒ animation.xml

do.php?img=183

کد زیر را در فایل fade_in.xml قرار می دهیم.

[shcode=xml]

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

    android:fillAfter="true" >

 

  

        android:duration="1000"

        android:fromAlpha="0.0"

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

        android:toAlpha="1.0" />

 

[/shcode]

مرحله 2: بارگذاری انیمیشن

در اکتیویتی بعدی کلاس انیمیشن ایجاد می کنیم و فایل xml را در آن فراخوانی می کنیم.

کد زیر را در فایل FadeInActivity قرار می دهیم.

[shcode=java]public class FadeInActivity extends Activity{

 

    TextView txtMessage;

 

    // Animation

    Animation animFadein;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_fadein);

 

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

 

        // load the animation

        animFadein = AnimationUtils.loadAnimation(getApplicationContext(),

                R.anim.fade_in);       

    }

}

[/shcode]

 مرحله 3:تنظیم انیمیشن

اگر شما می خواهید رویدادهای شروع،پایان و تکرار در انیمیشن خود داشته باشید باید AnimationListener را پیاده سازی کنید.

این مرحله اختیاری است در صورتی که از AnimationListener استفاده نشود رویدادهای زیر اجرا نمی شود.

onAnimationStart : اغاز انیمیشن

onAnimationEnd : پایان انیمیشن

onAnimationRepeat : تکرار انیمیشن

پس فایل فوق را به صورت زیر تغییر می دهیم.

[shcode=java]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

    }

[/shcode]

مرحله 4: در اخر انیمیشن را اغاز کنید

شما می توانید انیمیشن را در هر زمانی که می خواهید از طریق startAnimation بر روی Ui و با انتخاب نوع انیمیشن شروع کنید.

در این مثال می خواهیم نوع محو شدن را در textView اجرا کنیم.

// start the animation

txtMessage.startAnimation(animFadein);

کد کامل فایل FadeInActivity

[shcode=java]package com.p30droid.androidanimations;

import com.p30droid.androidanimations.R;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.view.animation.Animation.AnimationListener;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

public class FadeInActivity extends Activity implements AnimationListener {

    TextView txtMessage;

    Button btnStart;

    // Animation

    Animation animFadein;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        // TODO Auto-generated method stub

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_fadein);

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

        btnStart = (Button) findViewById(R.id.btnStart);

        // load the animation

        animFadein = AnimationUtils.loadAnimation(getApplicationContext(),

                R.anim.fade_in);

       

        // set animation listener

        animFadein.setAnimationListener(this);

        // button click event

        btnStart.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                txtMessage.setVisibility(View.VISIBLE);

               

                // start the animation

                txtMessage.startAnimation(animFadein);

            }

        });

    }

    @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) {

        // TODO Auto-generated method stub

    }

    @Override

    public void onAnimationStart(Animation animation) {

        // TODO Auto-generated method stub

    }

}

[/shcode]

ویژگیهای مهم انیمیشن xml

در هنگام کار با انیمیشن بهتر است ویژگیهای آن ها را برای ایجاد تمایز در رفتار انیمیشن بشناسیم.

android:duration : مدت زمان انیمیشن که در آن انیمیشن باید تکمیل شود.

android:startOffset: زمان انتظار قبل از شروع انیمیشن است

android:interpolator: میزان تغییر در انیمیشن است

android:fillAfter: این ویژگی مشخص می کند که بعد از اتمام انیمیشن، انیمیشن به حالت قبلی خود بازگردد یا نه.در صورتی که false باشد به حالت قبلی خود باز می گردد این ویژگی باید با استفاده شود.

android:repeatMode : از این ویژگی زمانی که میخواهیم تکرار داشته باشم استفاده می کنیم.

android:repeatCount:  این ویژگی تعداد تکرار در انیمیشن را مشخص می کند

برخی از انیمیشن های مفید:

در اینجا می خواهیم 13 انیمیشن مختلف را ایجاد کنیم.

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

*******************************

1-fadein یا محو شدن

برای محو شدن در انیمیشن می توانید از تگ   استفاده کنید.محو شدن در انیمیشن چیزی جز افزایش مقدار الفا از 0 به 1 نیست.

fade_in.xml

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

    android:fillAfter="true" >

   

        android:duration="1000"

        android:fromAlpha="0.0"

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

        android:toAlpha="1.0" />

[/shcode]

2- fade out یا محو شدن در خارج

محو شدن در خارج دقیقا مانند محو شدن قبلی است که ما نیاز به کاهش مقدار الفا از 1 به 0 داریم.

fade_out.xml

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

    android:fillAfter="true" >

   

        android:duration="1000"

        android:fromAlpha="1.0"

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

        android:toAlpha="0.0" />

[/shcode]

3- Cross Fading یا محو شدن متقاطع

محو شدن متقاطع محو شدنی است که اشیاء دیگر در حال محو شدن هستند.برای این نوع محو شدن می توانید از دو فایل fade_in.xml و fade_out.xml استفاده کنید.

[shcode=java]TextView txtView1, txtView2;

Animation animFadeIn, animFadeOut;

.

.

// load animations

animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(),

                R.anim.fade_in);

animFadeOut = AnimationUtils.loadAnimation(getApplicationContext(),

                R.anim.fade_out);

.

.

// set animation listeners

animFadeIn.setAnimationListener(this);

animFadeOut.setAnimationListener(this);

 

.

.

// Make fade in elements Visible first

txtMessage2.setVisibility(View.VISIBLE);

 

// start fade in animation

txtMessage2.startAnimation(animFadeIn);

                

// start fade out animation

txtMessage1.startAnimation(animFadeOut);

[/shcode]

4-Blink یا چشمک زدن

این نوع از انیمیشن مخلوطی از نوع fade in  و fade out است که باید دو ویژگی android:repeatMode=”reverse”  و android:repeatCount را تنظیم کنید.

blink.xml

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

   

        android:toAlpha="1.0"

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

        android:duration="600"

        android:repeatMode="reverse"

        android:repeatCount="infinite"/>

[/shcode]

5-Zoom In یا بزرگنمایی

برای بزرگنمایی از تگ استفاده می کنیم.استفاده از  pivotX=”50%”   و"  pivotY=”50%برای بزرگنمایی از مرکز است.همچنین شما نیاز به ویژگی های fromXScale, fromYScale که تعریف تغییر اندازه جسم است را دارید که باید این مقدار را کمتر از toXScale, toYScale نگه دارید.

zoom_in.xml

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

    android:fillAfter="true" >

   

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

   

[/shcode]

6- Zoom Out یا کوچکنمایی

کوچکنمایی انیمیشن مانند بزرگنمایی است اما مقدار toXScale, toYScale باید کمتر از fromXScale, fromYScale باشد.

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

    android:fillAfter="true" >

   

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

   

[/shcode]

7-rotate یا چرخاندن

برای چرخاندن از تگ استفاده می شود.برچسب های زیر برای چرخش انیمیشن استفاده می شود.

android:fromDegrees  و  android:toDegrees:برای تعیین زاویه چرخش

Clock wise :استفاده از مقادیر مثبت

Anti clock wise : استفاده از مقادیر منفی

rotate.xml

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

   

        android:toDegrees="360"

        android:pivotX="50%"

        android:pivotY="50%"

        android:duration="600"

        android:repeatMode="restart"

        android:repeatCount="infinite"

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

[/shcode]

8- Move یا حرکت

به منظور تغییر موقعیت شی از تگ استفاده می شود که برای جهت x ها از fromXDelta, fromYDelta و برای جهت Y ها از toXDelta, toYDelta استفاده می شود.

move.xml

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

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

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

    android:fillAfter="true">

  

        android:fromXDelta="0%p"

        android:toXDelta="75%p"

        android:duration="800" />

[/shcode]

9- Slide Up یا اسلاید بالا

برای درست کردن انیمیشن اسلاید از تگ استفاده می کنیم.برای ایجاد اسلاید بالا ویژگیهای زیر را تنظیم کرد.

android:fromYScale=”1.0″  و android:toYScale=”0.0″

slide_up.xml

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

    android:fillAfter="true" >

   

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

[/shcode]

10-Slide Down یا اسلاید پایین

اسلاید پایین دقیقا مانند اسلاید بالا است فقط مقدار android:fromYScale  و  android:toYScaleرا تعیین می کنیم.

slide_down.xml

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

    android:fillAfter="true">

   

        android:duration="500"

        android:fromXScale="1.0"

        android:fromYScale="0.0"

        android:toXScale="1.0"

        android:toYScale="1.0" />

[/shcode]

11- Bounce یا پرش

پرش یک اثر انیمیشن که در آن انیمیشن به پایان می رسد.برای این مجموعه مقدار android:interpolator را برابر @android:anim/bounce_interpolator قرار می دهیم.این نوع انیمیشن می تواند با هر نوع انیمیشنی استفاده شود.

اسلاید پایین را با استفاده از پرش انجام میدهیم.

bounce.xml

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

    android:fillAfter="true"

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

   

        android:duration="500"

        android:fromXScale="1.0"

        android:fromYScale="0.0"

        android:toXScale="1.0"

        android:toYScale="1.0" />

[/shcode]

12- Sequential Animationیا انیمیشن ترتیبی

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

sequential.xml

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

    android:fillAfter="true"

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

   

   

   

        android:duration="800"

        android:fillAfter="true"

        android:fromXDelta="0%p"

        android:startOffset="300"

        android:toXDelta="75%p" />

   

        android:duration="800"

        android:fillAfter="true"

        android:fromYDelta="0%p"

        android:startOffset="1100"

        android:toYDelta="70%p" />

   

        android:duration="800"

        android:fillAfter="true"

        android:fromXDelta="0%p"

        android:startOffset="1900"

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

   

        android:duration="800"

        android:fillAfter="true"

        android:fromYDelta="0%p"

        android:startOffset="2700"

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

   

   

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

[/shcode]

13- Together Animation یا چند انیمیشن با هم

انجام تمام انیمیشن ها باهم را می توان بدون استفاده از ویژگی android:startOffset انجام داد.

together.xml

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

    android:fillAfter="true"

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

   

   

   

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

   

   

   

        android:duration="500"

        android:fromDegrees="0"

        android:pivotX="50%"

        android:pivotY="50%"

        android:repeatCount="infinite"

        android:repeatMode="restart"

        android:toDegrees="360" />

[/shcode]

نمایی از برنامه

360x500http://p30droid.com/Uploader/do.php?img=184[/img]

دانلود سمپل

دانلود نمونه ای دیگر از انیمیشن

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 5 ماه بعد...

برای اینکار باید در متد onKeyDown کد مربوط که یک انیمیشن میباشد را اجرا کنید.

[shcode=java]

    @Override

    public boolean onKeyDown(int keyCode, KeyEvent event) {

        // TODO Auto-generated method stub

        if (keyCode == KeyEvent.KEYCODE_BACK) {

            finish();

            overridePendingTransition(R.anim.animation_enter,

                    R.anim.animation_leave);

        }

        return super.onKeyDown(keyCode, event);

    }

[/shcode]

بعد میبایستی که دو فایل به نام های animation_enter و animation_leave را در پوشه anim ایجاد کنید و کدهای زیر را بنویسید:

animation_enter.xml

[shcode=xml]

    android:shareInterpolator="false" >

   

        android:duration="200"

        android:fromXDelta="-100%"

        android:fromYDelta="0%"

        android:toXDelta="0%"

        android:toYDelta="0%" />

[/shcode]

animation_leave.xml

[shcode=xml]

    android:shareInterpolator="false" >

   

        android:duration="200"

        android:fromXDelta="0%"

        android:fromYDelta="0%"

        android:toXDelta="100%"

        android:toYDelta="0%" />

[/shcode]

لینک ارسال
به اشتراک گذاری در سایت های دیگر

اگه بخوایم تایید قبل از خروج هم داشته باشیم چه کدی باید بزنیم؟؟؟

یه انیمیشن شبیه ios7 ندارید که از برنامه کشیده شه بیرون؟؟؟

موقع داخل شدن به اکتیویتی هم میشه انیمیشن داشت؟؟؟

لطفا کدی بدید که همه این موارد رو داشته باشه...

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 1 سال بعد...

سلام ممنون از آموزش های مفیدتون فقط یه سال اگه بخوای به این کد انیمیشن بدین چجوری میشه ؟؟

که وقتی دستت رو بزاری رو دکمه دکمه بلرزه(یعنی یکم بزرگ بشه بعد به حالت اول در بیاد

[shcode=java]

package com.darkhah1.drum;

import android.R.anim;

import android.media.MediaPlayer;

import android.media.MediaPlayer.OnCompletionListener;

import android.os.Bundle;

import android.app.Activity;

import android.util.Log;

import android.view.Menu;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.View.OnTouchListener;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageButton;

       

public class MainActivity extends Activity implements OnTouchListener {

    private MediaPlayer mp;

    private Animation anim;

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

     

        final ImageButton zero = (ImageButton) this.findViewById(R.id.imageButton10);

        zero.setOnTouchListener(this);

        mp = MediaPlayer.create(this, R.raw.kick);

    }

    @Override

    public boolean onTouch(View v, MotionEvent event) {

        // TODO Auto-generated method stub

        switch (event.getAction())

        {

        case MotionEvent.ACTION_DOWN:

           

            mp = MediaPlayer.create(getApplicationContext(), R.raw.kick);

            mp.start();

            mp.setLooping(false);

            mp.setOnCompletionListener(new OnCompletionListener() {

                public void onCompletion(MediaPlayer mp1) {

                    // TODO Auto-generated method stub

                    mp1.release();

                }

            });

            Log.i("Action", "Down");

            break;

        case MotionEvent.ACTION_MOVE:

            Log.i("Action", "Move");

            Log.i("On Long", "On Long");

            break;

        case MotionEvent.ACTION_CANCEL:

            mp.pause();

            Log.i("Action", "Cancel");

            break;

        case MotionEvent.ACTION_UP:

            mp.setLooping(false);

            //mp1.stop();

            Log.i("Action", "up");

            break;

        default:

            break;

        }

        return true;

    }

   

    private Animation start() {

        // TODO Auto-generated method stub

        return null;

    }

    private void start(MainActivity mainActivity, int shake) {

        // TODO Auto-generated method stub

       

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

}

[/shcode]

لینک ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...