افزودن Animation به پروژه های اندروید استودیو

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

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

استفاده از انیمیشن در اندروید

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

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

این API صرفا محدود به Views نبوده و به راحتی برای سایر آبجکت های جاوا قابل استفاده می باشد.

کلاس های Animator و AnimatorListener

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

همچنین می توانید یک نمونه از کلاس AnimatorListener را به کلاس Animator اضافه نمایید. کلاس نام برده یک گوش فرخوان/listener است و این قابلیت را دارد که در طی مراحل مختلف یک انیمیشن فراخوانی شود.

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

کلاس ViewPropertyAnimator

کلاس ViewPropertyAnimator در ویرایش 3.1 اندروید ارائه شده و دسترسی به انیمیشن های متعارف که بر روی 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 تنظیم کنید که به شما این امکان را می دهد تا برای type property دلخواه انیمیشن تعریف کنید. این کار با ارائه ی 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,
                        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 زیر را برای تعریف منو ایجاد نمایید.

بدنه ی 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;
        }
}

اعمال انیمیشن بر روی انتقال بین activity ها در اندروید با shared view ها

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

به منظور تست این قابلیت، یک پروژه ی جدید ایجاد نموده و پکیج com.vogella.android.activityanimationwithsharedviews را در بالای فایل پروژه (به عنوان top level package) درج نمایید.

دو activity با دو فایل layout متفاوت تعریف نمایید که هر دو دربردارنده ی یک المان ImageView بوده و خاصیت (property) android:transitionName را داشته باشند.

activity_main.xml



activity_second.xml

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

package com.vogella.android.activityanimationwithsharedviews;
import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
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 sharedImage = (ImageView) findViewById(R.id.sharedimage);
        sharedImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //This is where the magic happens.
                    // makeSceneTransitionAnimation takes a context, view,
                    // a name for the target view.
                ActivityOptions options =
                                ActivityOptions.
                                makeSceneTransitionAnimation(MainActivity.this, sharedImage, "sharedImage");
                Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                startActivity(intent, options.toBundle());
            }
        });
    }
}
package com.vogella.android.activityanimationwithsharedviews;
import android.app.Activity;
import android.os.Bundle;
public class SecondActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
    }
}

پس از اجرای اپلیکیشن و کلیک بر روی المان image view، می بینید که المان مزبور با انیمیشن به view ای که خاصیت android:transitionName را دارد (کنترل دکمه) منتقل می شود.