Predictive back transition Animation on Android 14

Android 14’s predictive back gesture

千北 一期 / chigichan24 / LINE株式会社 / メッセンジャープロダクトアプリ開発2チーム

※この資料は以下イベントで発表した内容です。
https://line.connpass.com/event/284045/

Transcript

1. 1SFEJDUJWFCBDL
   USBOTJUJPO"OJNBUJPO
   PO"OESPJE
   ,B[VLJ $IJHJUB -*/&$PSQPSBUJPO
   (PPHMF*03FDBQ
   

   View Slide

2. 8IBUJTBQSFEJDUJWFCBDL
   )PXBEESFTTGPSUIFGFBUVSF
   6QEBUFPO"OESPJE "1*MFWFM
   
   %&.0 "OJNBUJPO
   
   *NQMFNFOUBUJPOFYBNQMF
   $PODMVTJPO
   
   
   
   
   
   
   $POUFOUT
   

   View Slide

3. 8IBUJTBQSFEJDUJWFCBDL
   )PXBEESFTTGPSUIFGFBUVSF
   6QEBUFPO"OESPJE "1*MFWFM
   
   %&.0 "OJNBUJPO
   
   *NQMFNFOUBUJPOFYBNQMF
   $PODMVTJPO
   
   
   
   
   
   
   $POUFOUT
   

   View Slide

4. *DFCSFBL
   )PXJTUIFQSPHSFTTPGSFQMBDJOH
   EFQSFDBUFEPO#BDL1SFTTFE
   BQJ VTBHF
   0OHPJOH
   6OEFSSFQMBDJOHUP
   OFXBQJ
   6OEFS
   $POTJEFSBUJPO
   PO#BDLQSFTFE JTTUJMM
   VTFE
   'JOJTIFE
   "MMVTBHFPGCBDL
   IBOEMJOHMPHJDJT
   SFQMBDFEUPOFXBQJ
   👀 😀
   😂
   

   View Slide

5. 1SFEJDUJWFCBDL
   SFRVJSFT
   SFQMBDJOHUP
   OFX"1*🐣
   

   View Slide

6. #BTJDJOUSPEVDUJPOPGUIJTGFBUVSF
   8IBUJTBQSFEJDUJWFCBDL
   50#&
   "4*4
   

   View Slide

