نمایش انیمیشن، در برنامه اندروید
در این مبحث، چگونگی نمایش یک انیمیشن، حاصل از نمایش چند عکس متوالی، را شرح می دهیم. برنامه اندروید، شامل یک 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 ، به صورت زیر می باشد :
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 را به صورت زیر می نویسیم :
<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 ، در ابتدا، به صورت زیر می باشد :
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 را به صورت زیر تغییر می دهیم :
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;
}
}
در کدهای بالا، خط زیر، اهمیت ویژه ای دارد :
این خط از کدها، باعث می شود که عکس نمایش داده شده در ImageView ، برداشته شود (در غیر اینصورت، انیمیشن، در پشت این عکس نمایش داده خواهد شد).
برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.
با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :
با اشاره بر روی تصویر، انیمیشن نمایش داده می شود.
فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :
sami سلام آیا بهینه ترین روش برای انیمیشن هایی که از چندین فریم(عکس) تشکیل شده اند این هست یا روش بهتری وجود داره؟(مثلا پخش ویدیو به جای انیمیشن)
مصطفی با سلام :
میخواستم بدونم چیجوری میشه با انیمیشن alpha یک تصویر را به صورت کامل از روی صفحه محو کرد (یعنی دیگه نمایش داده نشه alpha تصویر 0 بمونه)
با تشکر
محمد از انیمیشن zoom out استفاده کن و اونو تو نقطه 0 قرار بدی نمایش داده نمیشه دیگه
mahdiahi75 سلام و تشکر بابت اموزش...
من میخوام انیمیشن به صورت خودکار تکرار بشه بدون نیاز به اشاره کاربر ایا راهی وجود داره ؟
ممنون
admin سلام.
در کدهای فایل animation.xml ، کد زیر را :
android:oneshot="true"
به کد زیر تغییر بدهید :
android:oneshot="false"
علی سلام اگر من بخوام عکسهای داخل itemدر هر باز اجرای اپ از اینترنت دانلود بشه باید چیکار کنم؟
ایمان سلام.چطوری میتونم یه انیمیشن مثل این رو به عنوان بگراند اصلی قرار بدم..؟
