سبد (0)

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

آموزش انیمیشن سازی در اندروید  

انیمیشن در اندروید از راه های بسیاری امکان پذیر می باشد. در این قسمت ما در مورد یک راه آسان و پر مصرف در ساخت انیمیشن صحبت خواهیم کرد که انیمیشن tweened  نامیده می شود.

انیمیشن Tween

انیمیشن Tween پارامترهایی مانند شروع، پایان، اندازه، مدت زمان، زاویه ی چرخش و غیره را می گیرد و انیمیشن مورد نیاز روی آبجکت را اجرا می کند، که می تواند برای هر نوع آبجکتی به کار گرفته شود. بنابراین برای استفاده از این برنامه، اندروید به ما گروهی به نام Animation  ارائه می دهد.

برای اجرای انیمیشن در اندروید، قصد داریم عملکرد استاتیک loadAnimation() از گروه AnimationUtils را فرابخوانیم. هدف این است که نتیجه را در یک آبجکت انیمیشن دریافت کنیم. ترکیب آن مانند زیر می باشد.

 

Animation animation = AnimationUtils.loadAnimation(getApplicationContext()،  R.anim.myanimation);

به دومین پارامتر توجه کنید که نام فایل xml انیمیشن ما می باشد. شما باید یک فولدر جدید به نام anim در مسیر res ایجاد کرده و یک فایل xml  در فولدر anim بسازید.

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

  • start()

    این روش انیمیشن را شروع می کند.
    setDuration(long duration)
    این روش مدت زمان یک انیمیشن را تنظیم می کند.

    getDuration()

    این روش مدت زمانی را به دست می آورد که توسط روش  بالا تنظیم شده است.

    end()

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

    cancel()

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

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

 

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

مثال زیر استفاده از انیمیشن را در اندروید توضیح می دهد. شما قادر هستید انواع مختلف انیمیشن را از منو انتخاب کنید و انیمیشن انتخاب شده بر روی یک imageView روی صفحه به کار گرفته خواهد شد.

برای آزمایش با این مثال لازم است که آن را روی یک شبیه ساز یا یک دستگاه واقعی اجرا کنید.

  • شما از Eclipse IDE برای ایجاد یک برنامه ی اندروید استفاده خواهید کرد و آن را تحت پکیج com.example.animation به عنوان Animation نام گذاری می کنید.در هنگام ایجاد این برنامه مطمئن شوید که Target SDK و Compile With  در آخرین ورژن Android SDK هستند تا از API های سطح بالاتری استفاده کنید.

  • فایل src/MainActivity.java را برای افزودن کد انیمیشن تغییر می دهد.
  • فایل لیوت xml را به res/layout/activity_main.xml تغییر دهید.اگر لازم است مولفه ی GUI را اضافه کنید
  • یک فولدر جدید در مسیر res ایجاد کنید و آن را anim بنامید.آن را با مشاهده ی res/anim تایید کنید
  • روی anim کلیک راست و بعد new را انتخاب کنید و در آخر بر روی Android XML کلیک کنید. شما باید سه فایل متفاوت که در زیر لیست شده اند را ایجاد کنید.
  •  فایل های myanimation.xml,clockwise.xml,fade.xml,move.xml,blink.xml,slide.xml را ایجاد کنید و کد xml را به آن اضافه کنید.
  • نیازی نیست که حالت پیش فرض فایل string را تغییر دهید
  •  برنامه را اجرا کنید و یک دستگاه اجرای اندروید انتخاب کنید و برنامه را روی آن نصب کرده و نتایج را بررسی کنید.

 در اینجا کد تغییر یافته ی MainActivity.java را مشاهده می کنید.

 

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

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

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

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

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

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

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

در اینجا کد تغییر یافته ی 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="Alert Dialog"
android:id="@+id/textView"
android:textSize="35dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tutorialspoint"
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="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/logo"
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"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="zoom"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="40dp"
android:onClick="clockwise"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="clockwise"
android:id="@+id/button2"
android:layout_alignTop="@+id/button"
android:layout_centerHorizontal="true"
android:onClick="zoom"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fade"
android:id="@+id/button3"
android:layout_alignTop="@+id/button2"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:onClick="fade"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blink"
android:onClick="blink"
android:id="@+id/button4"
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="move"
android:onClick="move"
android:id="@+id/button5"
android:layout_below="@+id/button2"
android:layout_alignRight="@+id/button2"
android:layout_alignEnd="@+id/button2"
android:layout_alignLeft="@+id/button2"
android:layout_alignStart="@+id/button2" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="slide"
android:onClick="slide"
android:id="@+id/button6"
android:layout_below="@+id/button3"
android:layout_toRightOf="@+id/textView"
android:layout_toEndOf="@+id/textView" />

</RelativeLayout>


در اینجا کد res/anim/myanimation.xmlرا مشاهده می کنید.

 

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

در اینجا کد res/anim/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>

در اینجا کد res/anim/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>

در اینجا کد res/anim/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>

در اینجا کد res/anim/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>

در اینجا کد res/anim/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>

در اینجا کد تغییر یافته ی res/values/string.xmlرا مشاهده می کنید


<resources>
<string name="app_name">My Application</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
</resources>

در اینجا کد پیش فرض AndroidManifest.xmlرا مشاهده می کنید

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.sairamkrishna.myapplication"
android:versionCode="1"
android:versionName="1.0" >

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >

<activity
android:name="com.example.animation.MainActivity"
android:label="@string/app_name" >

<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

</activity>

</application>
</manifest>

اجازه دهید برنامه ی شما را اجرا کنیم. فرض می کنیم که دستگاه موبایل خود را به کامپیوتر متصل کرده اید. برای اجرای برنامه از Eclipseیکی از فایل های فعالیت برنامه ی خود را باز کنید و روی آیکن Run از قسمت تولبار کلیک کنید.

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه