התחלת פעילות באמצעות אנימציה

כדאי לנסות את התכונה 'כתיבה מהירה'

Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. איך עובדים עם אנימציות ב-Compose

אנימציה בין סוגים שונים של תוכן בחלונית הכתיבה →

מעברים בין פעילויות באפליקציות עם עיצוב Material מספקים קישורים חזותיים בין מצבים שונים באמצעות תנועה וטרנספורמציות בין רכיבים משותפים. אפשר לציין אנימציות בהתאמה אישית למעברים של כניסה ויציאה, ולמעברים של רכיבים משותפים בין פעילויות.

איור 1. מעבר עם רכיבים משותפים.

• המעבר enter קובע איך התצוגות של הפעילות נכנסות לזירת הווידאו. לדוגמה, במעבר explode, התצוגות נכנסות לסצנה מבחוץ ומתעופפות פנימה למרכז המסך.
• המעבר יציאה קובע איך התצוגות בפעילות יוצאות מהסצנה. לדוגמה, במעבר היציאה explode, התצוגות יוצאות מהסצנה הרחק מהמרכז.
• מעבר של רכיבים משותפים קובע איך תצוגות ששותפו בין שתי פעילויות עוברות בין הפעילויות האלה. לדוגמה, אם לשתי פעילויות יש את אותה תמונה במיקומים ובגדלים שונים, המעבר של הרכיב המשותף changeImageTransform יתרגם את התמונה וישנה את הגודל שלה בצורה חלקה בין הפעילויות האלה.

מערכת Android תומכת במעברים הבאים לכניסה וליציאה:

• explode: העברת התצוגה פנימה או החוצה ממרכז הסצנה.
• slide: העברת התצוגה פנימה או החוצה מאחד מהקצוות של הסצנה.
• fade: הוספה או הסרה של תצוגה מהסצנה על ידי שינוי השקיפות שלה.

כל מעבר שמרחיב את הכיתה Visibility נתמך כמעבר כניסה או יציאה. למידע נוסף, עיינו במסמכי העזרה של ה-API לגבי הכיתה Transition.

ב-Android יש תמיכה גם במעברים הבאים בין רכיבים משותפים:

• changeBounds: אנימציה של השינויים במגבלות הפריסה של תצוגות היעד.
• changeClipBounds: האנימציה של השינויים בגבולות הקליפ בתצוגות היעד.
• changeTransform: אנימציה של השינויים בקנה המידה ובסיבוב של תצוגות היעד.
• changeImageTransform: אנימציה של השינויים בגודל ובמידה של תמונות היעד.

כשמפעילים מעברים בין פעילויות באפליקציה, מעבר ההתמוססות שמוגדר כברירת מחדל מופעל בין הפעילויות 'כניסה' ו'יציאה'.

איור 2. מעבר בין סצנות עם רכיב משותף אחד.

לדוגמה של קוד עם אנימציה בין פעילויות באמצעות רכיבים משותפים, ראו ActivitySceneTransitionBasic.

בדיקת גרסת המערכת

ממשקי ה-API של מעברי הפעילות זמינים ב-Android בגרסה 5.0 (API 21) ואילך. כדי לשמור על תאימות לגרסאות קודמות של Android, צריך לבדוק את הערך של version בזמן הריצה לפני שמפעילים את ממשקי ה-API של כל אחת מהתכונות הבאות:

Kotlin

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

Java

// 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 כשמגדירים סגנון שעובר בירושה מעיצוב Material. אפשר גם לציין את מעברי הכניסה, היציאה והרכיבים המשותפים בהגדרת הסגנון:

<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():

Kotlin

// 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()
}

Java

// 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() מגדירות את המעבר להיכנסות לפעילות שנקראת.

כדי ליהנות מהאפקט המלא של המעבר, צריך להפעיל את המעבר של תוכן החלון גם בפעילות המפעילה וגם בפעילות שנקראת. אחרת, הפעילות של הקריאה תתחיל את המעבר ליציאה, אבל לאחר מכן יוצגו מעברי החלון – כמו שינוי קנה מידה או העלמה.

כדי להתחיל את המעבר לכניסה בהקדם האפשרי, צריך להשתמש בפונקציה Window.setAllowEnterTransitionOverlap() בפעילות שנקראת. כך תוכלו ליצור מעברים דינמיים יותר לכניסה.

התחלת פעילות באמצעות מעברים

אם מפעילים מעברים ומגדירים מעבר יציאה לפעילות, המעבר יופעל כשמפעילים פעילות אחרת, באופן הבא:

Kotlin

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

Java

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

אם מגדירים מעבר כניסה לפעילות השנייה, המעבר הזה מופעל גם כשהפעילות מתחילה. כדי להשבית את המעברים כשמתחילים פעילות אחרת, צריך לספק חבילת אפשרויות של null.

איך מתחילים פעילות עם רכיב משותף

הערה: מידע על מעבר בין רכיבים מורכבים עם תוכן עקבי זמין במאמר מעבר בין רכיבים משותפים ב-Compose.

כדי ליצור אנימציה של מעבר מסך בין שתי פעילויות שיש להן רכיב משותף:

1. מפעילים את מעברי התוכן בחלונות בעיצוב.
2. מציינים את המעבר בין הרכיבים המשותפים בסגנון.
3. מגדירים את המעבר כמשאב XML.
4. מקצים שם משותף לאלמנטים המשותפים בשני הפריסות באמצעות המאפיין android:transitionName.
5. משתמשים בפונקציה ActivityOptions.makeSceneTransitionAnimation().

Kotlin

// 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())
})

Java

// 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 באופן הבא:

Kotlin

// 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"))

Java

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