میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

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

مبحث حاضر به شرح نحوه ی پیاده سازی انیمیشن در اندروید (استفاده از property Animation API ) می پردازد. پروژه های این بخش در محیط کاری Android Studio نوشته شده و مبتنی بر ویرایش ۵٫۱ اندروید می باشد.

ویرایش ۳٫۰ اندروید ابزار Properties Animation API را برای اولین بار رونمایی کرد که به توسعه دهنده این امکان را می دهد تا مقادیر property های یک آبجکت را از یک نقطه ی زمانی تا نقطه ی زمانی دیگر ویرایش نموده و جلوه های دیداری زیبایی را خلق کند.

با بهره گیری از API مذکور قادر خواهید بود برای property های دلخواه آبجکت یک مقدار آغاز و یک مقدار پایان تعیین کنید. این دو مقدار یک بازه ی زمانی مشخص می کنند که طی آن ظاهر المان تغییر کرده یا از مکانی در صفحه به مکان دیگری حرکت می کند. این API صرفا محدود به Views نبوده و به راحتی برای سایر آبجکت های جاوا قابل استفاده می باشد.

 


کلاس های AnimatorListener و Animator

کلاس پدر (superclass) توابع انیمیشن سازی اندروید ( Animation API) کلاس Animator می باشد. ObjectAnimator کلاسی است که توسعه دهنده برای ویرایش attribute های یک آبجکت مورد استفاده قرار می دهد.

همچنین می توانید یک نمونه از کلاس AnimatorListener را به کلاس Animator اضافه نمایید.
کلاس نام برده یک گوش فرخوان/ listener است و این قابلیت را دارد که در طی مراحل مختلف یک انیمیشن فراخوانی شود.
شما می توانید با استفاده از این listener به اتفاقات معینی گوش داده و قبل یا بعد از رخداد اتفاق مورد نظر، عملیات معینی را به اجرا بگذارید. به عنوان مثال یک view را از ViewGroup حذف نمایید یا ظاهر یک المان UI را در بازه ی زمانی معینی تغییر دهید.

 


کلاس ViewPropertyAnimator 

کلاس ViewPropertyAnimator در ویرایش ۳٫۱ اندروید ارائه شده و دسترسی به انیمیشن های متعارف که بر روی view ها اجرا می شوند را به مراتب آسان تر ساخت.
متد ()animate بر روی view فراخوانی شده و نمونه ای از ViewPropertyAnimator را در خروجی بر می گرداند. این آبجکت به شما امکان اجرای چندین انیمیشن را به طور همزمان می دهد.
آبجکت ViewPropertyAnimator از fluent API برای پشتیبانی از کدهای خوانا، نوشتن روان و پشت سرهم دستورات استفاده کرده و علاوه بر آن به شما این اجازه را می دهد تا مدت زمان اجرای انیمیشن را مشخص نمایید ( Fluent API عبارت است از پیاده سازی interface شی گرا به صورتی که قابلیت خوانایی کد به طور چشم گیری افزایش می یابد و طوری که برنامه نویس بتواند دستورات را به صورت روان و پشت سرهم یکجا بنویسد.)
هدف از بکار بردن ViewPropertyAnimator ارائه ی یک API ساده برای اجرا و دسترسی آسان به انیمیشن های پرکاربرد اندروید می باشد.
کد زیر نحوه ی استفاده از این متد را به نمایش می گذارد.

// Using hardware layer
myView.animate().translationX(400).withLayer();

به منظور افزایش کارایی، شما می توانید به ViewPropertyAnimator این اجازه را بدهید تا از یک لایه ی سخت افزاری نیز استفاده کند.

// Using hardware layer
myView.animate().translationX(400).withLayer();

در صورت نیاز می توانید به طور مسقیم اینترفیس Runnableرا پیاده سازی کنید که در ابتدا و انتهای انیمشین اجرا می شود.

 

