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

امتحان کردن روش Compose
Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه کار با پویانمایی‌ها در Compose آشنا شوید.
پویانمایی بین انواع مختلف محتوا در Compose →

انتقال‌های فعالیت در برنامه‌های Material Design اتصالات بصری بین حالت‌های مختلف را ازطریق حرکت و تبدیل بین عناصر مشترک فراهم می‌کنند. می‌توانید پویانمایی‌های سفارشی برای انتقال‌های ورود و خروج و برای انتقال‌های عناصر مشترک بین فعالیت‌ها مشخص کنید.

شکل ۱. انتقال با عناصر مشترک.

  • گذار ورود تعیین می‌کند که نماها در یک فعالیت چگونه وارد صحنه شوند. برای مثال، در انتقال ورودی explode، نماها از بیرون وارد صحنه می‌شوند و به‌سمت مرکز صفحه پرواز می‌کنند.
  • گذار خروج تعیین می‌کند که نماها در یک فعالیت چگونه از صحنه خارج شوند. برای مثال، در انتقال خروج explode، نماها از صحنه دور از مرکز خارج می‌شوند.
  • گذار عناصر مشترک تعیین می‌کند که نماهای مشترک بین دو فعالیت چگونه بین این فعالیت‌ها گذار کنند. برای مثال، اگر دو فعالیت تصویر یکسانی در موقعیت‌ها و اندازه‌های مختلف داشته باشند، انتقال عنصر مشترک changeImageTransform تصویر را به‌طور هموار بین این فعالیت‌ها ترجمه و مقیاس‌بندی می‌کند.

Android از این انتقال‌های ورود و خروج پشتیبانی می‌کند:

  • explode: نماها را به سمت مرکز صحنه یا از مرکز صحنه به بیرون حرکت می‌دهد.
  • slide: نماها را از یکی از لبه‌های صحنه به داخل یا خارج حرکت می‌دهد.
  • fade: با تغییر دادن میزان ماتی، نمایی را به صحنه اضافه می‌کند یا از آن برمی‌دارد.

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

Android از این انتقال‌های عناصر مشترک نیز پشتیبانی می‌کند:

  • changeBounds: تغییرات در مرزهای چیدمان نماهای هدف را پویانمایی می‌کند.
  • ‫changeClipBounds: تغییرات در مرزهای کلیپ نماهای هدف را پویانمایی می‌کند.
  • ‫changeTransform: تغییرات در مقیاس و چرخش نماهای هدف را پویانمایی می‌کند.
  • changeImageTransform: تغییرات اندازه و مقیاس تصاویر هدف را پویانمایی می‌کند.

وقتی انتقال‌های فعالیت را در برنامه‌تان فعال می‌کنید، انتقال محو تدریجی متقاطع پیش‌فرض بین فعالیت‌های ورودی و خروجی فعال می‌شود.

شکل ۲. انتقال صحنه با یک عنصر مشترک.

برای کد نمونه‌ای که بین فعالیت‌ها بااستفاده از عناصر هم‌رسانی‌شده پویانمایی ایجاد می‌کند، ActivitySceneTransitionBasic را ببینید.

بررسی نسخه سیستم

میاناهای برنامه‌سازی کاربردی انتقال فعالیت در Android نسخه ۵.۰ (میانای برنامه‌سازی کاربردی ۲۱) و بالاتر دردسترس است. برای حفظ سازگاری با نسخه‌های قبلی Android، پیش‌از فراخوانی میاناهای برنامه‌سازی کاربردی برای هرکدام از این ویژگی‌ها، version سیستم را در زمان اجرا بررسی کنید:

کاتلین

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

جاوا

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

مشخص کردن انتقال‌های سفارشی

ابتدا، هنگام تعریف سبکی که از زمینه Material ارث‌بری می‌کند، انتقال‌های محتوای پنجره را با مشخصه android:windowActivityTransitions فعال کنید. همچنین می‌توانید انتقال‌های ورود، خروج، و عنصر مشترک را در تعریف سبک خود مشخص کنید:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

