نمایش انیمیشن، در برنامه اندروید

در این مبحث، چگونگی نمایش یک انیمیشن، حاصل از نمایش چند عکس متوالی، را شرح می دهیم. برنامه اندروید، شامل یک ImageView خواهد بود و زمانی که کاربر بر روی آن اشاره می کند، انیمیشن نمایش داده می شود.

در برنامه eclipse ، ابتدا یک پروژه اندروید با نام Kelidestan.com_Animation می سازیم (نام package را برابر com.kelidestan.animation انتخاب می کنیم. نام activity اصلی را برابر MainActivity انتخاب می کنیم و فایل xml متناظر آن را هم برابر activity_main قرار می دهیم).

قبل از شروع، باید تصاویر لازم برای ساخت انیمیشن را داشته باشیم. مثلا من تصاویر زیر را در نظر گرفته ام :

نام عکس	عکس	نام عکس	عکس	نام عکس	عکس
tick_1.jpg		tick_7.jpg		tick_13.jpg
tick_2.jpg		tick_8.jpg		tick_14.jpg
tick_3.jpg		tick_9.jpg		tick_15.jpg
tick_4.jpg		tick_10.jpg		tick_16.jpg
tick_5.jpg		tick_11.jpg		tick_17.jpg
tick_6.jpg		tick_12.jpg

با نمایش پی در پی عکس های بالا، یک انیمیشن خواهیم داشت که ترسیم یک علامت تیک را نمایش می دهد. دقت کنید که ابتدای نام عکس ها، یک کلمه مشخص و سپس در ادامه آن، شماره هایی، به ترتیب نمایش عکس ها، آمده است. نکته مهم این است که در انتخاب نام عکس ها، هیچ اجباری وجود ندارد و اینکه عکس ها را اینگونه نامگذاری کرده ایم، برای دادن نظم به آنها و عدم گیج شدن خودمان می باشد.

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

دانلود عکس ها

عکس ها را در فولدر drawable-hdpi کپی می کنیم :

در ابتدا که پروژه اندروید را می سازیم، نمایش گرافیکی فایل activity_main.xml ، به صورت زیر می باشد :

این صفحه، به طور پیش فرض، دارای یک TextView می باشد، ما TextView را حذف کرده و به جای آن، یک ImageView قرار می دهیم. انیمیشن مورد نظر ما، باید در این ImageView نمایش داده شود :

تا اینجا، کدهای فایل activity_main.xml ، به صورت زیر می باشد :

<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher" />

</LinearLayout>

مشاهده می کنید که id برای ImageView ، برابر imageView1 تعریف شده است.

در زیرمجموعه فولدر res ، یک فولدر با نام anim می سازیم و سپس درون آن، یک فایل با نام animation.xml ایجاد می کنیم :

کدهای فایل animation.xml را به صورت زیر می نویسیم :

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

<animation-list android:oneshot="true" xmlns:android="http://schemas.android.com/apk/res/android" >

     <item android:drawable="@drawable/tick_1" android:duration="100"/>

     <item android:drawable="@drawable/tick_2" android:duration="100"/>

     <item android:drawable="@drawable/tick_3" android:duration="100"/>

     <item android:drawable="@drawable/tick_4" android:duration="100"/>

     <item android:drawable="@drawable/tick_5" android:duration="100"/>

     <item android:drawable="@drawable/tick_6" android:duration="100"/>

     <item android:drawable="@drawable/tick_7" android:duration="100"/>

     <item android:drawable="@drawable/tick_8" android:duration="100"/>

     <item android:drawable="@drawable/tick_9" android:duration="100"/>

     <item android:drawable="@drawable/tick_10" android:duration="100"/>

     <item android:drawable="@drawable/tick_11" android:duration="100"/>

     <item android:drawable="@drawable/tick_12" android:duration="100"/>

     <item android:drawable="@drawable/tick_13" android:duration="100"/>

     <item android:drawable="@drawable/tick_14" android:duration="100"/>

     <item android:drawable="@drawable/tick_15" android:duration="100"/>

     <item android:drawable="@drawable/tick_16" android:duration="100"/>

     <item android:drawable="@drawable/tick_17" android:duration="100"/>

</animation-list>

اکنون باید به سراغ فایل activity اصلی برویم که قبلا، نام آن را برابر MainActivity انتخاب کرده ایم :

کدهای فایل MainActivity.java ، در ابتدا، به صورت زیر می باشد :

package com.kelidestan.animation;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class MainActivity extends Activity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

                super.onCreate(savedInstanceState);

                setContentView(R.layout.activity_main);

        }

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

        }

}

کدهای فایل MainActivity.java را به صورت زیر تغییر می دهیم :

package com.kelidestan.animation;

import android.os.Bundle;

import android.app.Activity;

import android.graphics.drawable.AnimationDrawable;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageView;

public class MainActivity extends Activity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

                super.onCreate(savedInstanceState);

                setContentView(R.layout.activity_main);

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

                img.setBackgroundResource(R.anim.animation);

                img.setOnClickListener(new OnClickListener() {

                    @Override

                    public void onClick(View v) {

                        img.setImageDrawable(null);

                        AnimationDrawable anim = (AnimationDrawable) img.getBackground();

                        anim.start();

                    }

                });

        }

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

        }

}

در کدهای بالا، خط زیر، اهمیت ویژه ای دارد :

img.setImageDrawable(null);

این خط از کدها، باعث می شود که عکس نمایش داده شده در ImageView ، برداشته شود (در غیر اینصورت، انیمیشن، در پشت این عکس نمایش داده خواهد شد).

برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.

با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :

با اشاره بر روی تصویر، انیمیشن نمایش داده می شود.

فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :

دانلود فایل های پروژه اندروید

دانلود فایل apk برنامه اندروید

دسته بندی نمایش انیمیشن، در برنامه نویسی اندروید

نویسنده علیرضا گلمکانی

شماره کلید 228

گزینه ها

به اشتراک گذاری (Share) در شبکه های اجتماعی

FaceBook Twitter Digg Reddit LinkedIn Pinterest StumbleUpon

نظرات 7 7 0

sami

۱۳۹۵/۰۵/۰۵

۱۹:۳۸

سلام آیا بهینه ترین روش برای انیمیشن هایی که از چندین فریم(عکس) تشکیل شده اند این هست یا روش بهتری وجود داره؟(مثلا پخش ویدیو به جای انیمیشن)

مصطفی

۱۳۹۵/۰۵/۳۱

۱۶:۴۸

با سلام :

میخواستم بدونم چیجوری میشه با انیمیشن alpha یک تصویر را به صورت کامل از روی صفحه محو کرد (یعنی دیگه نمایش داده نشه alpha تصویر 0 بمونه)

با تشکر

محمد