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

روش نوشتن را امتحان کنید

Jetpack Compose ابزار رابط کاربری پیشنهادی برای اندروید است. یاد بگیرید که چگونه با انیمیشن‌ها در Compose کار کنید.

متحرک‌سازی بین انواع مختلف محتوا در Compose →

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

شکل ۱. یک گذار با عناصر مشترک.

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

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

• explode : نماها را از مرکز صحنه به داخل یا خارج حرکت می‌دهد.
• slide : نماها را از یکی از لبه‌های صحنه به داخل یا خارج حرکت می‌دهد.
• fade : با تغییر میزان شفافیت (opacity) یک نما (view) را به صحنه اضافه یا حذف می‌کند.

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

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

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

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

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

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

نسخه سیستم را بررسی کنید

APIهای انتقال فعالیت در اندروید ۵.۰ (API 21) و بالاتر در دسترس هستند. برای حفظ سازگاری با نسخه‌های قبلی اندروید، قبل از فراخوانی APIها برای هر یک از این ویژگی‌ها، 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
}

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

ابتدا، هنگام تعریف استایلی که از تم متریال ارث‌بری می‌کند، با استفاده از ویژگی 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 است. برای اطلاعات بیشتر، به مرجع API برای 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 فراخوانی کنید:

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

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

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

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

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

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

کاتلین

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

جاوا

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

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

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

نکته: برای اطلاعات بیشتر در مورد انتقال بین کامپوننت‌های با محتوای ثابت، به بخش انتقال عناصر مشترک در Compose مراجعه کنید.

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

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.finish() ، تابع Activity.finishAfterTransition() را فراخوانی کنید.

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

برای ایجاد انیمیشن انتقال صحنه بین دو فعالیتی که بیش از یک عنصر مشترک دارند، عناصر مشترک را در هر دو طرح‌بندی با ویژگی 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"));