Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TechBash: Animating your way into Jetpack Compose

TechBash: Animating your way into Jetpack Compose

PRESENTED AT:
TechBash 2022

https://techbash.com/schedule

DATE:
November 9, 2022

DESCRIPTION:
Long gone are the days of having to implement inflexible animations along with their listeners and having to manage them in view lifecycles. By using Animation API from Jetpack Compose, to handle transitions/motion, and callbacks, you can now declaratively write concise maintainable animations for your apps. In this talk, you'll learn a variety of composable functions that can be applied to screens/views/custom shapes.

MORE TALKS & ARTICLES FROM ME: https://cupsofcode.com/talks/

Aida Issayeva

November 09, 2022
Tweet

More Decks by Aida Issayeva

Other Decks in Programming

Transcript

  1. ğăоŎáÝ¥ăņăÖăĘăŎŮ #&RPSRVDEOH IXQ$QLPDWHG9LVLELOLW\ YLVLEOH%RROHDQ PRGLILHU0RGLILHU 0RGLILHU HQWHU(QWHU7UDQVLWLRQ IDGH,Q H[SDQG,Q 

    H[LW([LW7UDQVLWLRQ VKULQN2XW IDGH2XW  ODEHO6WULQJ $QLPDWHG9LVLELOLW\  FRQWHQW#&RPSRVDEOH $QLPDWHG9LVLELOLW\6FRSH  !8QLW ^ YDOWUDQVLWLRQ XSGDWH7UDQVLWLRQ YLVLEOHODEHO $QLPDWHG(QWHU([LW,PSO WUDQVLWLRQ^LW`PRGLILHUHQWHUH[LWFRQWHQW ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  2. ğăоŎáÝ¥ăņăÖăĘăŎŮ #&RPSRVDEOH IXQ$QLPDWHG9LVLELOLW\ YLVLEOH%RROHDQ PRGLILHU0RGLILHU 0RGLILHU HQWHU(QWHU7UDQVLWLRQ IDGH,Q H[SDQG,Q 

    H[LW([LW7UDQVLWLRQ VKULQN2XW IDGH2XW  ODEHO6WULQJ $QLPDWHG9LVLELOLW\  FRQWHQW#&RPSRVDEOH $QLPDWHG9LVLELOLW\6FRSH !8QLW ^ YDOWUDQVLWLRQ XSGDWH7UDQVLWLRQ YLVLEOHODEHO $QLPDWHG(QWHU([LW,PSO WUDQVLWLRQ^LW`PRGLILHUHQWHUH[LWFRQWHQW ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  3. ğăоŎáÝ¥ăņăÖăĘăŎŮ YDUWR6KRZE\UHPHPEHU^ PXWDEOH6WDWH2I IDOVH ` &ROXPQ^ $QLPDWHG9LVLELOLW\ YLVLEOH WR6KRZ ^

    3ODQW&HOO ` %XWWRQ RQ&OLFN ^WR6KRZ WR6KRZ` ^ 7H[W WH[W &KHFNWKHIORZHU ` `
  4. łĦņņö¾Ýá #2SW,Q ([SHULPHQWDO$QLPDWLRQ$SL FODVV #&RPSRVDEOH IXQ7!&URVVIDGH WDUJHW6WDWH7 PRGLILHU0RGLILHU 0RGLILHU DQLPDWLRQ6SHF

    )LQLWH$QLPDWLRQ6SHF )ORDW! WZHHQ  FRQWHQW#&RPSRVDEOH 7 !8QLW ^ YDOWUDQVLWLRQ XSGDWH7UDQVLWLRQ WDUJHW6WDWH WUDQVLWLRQ&URVVIDGH PRGLILHUDQLPDWLRQ6SHF FRQWHQW FRQWHQW ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  5. łĦņņö¾Ýá #2SW,Q ([SHULPHQWDO$QLPDWLRQ$SL FODVV #&RPSRVDEOH IXQ7!&URVVIDGH WDUJHW6WDWH7 PRGLILHU0RGLILHU 0RGLILHU DQLPDWLRQ6SHF

    )LQLWH$QLPDWLRQ6SHF )ORDW! WZHHQ  FRQWHQW#&RPSRVDEOH 7 !8QLW ^ YDOWUDQVLWLRQ XSGDWH7UDQVLWLRQ WDUJHW6WDWH WUDQVLWLRQ&URVVIDGH PRGLILHUDQLPDWLRQ6SHF FRQWHQW FRQWHQW ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  6. łĦņņö¾Ýá YDUQXPEHUE\UHPHPEHU^ PXWDEOH6WDWH2I  ` &ROXPQ^ &URVVIDGH WDUJHW6WDWH QXPEHU ^QXP!

    3ODQWV QXPEHU QXP ` 5RZ^ %XWWRQ RQ&OLFN ^QXPEHU` ^` %XWWRQ RQ&OLFN ^QXPEHU` ^` ` `
  7. ğăоŎáÝĦğŎáğŎ #([SHULPHQWDO$QLPDWLRQ$SL #&RPSRVDEOH IXQ6!$QLPDWHG&RQWHQW WDUJHW6WDWH6 PRGLILHU0RGLILHU 0RGLILHU WUDQVLWLRQ6SHF $QLPDWHG&RQWHQW6FRSH 6!

    !&RQWHQW7UDQVIRUP ^  ` FRQWHQW$OLJQPHQW $OLJQPHQW $OLJQPHQW7RS6WDUW FRQWHQW#&RPSRVDEOH $QLPDWHG9LVLELOLW\6FRSH  WDUJHW6WDWH6 !8QLW ^  ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  8. ğăоŎáÝĦğŎáğŎ #([SHULPHQWDO$QLPDWLRQ$SL #&RPSRVDEOH IXQ6!$QLPDWHG&RQWHQW WDUJHW6WDWH6 PRGLILHU0RGLILHU 0RGLILHU WUDQVLWLRQ6SHF $QLPDWHG&RQWHQW6FRSH 6!

    !&RQWHQW7UDQVIRUP ^  ` FRQWHQW$OLJQPHQW $OLJQPHQW $OLJQPHQW7RS6WDUW FRQWHQW#&RPSRVDEOH $QLPDWHG9LVLELOLW\6FRSH WDUJHW6WDWH6 !8QLW ^  ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  9. ğăоŎáÝĦğŎáğŎ YDUQXPEHUE\UHPHPEHU^ PXWDEOH6WDWH2I  ` &ROXPQ^ $QLPDWHG&RQWHQW WDUJHW6WDWH QXPEHU ^QXP!

    3ODQWV QXPEHU QXP ` 5RZ^ %XWWRQ RQ&OLFN ^QXPEHU` ^` %XWWRQ RQ&OLFN ^QXPEHU` ^` ` `
  10. ¾ğăоŎáɝņ„Ŏ¾Ŏá #&RPSRVDEOH IXQDQLPDWH6L]H$V6WDWH WDUJHW9DOXH6L]H DQLPDWLRQ6SHF $QLPDWLRQ6SHF6L]H! VL]H'HIDXOW6SULQJ ILQLVKHG/LVWHQHU 6L]H !8QLW

    " QXOO 6WDWH6L]H!^ UHWXUQDQLPDWH9DOXH$V6WDWH WDUJHW9DOXH 6L]H9HFWRU&RQYHUWHU DQLPDWLRQ6SHF ILQLVKHG/LVWHQHU  ILQLVKHG/LVWHQHU  ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  11. ¾ğăоŎáɝņ„Ŏ¾Ŏá #&RPSRVDEOH IXQDQLPDWH6L]H$V6WDWH WDUJHW9DOXH6L]H DQLPDWLRQ6SHF $QLPDWLRQ6SHF6L]H! VL]H'HIDXOW6SULQJ ILQLVKHG/LVWHQHU 6L]H !8QLW

    " QXOO 6WDWH6L]H!^ UHWXUQDQLPDWH9DOXH$V6WDWH WDUJHW9DOXH 6L]H9HFWRU&RQYHUWHU DQLPDWLRQ6SHF ILQLVKHG/LVWHQHU  ILQLVKHG/LVWHQHU  ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  12. ¾ğăоŎáɝņ„Ŏ¾Ŏá YDUFRXQWE\UHPHPEHU^ PXWDEOH6WDWH2I  ` YDOVL]H6WDWHE\DQLPDWH6L]H$V6WDWH WDUJHW9DOXH ZKHQ FRXQW ^

    !6L]H II !6L]H II HOVH!6L]H II ` &ROXPQ PRGLILHU 0RGLILHU VL]H VL]H6WDWHZLGWKGSVL]H6WDWHKHLJKWGS ^`
  13. œĿݾŎጳ¾ğņăŎăĦğ #&RPSRVDEOH IXQ7!XSGDWH7UDQVLWLRQ WDUJHW6WDWH7 ODEHO6WULQJ" QXOO 7UDQVLWLRQ7!^ YDOWUDQVLWLRQ UHPHPEHU^7UDQVLWLRQ WDUJHW6WDWH

    ODEHO ODEHO ` WUDQVLWLRQDQLPDWH7R WDUJHW6WDWH 'LVSRVDEOH(IIHFW WUDQVLWLRQ ^ RQ'LVSRVH^ WUDQVLWLRQRQ7UDQVLWLRQ(QG ` ` UHWXUQWUDQVLWLRQ ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  14. œĿݾŎጳ¾ğņăŎăĦğ #&RPSRVDEOH IXQ7!XSGDWH7UDQVLWLRQ WDUJHW6WDWH7 ODEHO6WULQJ" QXOO 7UDQVLWLRQ7!^ YDOWUDQVLWLRQ UHPHPEHU^7UDQVLWLRQ WDUJHW6WDWH

    ODEHO ODEHO ` WUDQVLWLRQDQLPDWH7R WDUJHW6WDWH 'LVSRVDEOH(IIHFW WUDQVLWLRQ ^ RQ'LVSRVH^ WUDQVLWLRQRQ7UDQVLWLRQ(QG ` ` UHWXUQWUDQVLWLRQ ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  15. œĿݾŎጳ¾ğņăŎăĦğ YDOWUDQVLWLRQ XSGDWH7UDQVLWLRQ WDUJHW6WDWH FRXQW YDOEDFNJURXQGE\WUDQVLWLRQDQLPDWH&RORU^WDUJHW6WDWH! LI WDUJHW6WDWH  ^%URZQ`HOVH^*UHHQ`

    ` YDODOSKDE\WUDQVLWLRQDQLPDWH)ORDW^WDUJHW6WDWH! LI WDUJHW6WDWH  ^I`HOVH^I` ` &ROXPQ PRGLILHU 0RGLILHU DOSKD DOSKD DOSKD EDFNJURXQG FRORU EDFNJURXQG ^`
  16. łáĞáĞÖáłEğƃğăŎጳ¾ğņăŎăĦğ #&RPSRVDEOH IXQ,QILQLWH7UDQVLWLRQ DQLPDWH&RORU LQLWLDO9DOXH&RORU WDUJHW9DOXH&RORU DQLPDWLRQ6SHF ,QILQLWH5HSHDWDEOH6SHF &RORU! 6WDWH&RORU!^

    YDOFRQYHUWHU UHPHPEHU^  &RORU9HFWRU&RQYHUWHU WDUJHW9DOXHFRORU6SDFH ` UHWXUQDQLPDWH9DOXH LQLWLDO9DOXHWDUJHW9DOXH FRQYHUWHUDQLPDWLRQ6SHF ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  17. łáĞáĞÖáłEğƃğăŎጳ¾ğņăŎăĦğ #&RPSRVDEOH IXQ,QILQLWH7UDQVLWLRQ DQLPDWH&RORU LQLWLDO9DOXH&RORU WDUJHW9DOXH&RORU DQLPDWLRQ6SHF,QILQLWH5HSHDWDEOH6SHF&RORU! 6WDWH&RORU!^ YDOFRQYHUWHU UHPHPEHU^

     &RORU9HFWRU&RQYHUWHU WDUJHW9DOXHFRORU6SDFH ` UHWXUQDQLPDWH9DOXH LQLWLDO9DOXHWDUJHW9DOXH FRQYHUWHUDQLPDWLRQ6SHF ` ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ
  18. łáĞáĞÖáłEğƃğăŎጳ¾ğņăŎăĦğ YDOWUDQVLWLRQ UHPHPEHU,QILQLWH7UDQVLWLRQ YDOZLGWKE\WUDQVLWLRQDQLPDWH)ORDW LQLWLDO9DOXH I WDUJHW9DOXH I DQLPDWLRQ6SHF LQILQLWH5HSHDWDEOH

    DQLPDWLRQ WZHHQ GXUDWLRQ0LOOLV   UHSHDW0RGH 5HSHDW0RGH5HYHUVH  &ROXPQ PRGLILHU 0RGLILHU ZLGWK ZLGWKGS ^`
  19. ğăоŎăĦğ„Ŀá×ɔɹņĿłăğ÷ ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ YDORIIVHW$QLPDWLRQE\DQLPDWH'S$V6WDWH WDUJHW9DOXH LI VWDWH $QLPDWLRQ6WDWH,GOH GS HOVHGS DQLPDWLRQ6SHF

    VSULQJ GDPSLQJ5DWLR 6SULQJ'DPSLQJ5DWLR+LJK%RXQF\  VWLIIQHVV 6SULQJ6WLIIQHVV/RZ  &ROXPQ PRGLILHU 0RGLILHU RIIVHW \ RIIVHW$QLPDWLRQ ^`
  20. ğăоŎăĦğ„Ŀá×ɔɹŎŨááğ ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ YDORIIVHW$QLPDWLRQE\DQLPDWH'S$V6WDWH WDUJHW9DOXH LI VWDWH $QLPDWLRQ6WDWH,GOH GS HOVHGS DQLPDWLRQ6SHF

    WZHHQ  GXUDWLRQ0LOOLV   HDVLQJ &XELF%H]LHU(DVLQJ IIII  &ROXPQ PRGLILHU 0RGLILHU RIIVHW \ RIIVHW$QLPDWLRQ ^`
  21. ğăоŎăĦğ„Ŀá×ɔɹĔáŮöł¾Ğáņ ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ YDORIIVHW$QLPDWLRQE\DQLPDWH'S$V6WDWH WDUJHW9DOXH LI VWDWH $QLPDWLRQ6WDWH,GOH GS HOVHGS DQLPDWLRQ6SHF

    NH\IUDPHV^  GXUDWLRQ0LOOLV  GHOD\0LOOLV  YDOILUVW9DOXH GS YDOILUVW)UDPH  ILUVW9DOXHDWILUVW)UDPH YDOVHFRQG9DOXH GS YDOVHFRQG)UDPH  VHFRQG9DOXHDWVHFRQG)UDPHZLWK)DVW2XW/LQHDU,Q(DVLQJ `
  22. ğăоŎăĦğ„Ŀá×ɔɹłáĿá¾Ŏ¾ÖĘá ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ YDORIIVHW$QLPDWLRQE\DQLPDWH'S$V6WDWH WDUJHW9DOXH LI VWDWH $QLPDWLRQ6WDWH,GOH GS HOVHGS DQLPDWLRQ6SHF

    UHSHDWDEOH LWHUDWLRQV  UHSHDW0RGH 5HSHDW0RGH5HYHUVH DQLPDWLRQ WZHHQ GXUDWLRQ0LOOLV   &ROXPQ PRGLILHU 0RGLILHU RIIVHW \ RIIVHW$QLPDWLRQ ^`
  23. ğăоŎăĦğ„Ŀá×ɔɹăğƃğăŎá€áĿá¾Ŏ¾ÖĘá ͒͸ƣŵƹƛĐĞ͸ĐŵėĞ YDORIIVHW$QLPDWLRQE\DQLPDWH'S$V6WDWH WDUJHW9DOXH LI VWDWH $QLPDWLRQ6WDWH,GOH GS HOVHGS DQLPDWLRQ6SHF

    LQILQLWH5HSHDWDEOH DQLPDWLRQ WZHHQ GXUDWLRQ0LOOLV   UHSHDW0RGH 5HSHDW0RGH5HYHUVH LQLWLDO6WDUW2IIVHW  6WDUW2IIVHW RIIVHW0LOOLV  RIIVHW7\SH 6WDUW2IIVHW7\SH)DVW)RUZDUG   &ROXPQ PRGLILHU 0RGLILHURIIVHW \ RIIVHW$QLPDWLRQ ^`
  24. Œł¾ğņăŎăĦğ„Ŀá× $QLPDWHG&RQWHQW WDUJHW6WDWH FRXQW WUDQVLWLRQ6SHF ^ LI WDUJHW6WDWH!LQLWLDO6WDWH ^ VOLGH2XW1HJDWLYH+HLJKW

    `HOVH^ VOLGH2XW3RVLWLYH+HLJKW `XVLQJ 6L]H7UDQVIRUP FOLS IDOVH  ` ^WDUJHW&RXQW! 7H[W WH[W WDUJHW&RXQW `
  25. €áņĦœł×áņ  KWWSVSURDQGURLGGHYFRPDQLPDWHZLWKMHWSDFNFRPSRVHDQLPDWHDVVWDWHDQGDQLPDWLRQVSHFVIIFEEI  KWWSVPD[NLPHXWKLQJV\RXQHHGWRNQRZEHIRUHVZLWFKLQJWRMHWSDFNFRPSRVH  KWWSVGHYHORSHUDQGURLGFRPMHWSDFNFRPSRVHDQLPDWLRQ"KO HQ  KWWSVGHYHORSHUDQGURLGFRPJXLGHWRSLFVUHVRXUFHVGUDZDEOHUHVRXUFH

     KWWSVWRXFKODEFRMHWSDFNFRPSRVHDQLPDWLRQVVWDWHFKDQJH  KWWSVGHYHORSHUDQGURLGFRPJXLGHWRSLFVUHVRXUFHVDQLPDWLRQUHVRXUFH  KWWSVVTXLGH[MXJUXWHDPDSLDVVHWVVUPFDDDFDEHGEDIHELJRUVU\EDNRYSGI  KWWSVDQGURLGGHYHORSHUVJRRJOHEORJFRPMHWSDFNFRPSRVHQRZVWDEOHKWPO  KWWSVPHGLXPFRPDQGURLGGHYHORSHUVFXVWRPL]LQJDQLPDWHGFRQWHQWLQMHWSDFNFRPSRVHFE  KWWSVSURDQGURLGGHYFRPDQLPDWHZLWKMHWSDFNFRPSRVHDQLPDWHDVVWDWHDQGDQLPDWLRQVSHFVIIFEEI  KWWSVPHGLXPFRPZHHNO\ZHEWLSVLPSHUDWLYHYVGHFODUDWLYHSURJUDPPLQJLQMDYDVFULSWEFGE  KWWSVGHYHORSHUDQGURLGFRPUHIHUHQFHNRWOLQDQGURLG[FRPSRVHDQLPDWLRQSDFNDJHVXPPDU\  KWWSVPDWHULDOLRGHVLJQPDWHULDOVWXGLHVUDOO\KWPO ¯ƘĞĐŇóş͸ƱŁóŪś͸ǘŵƹ͸Ʊŵ͸§ĞďĞĐĐó͸FƛóŪśƣ͸ĸŵƛ͸ƛĞǑŇĞǒŇŪĹ͸ƱŁĞ͸ƘƛĞƣĞŪƱóƱŇŵŪ