7. #BTJDJOUSPEVDUJPOPGUIJTGFBUVSF
   8IBUJTBQSFEJDUJWFCBDL
   "QQDBOEJTQMBZDSPTTBDUJWJUZ BOECBDLUPIPNF BOJNBUJPO
   JU`TVOEFSEFWFMPQFSPQUJPOT 1SFEJDUJWFCBDLBOJNBUJPOT
   
   $BOBQQMZDVTUPNBOJNBUJPOBOE PS
   VTF.BUFSJBMDPNQPOFOU
   

   View Slide

8. 8IBUJTBQSFEJDUJWFCBDL
   )PXBEESFTTGPSUIFGFBUVSF
   6QEBUFPO"OESPJE "1*MFWFM
   
   %&.0 "OJNBUJPO
   
   *NQMFNFOUBUJPOFYBNQMF
   $PODMVTJPO
   
   
   
   
   
   
   $POUFOUT
   

   View Slide

9. )PXBEESFTTGPSUIFGFBUVSF
   &OBCMFAandroid:enableOnBackInbokedCallback=“true”APO"OESPJE.BOJGFTU
   "1*-FWFM "1*-FWFMd
   *U`TBWBJMBCMFPOMZGPSUIFFOUJSF
   BQQMJDBUJPO
   *U`TBWBJMBCMFGPSQFS"DUJWJUZ
   We can proceed gradual migration.
   

   View Slide

10. )PXBEESFTTGPSUIFGFBUVSF
    "4*4
    

    View Slide

11. )PXBEESFTTGPSUIFGFBUVSF
    50#&
    

    View Slide

12. 8IBUJTBQSFEJDUJWFCBDL
    )PXBEESFTTGPSUIFGFBUVSF
    6QEBUFPO"OESPJE "1*MFWFM
    
    %&.0 "OJNBUJPO
    
    *NQMFNFOUBUJPOFYBNQMF
    $PODMVTJPO
    
    
    
    
    
    
    $POUFOUT
    

    View Slide

13. 6QEBUFPO"OESPJE
    8FDBOTFUBOESPJEFOBCMF0O#BDL*OWPLFE$BMMCBDLUSVFUPQFSBDUJWJUZ
    #PUUPN4IFFUT 4JEF4IFFUTBOE4FBSDI.DPNQPOFOUTDBOEPBOJNBUJPO
    /FX"1*UPTVQQPSUDVTUPNJOBQQUSBOTJUJPOBOJNBUJPOT
    

    View Slide

14. 6QEBUFPO"OESPJE
    4FWFSBM.DPNQPOFOUTDBOEPBOJNBUJPOPOQSFEJDUJWFCBDL
    IUUQTNNBUFSJBMJPDPNQPOFOUTCPUUPNTIFFUTHVJEFMJOFT
    IUUQTNNBUFSJBMJPDPNQPOFOUTTJEFTIFFUTHVJEFMJOFT
    

    View Slide

15. 6QEBUFPO"OESPJE
    "1*UPTVQQPSUDVTUPNJOBQQUSBOTJUJPOBOJNBUJPOT
    %FGBVMUBDUJWJUZBDUJWJUZUSBOTJUJPO
    

    View Slide

16. 6QEBUFPO"OESPJE
    "1*UPTVQQPSUDVTUPNJOBQQUSBOTJUJPOBOJNBUJPOT
    'PS$VTUPNUSBOTJUJPO
    

    View Slide

17. 8IBUJTBQSFEJDUJWFCBDL
    )PXBEESFTTGPSUIFGFBUVSF
    6QEBUFPO"OESPJE "1*MFWFM
    
    %&.0 "OJNBUJPO
    
    *NQMFNFOUBUJPOFYBNQMF
    $PODMVTJPO
    
    
    
    
    
    
    $POUFOUT
    

    View Slide

18. *NQMFNFOUBUJPOFYBNQMF
    &OBCMFFOBCMF0O#BDL*OWPLFE$BMMCBDLzUSVFzGPSBDUJWJUZ
    "EEDBMMCBDL
    PQUJPOBM
    )BOEMFQSPHSFTTPGPO#BDL1SFTT
    

    View Slide

19. *NQMFNFOUBUJPOFYBNQMF
    &OBCMFFOBCMF0O#BDL*OWPLFE$BMMCBDLzUSVFzGPSBDUJWJUZ
    "EEDBMMCBDL
    PQUJPOBM
    )BOEMFQSPHSFTTPGPO#BDL1SFTT
    

    View Slide

20. 6QEBUFPO"OESPJE
    "EE$BMMCBDL
    

    View Slide

21. 6QEBUFPO"OESPJE
    "EE$BMMCBDL "EEFEPO
    BOESPJEYBDUJWJUZBMQIB
    

    View Slide

22. *NQMFNFOUBUJPOFYBNQMF
    %FTJHOHVJEFGPSQSFEJDUJWFCBDL
    IUUQTEFWFMPQFSBOESPJEDPNEFTJHOVJNPCJMFHVJEFTQBUUFSOTQSFEJDUJWFCBDL
    

    View Slide

23. *NQMFNFOUBUJPOFYBNQMF
    .PSFJOGPSNBUJPO8BUDIUIFTFTTJPOPO(PPHMF*0
    IUUQTXXXZPVUVCFDPNXBUDI W&MQRSYQ-Y2
    

    View Slide

24. 8IBUJTBQSFEJDUJWFCBDL
    )PXBEESFTTGPSUIFGFBUVSF
    6QEBUFPO"OESPJE "1*MFWFM
    
    %&.0 "OJNBUJPO
    
    *NQMFNFOUBUJPOFYBNQMF
    $PODMVTJPO
    
    
    
    
    
    
    $POUFOUT
    

    View Slide

25. $PODMVTJPO
    1SFEJDUJWFCBDLXJMMFOBCMFBTEFGBVMUOFBSGVUVSF
    "QQMZQSFEJDUJWFCBDLQFS"DUJWJUZ
    /PUPOMZ.WJFXBMTPDVTUPNBOJNBUJPOGPSWJFXJTBWBJMBCMF
    5IBOLZPV
    

    View Slide

26. "QY3FGFSFODFT
    • IUUQTEFWFMPQFSBOESPJEDPNBCPVUWFSTJPOTGFBUVSFTQSFEJDUJWFCBDL
    • IUUQTXXXZPVUVCFDPNXBUDI W&MQRSYQ-Y2
    • IUUQTNNBUFSJBMJP
    • IUUQTEFWFMPQFSBOESPJEDPNEFTJHOVJNPCJMFHVJEFTQBUUFSOTQSFEJDUJWFCBDL
    • IUUQTHJUIVCDPNNBUFSJBMDPNQPOFOUTNBUFSJBMDPNQPOFOUT
    BOESPJECMPCNBTUFSEPDTGPVOEBUJPOT1SFEJDUJWF#BDLNE
    • IUUQTBOESPJEEFWFMPQFSTHPPHMFCMPHDPNBOESPJECFUBIUNM
    • IUUQTEFWFMPQFSBOESPJEDPNSFGFSFODFBOESPJEBQQ"DUJWJUZPO#BDL1SFTTFE
    
    

    View Slide