// StartAction
myView.animate().translationX(100).withStartAction(new Runnable(){
public void run(){
viewer.setTranslationX(100-myView.getWidth());
// do something
}
});
// EndAction
myView.animate().alpha(0).withStartAction(new Runnable(){
public void run(){
// rRemove the view from the parent layout
parent.removeView(myView);
}
});

متد () setInterpolator به شما اجازه می دهد تا آبجکتی از جنس TimeInterpolator تعریف کرده و تغییر مقدار را در طول زمان مشخصی انجام دهید. حالت استاندارد linear می باشد.
محیط اندروید ( )platform تعدادی حالت پیش فرض و استاندارد همچون AccelerateDecelerateInterpolator تعیین می کند که در آن انیمیشن با سرعت پایین آغاز شده، در اواسط تند می شود و بار دیگر در پایان با سرعت پایین خاتمه می یابد.
از طریق متد setEvaluator می توانید آبجکتی از نوع TypeEvaluator تنظیم کنید که به شما این امکان را می دهد تا برای property type دلخواه انیمیشن تعریف کنید. این کار با ارائه ی evaluator
های اختصاصی برای نوع هایی انجام می شود که اندروید آن ها را نمی شناسد و به صورت پیش فرض توسط سیستم انیمیشن سازی اندروید استفاده نمی شود.

 


Layout animations

کلاس LayoutTransition این قابلیت را به توسعه دهنده می دهد تا بر روی layout container (ظرف و میزبان layout) انیمیشن تنظیم کند. بدین وسیله هر تغییر در view hierarchy این container به صورت انیمیشن اجرا خواهد شد.

 

package com.example.android.layoutanimation;
import android.animation.LayoutTransition;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
public class MainActivity extends Activity {
private ViewGroup viewGroup;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LayoutTransition l = new LayoutTransition();
l.enableTransitionType(LayoutTransition.CHANGING);
viewGroup = (ViewGroup) findViewById(R.id.container);
viewGroup.setLayoutTransition(l);
}
public void onClick(View view) {
viewGroup.addView(new Button(this));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}

اعمال انیمیشن بر روی انتقال بین activityها (پیاده سازی انیمیشن بر روی transition بین دو activity )

انیمیشن را می توان علاوه بر روی Views ، بر روی انتقال بین activity ها نیز اعمال نمود.

کلاس ActivityOptions به شما اجازه می دهد تا انیمیشن های پیش فرض اندروید و در صورت نیاز انیمیشن های اختصاصی خود را پیاده سازی نمایید.

 

public void onClick(View view) {
Intent intent = new Intent(this, SecondActivity.class);
ActivityOptions options = ActivityOptions.makeScaleUpAnimation(view, 0,
۰, view.getWidth(), view.getHeight());
startActivity(intent, options.toBundle());
}

 



آموزش View Animation

این بخش به شرح نحوه ی استفاده از Properties animation API می پردازد.
یک پروژه ی و activity جدید اندروید به ترتیب به نام های
com.vogella.android.animation.views و AnimationExampleActivity ایجاد نمایید. فایل layout می بایست main.xml نام گذاری شده باشد. محتوای آن را به صورت زیر ویرایش نمایید.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startAnimation"
android:text="Rotate" />
<Button
android:id="@+id/Button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startAnimation"
android:text="Group" >
</Button>
<Button
android:id="@+id/Button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startAnimation"
android:text="Fade" />
<Button
android:id="@+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="startAnimation"
android:text="Animate" />
</LinearLayout>
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/icon" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/imageView1"
android:layout_alignRight="@+id/imageView1"
android:layout_marginBottom="30dp"
android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

فایل XML زیر را برای تعریف منو ایجاد نمایید. 

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/item1"
android:showAsAction="ifRoom"
android:title="Game">
</item>
</menu>

بدنه ی activity خود را به صورت زیر ویرایش نمایید.

 

