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

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

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

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

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

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

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

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

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

הוספת מעברים בהתאמה אישית ב-Jetpack פיתוח נייטיב

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

‫PredictiveBackHandler מספק פונקציית 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(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}