הוספת תמיכה באנימציות אחורה בזמן

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

סרטון 1: אנימציות של חיזוי החזרה

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

בסרטון מוצגת דוגמה קצרה לאנימציות של חיזוי תנועת החזרה בין פעילויות שונות וחזרה למסך הבית באמצעות אפליקציית ההגדרות של Android.

  1. באנימציה רואים את המשתמש מחליק חזרה כדי לחזור למסך ההגדרות הקודם – דוגמה לאנימציה חוצת-פעילות.
  2. עכשיו, במסך הקודם, המשתמש מתחיל להחליק חזרה בפעם השנייה, ומוצגת תצוגה מקדימה של מסך הבית עם הטפט שלו – דוגמה לאנימציה של חזרה למסך הבית.
  3. המשתמש ממשיך להחליק ימינה, ומוצגת אנימציה של חלון שמתכווץ לסמל במסך הבית.
  4. המשתמש חזר עכשיו למסך הבית.

איך מוסיפים תמיכה במחוות חזרה עם אנימציה מקדימה

הוספה של אנימציות ומעברים מותאמים אישית באפליקציה

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

הוספת מעברים בהתאמה אישית ב-Jetpack Compose

אפשר להשתמש ב-PredictiveBackHandler כדי לטפל במחוות חזרה חזויות ב-Jetpack Compose וליצור מעברים מותאמים אישית בתוך האפליקציה. התכונה הזו זמינה בגרסה androidx.activity:activity-compose:1.8.0-alpha01 ומעלה.

‫PredictiveBackHandler מספקת קריאה חוזרת (callback) מסוג lambda שחושפת את Flow<BackEventCompat> שפולטת אירועים כשהמשתמש מחליק חזרה מהקצה. האירועים האלה מספקים מידע על מיקום המגע של המשתמש, על קצה ההחלקה ועל progress, וזה הכי חשוב. אפשר להשתמש במידע הזה כדי להנפיש רכיבים כחלק מהטיפול בתנועת החזרה.

בקטע הקוד הבא מוצגת דוגמה לשימוש ב-PredictiveBackHandler כדי להנפיש את Surface כך שהוא יקטן ויתרחק באמצעות התקדמות המחווה:

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture.
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture.
            // Animate scale and xOffset back to 1f and 0f respectively.
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset { IntOffset(x = xOffset.dp.roundToPx(), y = 0) },
            color = Color.Blue
        ) {}
    }
}