package com.vogella.android.animation.views;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
public class AnimationExampleActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
public void startAnimation(View view) {
float dest = 0;
ImageView aniView = (ImageView) findViewById(R.id.imageView1);
switch (view.getId()) {
case R.id.Button01:
dest = 360;
if (aniView.getRotation() == 360) {
System.out.println(aniView.getAlpha());
dest = 0;
}
ObjectAnimator animation1 = ObjectAnimator.ofFloat(aniView,
"rotation", dest);
animation1.setDuration(2000);
animation1.start();
// Show how to load an animation from XML
// Animation animation1 = AnimationUtils.loadAnimation(this,
// R.anim.myanimation);
// animation1.setAnimationListener(this);
// animatedView1.startAnimation(animation1);
break;
case R.id.Button02:
// shows how to define a animation via code
// also use an Interpolator (BounceInterpolator)
Paint paint = new Paint();
TextView aniTextView = (TextView) findViewById(R.id.textView1);
float measureTextCenter = paint.measureText(aniTextView.getText()
.toString());
dest = 0 - measureTextCenter;
if (aniTextView.getX() < 0) {
dest = 0;
}
ObjectAnimator animation2 = ObjectAnimator.ofFloat(aniTextView,
"x", dest);
animation2.setDuration(2000);
animation2.start();
break;
case R.id.Button03:
// demonstrate fading and adding an AnimationListener
dest = 1;
if (aniView.getAlpha() > 0) {
dest = 0;
}
ObjectAnimator animation3 = ObjectAnimator.ofFloat(aniView,
"alpha", dest);
animation3.setDuration(2000);
animation3.start();
break;
case R.id.Button04:
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(aniView, "alpha",
۰f);
fadeOut.setDuration(2000);
ObjectAnimator mover = ObjectAnimator.ofFloat(aniView,
"translationX", -500f, 0f);
mover.setDuration(2000);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(aniView, "alpha",
۰f, 1f);
fadeIn.setDuration(2000);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(mover).with(fadeIn).after(fadeOut);
animatorSet.start();
break;
default:
break;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.mymenu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
Intent intent = new Intent(this, HitActivity.class);
startActivity(intent);
return true;
}
}

یک activity دیگر به نام HitActivity ایجاد نمایید.

 

package com.vogella.android.animation.views;
import java.util.Random;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class HitActivity extends Activity {
private ObjectAnimator animation1;
private ObjectAnimator animation2;
private Button button;
private Random randon;
private int width;
private int height;
private AnimatorSet set;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.target);
width = getWindowManager().getDefaultDisplay().getWidth();
height = getWindowManager().getDefaultDisplay().getHeight();
randon = new Random();
set = createAnimation();
set.start();
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
int nextX = randon.nextInt(width);
int nextY = randon.nextInt(height);
animation1 = ObjectAnimator.ofFloat(button, "x", button.getX(),
nextX);
animation1.setDuration(1400);
animation2 = ObjectAnimator.ofFloat(button, "y", button.getY(),
nextY);
animation2.setDuration(1400);
set.playTogether(animation1, animation2);
set.start();
}
});
}
public void onClick(View view) {
String string = button.getText().toString();
int hitTarget = Integer.valueOf(string) + 1;
button.setText(String.valueOf(hitTarget));
}
private AnimatorSet createAnimation() {
int nextX = randon.nextInt(width);
int nextY = randon.nextInt(height);
button = (Button) findViewById(R.id.button1);
animation1 = ObjectAnimator.ofFloat(button, "x", nextX);
animation1.setDuration(1400);
animation2 = ObjectAnimator.ofFloat(button, "y", nextY);
animation2.setDuration(1400);
AnimatorSet set = new AnimatorSet();
set.playTogether(animation1, animation2);
return set;
}
}

زمانی که این مثال را اجرا کرده و بر روی دکمه های مختلف آن کلیک می کنید، انیمیشن آغاز می شود. از طریق ActionBar می توانید به activity دوم پیمایش کنید.

 

 


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

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