כשמשתמשים בממשקי ה-API של המערכת, אפשר להביע הסכמה לקבלת אנימציות באפליקציה תמיכה במעברים מותאמים אישית.
לאחר הבעת ההסכמה, האפליקציה תציג אנימציות של החזרה הביתה, פעילות צולבת, ובין משימות שונות.
ניתן גם לשדרג את התלות של רכיבי החומר המילוליים לגרסה 1.10.0 של MDC Android לקבלת אנימציות של רכיבים מהותיים כמו:
אפשר לעיין בהנחיות למפתחים של רכיבי חומר ב-GitHub כדי לראות מידע נוסף.
הסרטון מציג דוגמה קצרה לאנימציות אחורה של 'חזרה' פעילות שונות וחזרה הביתה באמצעות האפליקציה 'הגדרות' של Android.
- באנימציה, המשתמש מחליק בחזרה כדי לחזור להגדרות הקודמות המסך - דוגמה לאנימציה של פעילות צולבת.
- עכשיו במסך הקודם, המשתמש מתחיל להחליק אחורה פעם שנייה. הצגת תצוגה מקדימה של מסך הבית עם הטפט שלו - דוגמה את האנימציה של החזרה לבית.
- המשתמש ממשיך להחליק ימינה ומוצג אנימציה של החלון מתכווץ לסמל במסך הבית.
- המשתמש חזר במלואו למסך הבית.
מידע נוסף על הוספת תמיכה בתנועות חזרה חזויות
הוספה של מעברים ואנימציות בהתאמה אישית בתוך האפליקציה
אפשר ליצור אנימציות ומעברים מותאמים אישית של נכס מתוך האפליקציה, אנימציות של פעילויות צולבות ואנימציות מותאמות אישית המבוססות על מקטעים שונים עם חיזוי ותנועות חזרה.
הוספת מעברים בהתאמה אישית באמצעות Progress API
עם פעילות AndroidX מגרסה 1.8.0-alpha01 ואילך, ניתן להשתמש במנגנון החיזוי
התקדמות ממשקי API לפיתוח אנימציות מותאמות אישית
תנועת החזרה החזויה באפליקציה. ממשקי API להתקדמות עוזרים באנימציה
אך יש לו מגבלות בהנפשה של מעברים בין מקטעים. בטווח של
OnBackPressedCallback
השקנו
handleOnBackProgressed
,
handleOnBackCancelled
וגם
handleOnBackStarted
שיטות להנפשה של אובייקטים בזמן שהמשתמש מחליק בחזרה. יש להשתמש בשיטות האלה אם
צריכים להתאים אישית יותר מאנימציות ברירת המחדל שסופקו על ידי המערכת, או
את האנימציות של רכיבי החומרה.
אנחנו מצפים שרוב האפליקציות ישתמשו בממשקי API של AndroidX בתאימות לאחור, אבל יש
גם ממשקי API של פלטפורמות דומות
OnBackAnimationCallback
ממשק זמין לבדיקה ב-Android 14 Developer Preview גרסה 1 ואילך.
שימוש בממשקי Progress API עם מעברים של AndroidX
ניתן להשתמש בממשקי Progress API עם AndroidX Transits מגרסה 1.5.0-alpha01 ואילך ב-Android מגרסה 14 ואילך כדי ליצור העברות חזויות חזרה.
- במקום להשתמש ב-
TransitionManager#controlDelayedTransition
beginDelayedTransition
למשחק המעברים בתור המשתמש מחליק בחזרה. - יוצרים את המעבר בתוך
handleOnBackStarted
. - מפעילים את המעבר עם אירוע 'הקודם' שמתקיים בתוך
handleOnBackProgressed
עד בקשר ל-currentFraction
אלBackEvent.progress
, שחושף את המרחק המשתמש החליף בחזרה. - סיום המעבר אחרי שהמשתמש ביצע את תנועת החזרה בתוך
handleOnBackPressed
- לסיום, צריך לאפס את מצב המעבר בתוך
handleOnBackCancelled
.
הסרטון הבא, קוד Kotlin ו-XML מדגימים מעבר מותאם אישית
בין שתי תיבות שהוטמעו באמצעות OnBackPressedCallback
:
class MyFragment : Fragment() { val transitionSet = TransitionSet().apply { addTransition(Fade(Fade.MODE_OUT)) addTransition(ChangeBounds()) addTransition(Fade(Fade.MODE_IN)) } ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) val callback = object : OnBackPressedCallback(enabled = false) { var controller: TransitionSeekController? = null @RequiresApi(34) override fun handleOnBackStarted(backEvent: BackEvent) { // Create the transition controller = TransitionManager.controlDelayedTransition( binding.card, transitionSet ) changeTextVisibility(ShowText.SHORT) } @RequiresApi(34) override fun handleOnBackProgressed(backEvent: BackEvent) { // Play the transition as the user swipes back if (controller?.isReady == true) { controller?.currentFraction = backEvent.progress } } override fun handleOnBackPressed() { // Finish playing the transition when the user commits back controller?.animateToEnd() this.isEnabled = false } @RequiresApi(34) override fun handleOnBackCancelled() { // If the user cancels the back gesture, reset the state transition(ShowText.LONG) } } binding.shortText.setOnClickListener { transition(ShowText.LONG) callback.isEnabled = true } this.requireActivity().onBackPressedDispatcher.addCallback(callback) } private fun transition(showText: ShowText) { TransitionManager.beginDelayedTransition( binding.card, transitionSet ) changeTextVisibility(showText) } enum class ShowText { SHORT, LONG } private fun changeTextVisibility(showText: ShowText) { when (showText) { ShowText.SHORT -> { binding.shortText.isVisible = true binding.longText.isVisible = false } ShowText.LONG -> { binding.shortText.isVisible = false binding.longText.isVisible = true } } } }
<?xml version="1.0" encoding="utf-8"?>
...
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...>
<TextView
android:id="@+id/short_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
... />
<TextView
android:id="@+id/long_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
.../>
</androidx.constraintlayout.widget.ConstraintLayout>
כשעובדים עם העברות חזויות חזרה, חשוב לזכור את הדברים הבאים:
- צריך להשתמש בפונקציה
isSeekingSupported
כדי לבדוק אם המעבר תומך ב'חזרה חזויה'. - כדי להחזיר את הערך True להעברות בהתאמה אישית צריך לשנות את
isSeekingSupported
. - יצירת בקר אחד לכל אנימציה.
- מעברי חזרה חזויים נתמכים עם מעברים מ-AndroidX, אבל לא במסגרת מעברים בין מסגרות. מומלץ לבצע מיגרציה מ-framework מעברים שונים.
- העברות חזויות חזרה נתמכות במכשירים עם Android 14 ועם גרסת Android 14 גבוהים יותר ואינם תואמים לאחור.
- יש תמיכה גם במעברים שנוצרו באמצעות סצנות XML. לחשבון
handleOnBackStarted
, הגדרתTransitionSeekController
כתוצאה שלTransitionManager.createSeekController
במקום התוצאה שלcontrolDelayedTransition
.
הוספת מעברים בין פעילויות בהתאמה אישית ב-Android 14 ואילך
כדי לוודא שמעברים בין פעילויות בהתאמה אישית תומכים בהצגה חזויה ב-Android 14
ומעלה, אתם יכולים להשתמש ב-overrideActivityTransition
overridePendingTransition
כלומר אנימציית המעבר תפעל
המשתמש מחליק בחזרה.
כדי להמחיש איך זה יכול לקרות, נבחן תרחיש שבו פעילות ב' נמצאת מעל פעילות א' במקבץ האחורי. צריך לטפל בהתאמה אישית את האנימציות של הפעילות באופן הבא:
- קריאה לפתיחה או לסגירה של מעברים בתוך
onCreate
של פעילות ב' . - כשהמשתמש מנווט לפעילות ב', יש להשתמש ב-
OVERRIDE_TRANSITION_OPEN
. מתי המשתמש מחליק כדי לחזור לפעילות א', השתמשוOVERRIDE_TRANSITION_CLOSE
כשמציינים את הערך
OVERRIDE_TRANSITION_CLOSE
, הערךenterAnim
הוא הערך של פעילות א' כניסה לאנימציה, והexitAnim
הוא אנימציית היציאה של פעילות ב'.
הוספת תמיכה עבור 'הקודם חזוי' עם מקטעים
במהלך יישום חיזוי חזרה עם מקטעים, יש שתי גישות.
שימוש בממשקי API קיימים
מומלץ להשתמש בממשקי API קיימים. ממשקי ה-API האלה מאפשרים לכם להחליק קצה המסך כדי להשפיע על המעברים של האנימציה או של Androidx עם תנועה. אם תזיזו את התנועה מעבר לסף מסוים, היא תקבע אם כשתחזרו למקטע הקודם, או שהוא יבוטל נשארים במקטע הנוכחי. מידע נוסף זמין במאמר הבא: לנווט בין מקטעים באמצעות אנימציות.
חשוב לזכור:
- יבא מעברים 1.5.0 או מאוחר יותר ו-Fragments 1.7.0 או מאוחר יותר. חלק גדול מהתמיכה החזויה ב-Fragments מבוסס על יש מעברים שיכולים לחפש אנימציות, וזה אפשרי רק מעברים מגרסה 1.5.0 ואילך.
- משתמשים ב-Fragments עם
FragmentManager
או עם רכיב ניווט, כדי לטפל במקבץ האחורי. חזוי אין תמיכה ב'הקודם' אם אתם מנהלים מקבץ חזרה משלכם. - ספריות מסוימות כוללות תמיכה חזויה לחזרה. עליך לבדוק את התיעוד כדי בטח.
- הכיתה
Animator
וגםAndroidX Transition
ספריות נתמך. - אין תמיכה במחלקה
Animation
ובספרייהTransition
של ה-framework. - אנימציות חזויות פועלות רק במכשירים עם Android מגרסה 14 ואילך.
כדאי להשתמש במקטעים חוזרים של חיזוי (prediction) במצבים הבאים:
- הוספת אנימציה לרכיב הניווט.
- יצירת אנימציה עם
setCustomAnimations
. - הוספת אנימציה של מעברי כניסה ויציאה באמצעות
setEnterTransition
,setExitTransition
,setReenterTransition
וsetReturnTransition
. - הצג אנימציה של מעברים בין רכיבים משותפים עם
setSharedElementEnterTransition
וגםsetSharedElementReturnTransition
חלק מתנועות החומר
תמיכה בחיזוי החל מ-
1.12.02-alpha02
ומעלה, כולל MaterialFadeThrough
, MaterialSharedAxis
MaterialFade
. הערה: MaterialContainerTransform
לא תומך בחיזויים
בחזרה.
שימוש בקריאות חוזרות (callbacks)
אפשר ליצור מעבר בין קטעים באמצעות קריאות חוזרות, אבל יש מגבלה ידועה בעת שימוש בקריאות חוזרות (callbacks), שבהן המשתמשים לא יכולים לראות את מקטע בעת החלקה אחורה. כדי ליצור מעבר של רכיב משותף בין מקטעים שתואם להגדרה החזויה הנחיות התכנון, הבאים:
יוצרים OnBackPressedCallback
. בתוך handleOnBackProgressed
, התאמה לעומס (scaling)
להזיז את המקטע. ואז קופץ מהמקבץ האחורי. לאחר מכן, נריץ את הרכיב המשותף
מעבר באמצעות setSharedElementReturnTransition
מחוץ לקריאה החוזרת (callback).
מידע נוסף זמין בקטע דוגמת הקוד ב-GitHub.
הדרישות
תוכלו להיעזר בטבלאות הבאות כדי להבין מה נקבע על ידי האפשרויות למפתחים:
targetSdkVersion
ו-compileSdkVersion
, גרסת המכשיר, יחסי תלות,
דגלים במניפסט ודגלי מקטעים. הטבלה הראשונה מתייחסת לדרישות הקוד.
קטגוריה | אנימציה | compileSdk | targetSdk | android:enableOnBackInvokedCallback | תלות |
---|---|---|---|---|---|
אנימציות מערכת | חזרה הביתה | 33 | כל צבע | TRUE | ללא |
פעילות צולבת | 34 | כל צבע | TRUE | ללא | |
ביצוע משימות שונות | 34 | כל צבע | TRUE | ללא | |
פלטפורמה | התאמה אישית של הפעילות הגופנית | 34 | כל צבע | TRUE | ללא |
פלטפורמת Progress API | 34 | כל צבע | TRUE | ללא | |
רכיבי החומר | גיליון תחתון | 34 | כל צבע | TRUE | רכיב חומר 1.10.0 |
גיליון צדדי | 34 | כל צבע | TRUE | רכיב חומר 1.10.0 | |
חלונית הזזה לניווט | 34 | כל צבע | TRUE | רכיב חומר 1.10.0 | |
חיפוש | 34 | כל צבע | TRUE | רכיב חומר 1.10.0 | |
אנימציה ב-Jetpack | מעבר בין מקטעים של AndroidX בהתאמה אישית | 34 | כל צבע | TRUE | מקטע AndroidX 1.7 |
מעברים בהתאמה אישית ל-AndroidX | 34 | כל צבע | TRUE | מעבר עם AndroidX 1.5 | |
Jetpack ב-Progress API | 34 | כל צבע | TRUE | פעילות AndroidX גרסה 1.8 |
הטבלה הבאה מתייחסת לדרישות שמאפשרות למשתמשים לראות אנימציות.
קטגוריה | אנימציה | האפשרות למפתחים הופעלה | גרסת המכשיר |
---|---|---|---|
אנימציות מערכת | חזרה הביתה | TRUE | 33 |
פעילות צולבת | TRUE | 34 | |
ביצוע משימות שונות | TRUE | 34 | |
פלטפורמה | התאמה אישית של הפעילות הגופנית | TRUE | 34 |
פלטפורמת Progress API | לא נכון | 34 | |
רכיבי החומר | גיליון תחתון | לא נכון | 34 |
גיליון צדדי | לא נכון | 34 | |
חלונית הזזה לניווט | לא נכון | 34 | |
חיפוש | לא נכון | 34 | |
אנימציה ב-Jetpack | מעבר בין מקטעים של AndroidX בהתאמה אישית | לא נכון | 34 |
מעברים בהתאמה אישית ל-AndroidX | לא נכון | 34 | |
Jetpack ב-Progress API | לא נכון | 34 |