{"id":45734,"date":"2021-11-20T09:54:37","date_gmt":"2021-11-20T00:54:37","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45734"},"modified":"2021-11-20T09:54:40","modified_gmt":"2021-11-20T00:54:40","slug":"jetpack-compose-animation-%eb%8b%a4%ec%96%91%ed%95%9c-%ea%b0%92-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45734","title":{"rendered":"Jetpack Compose Animation &#8211; \ub2e4\uc591\ud55c \uac12 \uc560\ub2c8\uba54\uc774\uc158"},"content":{"rendered":"\n<p>\uc774\uc81c \uba87 \uac00\uc9c0 \uae30\ubcf8 \uc560\ub2c8\uba54\uc774\uc158 API\uc5d0 \uc775\uc219\ud574\uc84c\uc73c\ubbc0\ub85c \ub354 \ubcf5\uc7a1\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 Transition API\ub97c \uc0b4\ud3b4\ubcf4\uc790. \uc774 \uc608\uc5d0\uc11c\ub294 \ud0ed \uc778\ub514\ucf00\uc774\ud130\ub97c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud55c\ub2e4. \uc774\ub294 \ud604\uc7ac \uc120\ud0dd\ub41c \ud0ed\uc5d0 \ud45c\uc2dc\ub418\ub294 \uc0ac\uac01\ud615\uc774\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-animation\/img\/337937fe2e3919a9.png?hl=ko\"><\/td><td><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-animation\/img\/d1ad39f36c3874f0.png?hl=ko\"><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>HomeTabIndicator \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c TODO 4\ub97c \ucc3e\uc544 \ud0ed \uc778\ub514\ucf00\uc774\ud130\uac00 \uc5b4\ub5bb\uac8c \uad6c\ud604\ub418\ub294\uc9c0 \ud655\uc778\ud574\ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val indicatorLeft = tabPositions&#91;tabPage.ordinal].left<br>val indicatorRight = tabPositions&#91;tabPage.ordinal].right<br>val color = if (tabPage == TabPage.Home) Purple700 else Green800<\/code><\/pre>\n\n\n\n<p>\uc5ec\uae30\uc11c IndicatorLeft\ub294 \ud0ed \ud589(tab row)\uc5d0\uc11c \uc778\ub514\ucf00\uc774\ud130\uc758 \uc67c\ucabd \ud14c\ub450\ub9ac\uace0, IndicatorRight\ub294 \uc778\ub514\ucf00\uc774\ud130\uc758 \uc624\ub978\ucabd \ud14c\ub450\ub9ac\ub2e4. \uc0c9\uc0c1\ub3c4 \ubcf4\ub77c\uc0c9\uacfc \ub179\uc0c9 \uc0ac\uc774\uc5d0\uc11c \ubcc0\uacbd\ub41c\ub2e4. <\/p>\n\n\n\n<p>\uc774\ub7ec\ud55c \uc5ec\ub7ec \uac12\uc744 \ub3d9\uc2dc\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\ud558\uae30 \uc704\ud574 Transition\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. updateTransition \ud568\uc218\ub85c \ud2b8\ub79c\uc9c0\uc158\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\ub2e4. targetState \ub9e4\uac1c\ubcc0\uc218\ub85c \ud604\uc7ac \uc120\ud0dd\ub41c \ud0ed\uc758 \uc778\ub371\uc2a4\ub97c \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uac01 \uc560\ub2c8\uba54\uc774\uc158 \uac12\uc740 Transition\uc758 animate* \ud655\uc7a5 \ud568\uc218\ub85c \uc120\uc5b8\ub420 \uc218 \uc788\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 animateDp \ubc0f animateColor\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \uadf8\uac83\ub4e4\uc740 \ub78c\ub2e4 \ube14\ub85d\uc744 \uc0ac\uc6a9\ud558\uace0, \uc6b0\ub9ac\ub294 \uac01 \uc0c1\ud0dc\uc5d0 \ub300\ud55c \ubaa9\ud45c \uac12\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4. \ubaa9\ud45c \uac12\uc774 \ubb34\uc5c7\uc778\uc9c0 \uc774\ubbf8 \uc54c\uace0 \uc788\uc73c\ubbc0\ub85c \uc544\ub798\uc640 \uac19\uc774 \uac12\uc744 \uac04\ub2e8\ud788 \ub798\ud551\ud560 \uc218 \uc788\ub2e4. animate* \ud568\uc218\uac00 State \uac1d\uccb4\ub97c \ubc18\ud658\ud558\uae30 \ub54c\ubb38\uc5d0 \uc5ec\uae30\uc5d0\uc11c by \uc120\uc5b8\uc744 \uc0ac\uc6a9\ud558\uace0, \uc774\ub97c \ub2e4\uc2dc <a href=\"https:\/\/kotlinlang.org\/docs\/delegated-properties.html#local-delegated-properties\">local delegated property<\/a> \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val transition = updateTransition(tabPage)<br>val indicatorLeft by transition.animateDp { page -&gt;<br>&nbsp; &nbsp; tabPositions&#91;page.ordinal].left<br>}<br>val indicatorRight by transition.animateDp { page -&gt;<br>&nbsp; &nbsp; tabPositions&#91;page.ordinal].right<br>}<br>val color by transition.animateColor { page -&gt;<br>&nbsp; &nbsp; if (page == TabPage.Home) Purple700 else Green800<br>}<\/code><\/pre>\n\n\n\n<p>\uc9c0\uae08 \uc571\uc744 \uc2e4\ud589\ud558\uba74 \ud6e8\uc52c \ub354 \ud765\ubbf8\ub86d\ub2e4\ub294 \ud0ed \uc804\ud658\uc774 \ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \ud0ed\uc744 \ud074\ub9ad\ud574 tabPage \uc0c1\ud0dc \uac12\uc774 \ubcc0\uacbd\ub428\uc5d0 \ub530\ub77c, \uc804\ud658\uacfc \uad00\ub828\ub41c \ubaa8\ub4e0 \uc560\ub2c8\uba54\uc774\uc158 \uac12\uc774 \ub300\uc0c1 \uc0c1\ud0dc\uc5d0 \ub300\ud574 \uc9c0\uc815\ub41c \uac12\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158 \ub418\uae30 \uc2dc\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-animation\/img\/3262270d174e77bf.gif?hl=ko\" alt=\"3262270d174e77bf.gif\"\/><\/figure>\n\n\n\n<p>\ub610\ud55c, transitionSpec \ub9e4\uac1c\ubcc0\uc218\ub97c \uc9c0\uc815\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158 \ub3d9\uc791\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \ubaa9\uc801\uc9c0\uc5d0 \ub354 \uac00\uae4c\uc6b4 \uac00\uc7a5\uc790\ub9ac\uac00 \ub2e4\ub978 \uac00\uc7a5\uc790\ub9ac\ubcf4\ub2e4 \ube60\ub974\uac8c \uc6c0\uc9c1\uc774\ub3c4\ub85d \ud568\uc73c\ub85c\uc368 \uc778\ub514\ucf00\uc774\ud130\uc5d0 \ub300\ud55c \ud0c4\uc131 \ud6a8\uacfc\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4. transitionSpec \ub78c\ub2e4\uc5d0\uc11c isTransitioningTo infix \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc \ubcc0\uacbd \ubc29\ud5a5\uc744 \uacb0\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val transition = updateTransition(\n\u00a0 \u00a0 tabPage,\n\u00a0 \u00a0 label = \"Tab indicator\"\n)\nval indicatorLeft by transition.animateDp(\n\u00a0 \u00a0 transitionSpec = {\n\u00a0 \u00a0 \u00a0 \u00a0 if (TabPage.Home isTransitioningTo TabPage.Work) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc778\ub514\ucf00\uc774\ud130\uac00 \uc624\ub978\ucabd\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc67c\ucabd \uc5e3\uc9c0\uac00 \uc624\ub978\ucabd \uc5e3\uc9c0\ubcf4\ub2e4 \ucc9c\ucc9c\ud788 \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 spring(stiffness = Spring.StiffnessVeryLow)\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc778\ub514\ucf00\uc774\ud130\uac00 \uc67c\ucabd\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc67c\ucabd \uc5e3\uc9c0\uac00 \uc624\ub978\ucabd \uc5e3\uc9c0\ubcf4\ub2e4 \ube60\ub974\uac8c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 spring(stiffness = Spring.StiffnessMedium)\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 },\n\u00a0 \u00a0 label = \"Indicator left\"\n) { page ->\n\u00a0 \u00a0 tabPositions&#91;page.ordinal].left\n}\nval indicatorRight by transition.animateDp(\n\u00a0 \u00a0 transitionSpec = {\n\u00a0 \u00a0 \u00a0 \u00a0 if (TabPage.Home isTransitioningTo TabPage.Work) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc778\ub514\ucf00\uc774\ud130\uac00 \uc624\ub978\ucabd\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc624\ub978\ucabd \uc5e3\uc9c0\uac00 \uc67c\ucabd \uc5e3\uc9c0\ubcf4\ub2e4 \ube60\ub974\uac8c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 spring(stiffness = Spring.StiffnessMedium)\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc778\ub514\ucf00\uc774\ud130\uac00 \uc67c\ucabd\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc624\ub978\ucabd \uc5e3\uc9c0\uac00 \uc67c\ucabd \uc5e3\uc9c0\ubcf4\ub2e4 \ub290\ub9ac\uac8c \uc774\ub3d9\ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 spring(stiffness = Spring.StiffnessVeryLow)\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 },\n\u00a0 \u00a0 label = \"Indicator right\"\n) { page ->\n\u00a0 \u00a0 tabPositions&#91;page.ordinal].right\n}\nval color by transition.animateColor(\n\u00a0 \u00a0 label = \"Border color\"\n) { page ->\n\u00a0 \u00a0 if (page == TabPage.Home) Purple700 else Green800\n}<\/code><\/pre>\n\n\n\n<p>\uc571\uc744 \ub2e4\uc2dc \uc2e4\ud589\ud558\uace0 \ud0ed\uc744 \uc804\ud658\ud574 \ubcf4\uc790.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-animation\/img\/2ad4adbefce04ae2.gif?hl=ko\" alt=\"2ad4adbefce04ae2.gif\"\/><\/figure>\n\n\n\n<p>Android Studio\ub294 \ucef4\ud3ec\uc988 Preview\uc5d0\uc11c \uc804\ud658 \uac80\uc0ac\ub97c \uc9c0\uc6d0\ud55c\ub2e4. \uc560\ub2c8\uba54\uc774\uc158 \ubbf8\ub9ac\ubcf4\uae30\ub97c \uc0ac\uc6a9\ud558\ub824\uba74, \ubbf8\ub9ac\ubcf4\uae30\uc5d0\uc11c \ucef4\ud3ec\uc800\ube14\uc758 \uc624\ub978\ucabd \uc0c1\ub2e8 \ubaa8\uc11c\ub9ac\uc5d0 \uc788\ub294 &#8220;Start interactive mode&#8221; \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud558\uc5ec \uc778\ud130\ub809\ud2f0\ube0c \ubaa8\ub4dc\ub97c \uc2dc\uc791\ud55c\ub2e4. \uc544\uc774\ucf58\uc744 \ucc3e\uc744 \uc218 \uc5c6\ub294 \uacbd\uc6b0 <a href=\"https:\/\/developer.android.com\/jetpack\/compose\/tooling?hl=ko#enable-experimental-features\">\uc5ec\uae30<\/a>\uc5d0 \uc124\uba85\ub41c \ub300\ub85c \uc2e4\ud5d8\uc2e4 \uc124\uc815\uc5d0\uc11c \uc774 \uae30\ub2a5\uc744 \ud65c\uc131\ud654\ud574\uc57c \ud55c\ub2e4. PreviewHomeTabBar \ucef4\ud3ec\uc800\ube14 \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud574 \ubcf4\uc790. \uadf8\ub7f0 \ub2e4\uc74c \uc778\ud130\ub809\ud2f0\ube0c \ubaa8\ub4dc\uc758 \uc624\ub978\ucabd \uc0c1\ub2e8 \ubaa8\uc11c\ub9ac\uc5d0 \uc788\ub294 &#8220;Start animation inspection&#8221; \uc544\uc774\ucf58\uc744 \ud074\ub9ad\ud55c\ub2e4. \uadf8\ub7ec\uba74 \uc0c8 &#8220;Animations&#8221; \ucc3d\uc774 \uc5f4\ub9b0\ub2e4.<\/p>\n\n\n\n<p>&#8220;Play&#8221; \uc544\uc774\ucf58 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\ub2e4. seekbar\ub97c \ub4dc\ub798\uadf8\ud574 \uac01 \uc560\ub2c8\uba54\uc774\uc158 \ud504\ub808\uc784\uc744 \ubcfc \uc218\ub3c4 \uc788\ub2e4. \uc560\ub2c8\uba54\uc774\uc158 \uac12\uc5d0 \ub300\ud55c \ub354 \ub098\uc740 \uc124\uba85\uc744 \uc704\ud574 <em>updateTransition<\/em> \ubc0f <em>animate*<\/em> \uba54\uc11c\ub4dc\uc5d0\uc11c <em>label<\/em> \ub9e4\uac1c\ubcc0\uc218\ub97c \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-animation\/img\/2d3c5020ae28120b.png?hl=ko\" alt=\"2d3c5020ae28120b.png\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\uc774\uc81c \uba87 \uac00\uc9c0 \uae30\ubcf8 \uc560\ub2c8\uba54\uc774\uc158 API\uc5d0 \uc775\uc219\ud574\uc84c\uc73c\ubbc0\ub85c \ub354 \ubcf5\uc7a1\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 Transition API\ub97c \uc0b4\ud3b4\ubcf4\uc790. \uc774 \uc608\uc5d0\uc11c\ub294 \ud0ed \uc778\ub514\ucf00\uc774\ud130\ub97c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud55c\ub2e4. \uc774\ub294 \ud604\uc7ac \uc120\ud0dd\ub41c \ud0ed\uc5d0 \ud45c\uc2dc\ub418\ub294 \uc0ac\uac01\ud615\uc774\ub2e4. HomeTabIndicator \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c TODO 4\ub97c \ucc3e\uc544 \ud0ed \uc778\ub514\ucf00\uc774\ud130\uac00 \uc5b4\ub5bb\uac8c \uad6c\ud604\ub418\ub294\uc9c0 \ud655\uc778\ud574\ubcf4\uc790. \uc5ec\uae30\uc11c IndicatorLeft\ub294 \ud0ed \ud589(tab row)\uc5d0\uc11c \uc778\ub514\ucf00\uc774\ud130\uc758 \uc67c\ucabd \ud14c\ub450\ub9ac\uace0, IndicatorRight\ub294 \uc778\ub514\ucf00\uc774\ud130\uc758 \uc624\ub978\ucabd \ud14c\ub450\ub9ac\ub2e4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45734"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45734"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45734\/revisions"}],"predecessor-version":[{"id":45735,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45734\/revisions\/45735"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}