گذار change_image_transform در این مثال به‌صورت زیر تعریف شده است:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

عنصر changeImageTransform با کلاس ChangeImageTransform مطابقت دارد. برای اطلاعات بیشتر، مرجع میانای برنامه‌سازی کاربردی برای Transition را ببینید.

برای فعال کردن انتقال محتوای پنجره در کدتان، تابع Window.requestFeature() را فراخوانی کنید:

کاتلین

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

جاوا

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

برای مشخص کردن انتقال‌ها در کدتان، این توابع را با یک شیء Transition فراخوانی کنید:

تابع‌های setExitTransition() و setSharedElementExitTransition() انتقال خروج را برای فعالیت فراخوانی تعریف می‌کنند. تابع‌های setEnterTransition() و setSharedElementEnterTransition() انتقال ورودی را برای فعالیت فراخوانده‌شده تعریف می‌کنند.

برای دریافت تأثیر کامل انتقال، باید انتقال‌های محتوای پنجره را در هر دو فعالیت فراخواننده و فراخوانده‌شده فعال کنید. درغیراین‌صورت، فعالیت فراخواننده انتقال خروج را شروع می‌کند، اما سپس انتقال‌های پنجره (مانند مقیاس یا محو شدن) را می‌بینید.

برای شروع انتقال ورودی در اسرع وقت، از تابع Window.setAllowEnterTransitionOverlap() در فعالیت فراخوانده‌شده استفاده کنید. این کار به شما امکان می‌دهد گذارهای ورود دراماتیک‌تری داشته باشید.

شروع فعالیت بااستفاده از انتقال‌ها

اگر انتقال‌ها را فعال کنید و انتقال خروج را برای فعالیتی تنظیم کنید، انتقال هنگام راه‌اندازی فعالیت دیگری به‌صورت زیر فعال می‌شود:

کاتلین

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

جاوا

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

اگر گذار ورودی برای فعالیت دوم تنظیم کنید، آن گذار نیز هنگام شروع فعالیت فعال می‌شود. برای غیرفعال کردن انتقال‌ها هنگام شروع فعالیت دیگر، یک بسته گزینه‌های null ارائه دهید.

شروع فعالیت با عنصر مشترک

برای ایجاد پویانمایی انتقال صفحه بین دو فعالیت که دارای عنصر مشترک هستند، موارد زیر را انجام دهید:

  1. انتقال‌های محتوای پنجره را در زمینه‌تان فعال کنید.
  2. یک انتقال عناصر مشترک را در سبک خود مشخص کنید.
  3. انتقال را به‌عنوان منبع XML تعریف کنید.
  4. بااستفاده از مشخصه android:transitionName، نام مشترکی به عناصر هم‌رسانی‌شده در هر دو چیدمان اختصاص دهید.
  5. از تابع ActivityOptions.makeSceneTransitionAnimation() استفاده کنید.

کاتلین

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

جاوا

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

برای نماهای پویای مشترکی که در کدتان تولید می‌کنید، از تابع View.setTransitionName() برای مشخص کردن نام عنصر مشترک در هر دو فعالیت استفاده کنید.

برای معکوس کردن پویانمایی انتقال صحنه هنگام اتمام فعالیت دوم، تابع Activity.finishAfterTransition() را به‌جای Activity.finish() فراخوانی کنید.

شروع فعالیت با چند عنصر هم‌رسانی‌شده

برای ایجاد پویانمایی انتقال صحنه بین دو فعالیت که بیش‌از یک عنصر مشترک دارند، عناصر مشترک را در هر دو چیدمان با مشخصه android:transitionName تعریف کنید—یا از تابع View.setTransitionName() در هر دو فعالیت استفاده کنید—و یک شیء ActivityOptions به‌صورت زیر ایجاد کنید:

کاتلین

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

جاوا

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));