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

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

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

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

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

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

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

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

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

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

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

‫PredictiveBackHandler מספק פונקציית למבדה של קריאה חוזרת (callback) שחושפת את 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
        ) {}
    }
}