آموزش متحرک سازی animation در اندروید

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

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

آموزش متحرک سازی animation در اندروید

در این فصل از سری مقاله های آموزشی با نحوه ی بهره گیری از پویانمایی یا متحرک سازی (animation) در اندروید آشنا می شوید. مبحث پیش رو بر اساس Eclipse 4.2، Java 1.6 و Android 4.2 نوشته شده است.

فهرست محتوا

1. متحرک سازی در اندروید

بررسی اجمالی

کلاس ارشد / والد Animator و کلاس     AnimatorListener

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

animation layout

استفاده از قابلیت متحرک سازی در انتقال (transition) بین activity ها

2. آموزش view animation

3. بکارگیری قابلیت متحرک سازی بین تراکنش های fragment ها

4. Properties Animation API (رابط برنامه سازی کاربردی پویا نمایی خصوصیات) برای ویرایش های قدیمی تر اندروید

1. پویانمایی در اندروید

بررسی اجمالی

این ویرایش 3.0 اندروید بود که برای اولین بار این قابلیت را رونمایی و در سیستم اندروید کاربردی کرد. امکان پویانمایی در اندروید به شما اجازه می دهد خصوصیات اشیإ (object properties) را طی فاصله ی زمانی مشخص و از پیش تعریف شده تغییر دهید.

رابط برنامه سازی کاربردی (API) مذکور به برنامه نویس این امکان را می دهد که برای خصوصیات اشیإ دلخواه یک مقدار آغاز (start value) و یک مقدار پایان (end value) تعریف کرده، همچنین تغییرات زمان بندی شده (مبتنی بر زمان از پیش تعیین شده) به این خصیصه (attribute) اعمال کند. این API را می توان برای هر شی جاوایی مورد استفاده قرار داد (اعمال کرد) و نه تنها ویژه ی View ها.  

کلاس ارشد / والد Animator و کلاس     AnimatorListener

کلاس والد (superclass) رابط برنامه سازی کاربردی متحرک سازی (Animation API) کلاس Animator می باشد. معمولاً از کلاس ObjectAnimator جهت تعریف (modify) خصیصه های یک شی بکار می رود.

همچنین این امکان برای شما (برنامه نویس) فراهم شده که یک کلاس AnimatorListener به کلاس ارشد یا پدر Animator خود اضافه کنید. گوش فراخوان (listener) مزبور در مراحل مختلف متحرک سازی (animation) فراخوانی می شود.

 برنامه نویس قادر است با استفاده از گوش فراخوان ذکر شده عملیات لازم را پیش و پس از متحرک سازی (animation مورد نظر) انجام دهد، به عنوان مثال یک view را از یک viewgroup حذف یا به آن اضافه کند.   

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

کلاس ViewPropertyAnimator که نخستین مرتبه در ورژن 3.1 اندروید معرفی شد، دسترسی به پویانمایی هایی که در سطح view ها رخ می دهد به مراتب سهولت بخشیده است.

تابع animate() در یک view شی ViewPropertyAnimator را باز می گرداند. شی نام برده این قابلیت را فراهم می کند که عملیات متحرک سازی (animation) را به صورت همزمان و همگام انجام دهید. این شی همچنین دارای یک رابط برنامه سازی کاربردی (API) روان می باشد و به برنامه نویس اجازه می دهد طول یا مدت متحرک سازی را خود تنظیم کند.

مقصود و وظیفه ی اصلی کلاس ViewPropertyAnimator تهیه و ارائه ی API بسیار ساده ویژه ی پویانمایی های متعارف است.

کد زیر نمونه ای از کاربرد این متد را نمایش می دهد.

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

به منظور بهینه سازی کارایی می توان به ViewPropertyAnimator این امکان را داد که از یک hardware layout کمک بگیرد.

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

همچنین می توان یک Runnable را خود به طور مستقیم گونه ای تعریف کرد تا هم در ابتدا و هم در انتهای پویانمایی (animation) اجرا شود.  

// 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(){
        ‎            // Remove the view from the layout called parent 
        ‎            parent.removeView(myView);
        ‎        }
        ‎    });

setInterpolator() امکان ایجاد شی ای از نوع TimeInterpolator را فراهم کرده که تغییر مقدار را در طول زمان تعریف می کند. رویه ی استاندارد در اینجا به صورت خطی (linear) است. محیط اندروید تعداد متعددی به صورت پیش فرض تعریف می کند، برای مثال می توان به AccelerateDecelerateInterpolator اشاره کرد که در آن سرعت تغییر به آرامی و کندی آغاز شده ولی در اواسط افزایش می یابد و دوباره در انتها رو به کندی رفته و کاهش می یابد.

با صدا زدن تابع setEvaluator می توانید شی ای از نوع TypeEvaluator سِت کنید که به شما اجازه می دهد برای نوع property دلخواه، پویا نمایی (animation) پیاده سازی کنید. این امر در واقع از طریق ارائه ی ارزیاب های سفارشی (custom evaluator) ویژه ی نوع هایی که به صورت خودکار توسط سیستم اندروید درک، هضم و یا بکار گرفته نمی شوند صورت می گیرد.

animation layout

کلاس LayoutTransition متحرک سازی خودکار را روی تغییراتی که در طرح کلی (layout changes) رخ می دهد، فعال سازی می کند.

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

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

می توان انیمیشن ها را در view اعمال کرد و یا آن ها را حین انتقال (transition) بین activity ها اعمال کرد.

کلاس ActivityOptions نیز امکان تعریف و پیاده سازی انیمیشن های سفارشی یا پیش فرض را فراهم می سازد. 

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

2. آموزش view animation

در این بخش به نحوه ی استفاده از Properties Animation API می پردازیم.

پروژه ی جدیدی به نام com.vogella.android.animation.views به همراه activity ی به نام AnimationExampleActivity ایجاد کنید. فایل طرح بندی باید 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>

حال menu resource زیر را ایجاد کنید.

<?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"،
                        0f);
                fadeOut.setDuration(2000);
                ObjectAnimator mover = ObjectAnimator.ofFloat(aniView،
                        "translationX"، -500f، 0f);
                mover.setDuration(2000);
                ObjectAnimator fadeIn = ObjectAnimator.ofFloat(aniView، "alpha"،
                        0f، 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 دیگر خود پیمایش (دسترسی پیدا) کرد. 

3. بکارگیری قابلیت متحرک سازی بین تراکنش های fragment ها

این اجازه به برنامه نویس داده شده که متحرک سازی و انیمیشن را طی تراکنش های fragment ها تعریف کند که بعد بر اساس Property Animation API، با فراخوانی متد setCustomAnimations() مورد استفاده قرار می گیرد.

برنامه نویس همچنین می تواند با فراخواندن متد setTransition() از انیمیشن های استاندارد سیستم اندروید بهره جوید. انیمیشن های گفته شده توسط ثابت (constant) هایی که با FragmentTransaction.TRANSIT_FRAGMENT_*. آغاز می گردند، تعریف می شوند.

هر دو توابع که در بالا بیان شد، هم قابلیت تعریف entry animation و هم exiting animation را ایجاد می کنند.