{"id":45736,"date":"2021-11-20T10:18:51","date_gmt":"2021-11-20T01:18:51","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45736"},"modified":"2021-11-20T10:18:53","modified_gmt":"2021-11-20T01:18:53","slug":"jetpack-compose-animation-%eb%b0%98%eb%b3%b5-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45736","title":{"rendered":"Jetpack Compose Animation &#8211; \ubc18\ubcf5 \uc560\ub2c8\uba54\uc774\uc158"},"content":{"rendered":"\n<p>\ud604\uc7ac \uc628\ub3c4 \uc606\uc5d0 \uc788\ub294 \uc0c8\ub85c \uace0\uce68 \uc544\uc774\ucf58 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud574 \ubcf4\uc790. \uc571\uc774 \ucd5c\uc2e0 \ub0a0\uc528 \uc815\ubcf4\ub97c \ub85c\ub4dc\ub97c \uc2dc\uc791(\ud558\ub294 \ucc99) \ud55c\ub2e4. \ub85c\ub529\uc774 \uc644\ub8cc\ub420 \ub54c\uae4c\uc9c0 \ud68c\uc0c9 \uc6d0\uacfc \ub9c9\ub300\uc778 \ub85c\ub529 \uc778\ub514\ucf00\uc774\ud130\uac00 \ub098\ud0c0\ub09c\ub2e4. \uc774 \uc778\ub514\ucf00\uc774\ud130 \uc54c\ud30c \uac12(\ud22c\uba85\ub3c4) \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uc5ec \ud504\ub85c\uc138\uc2a4\uac00 \uc9c4\ud589 \uc911\uc784\uc744 \ub354 \uba85\ud655\ud558\uac8c \ud45c\uc2dc\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\/c2912ddc2d73bdfc.png?hl=ko\" alt=\"c2912ddc2d73bdfc.png\"\/><\/figure>\n\n\n\n<p>LoadingRow \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c TODO 5\ub97c \ucc3e\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val alpha = 1f<\/code><\/pre>\n\n\n\n<p>\uc774 \uac12\uc744 0f\uc640 1f \uc0ac\uc774\uc5d0\uc11c \ubc18\ubcf5\uc801\uc73c\ub85c \uc6c0\uc9c1\uc774\uac8c \ub9cc\ub4e4\uace0 \uc2f6\ub2e4. \uc774\ub97c \uc704\ud574 InfiniteTransition\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc774 API\ub294 \uc774\uc804 \uc139\uc158\uc758 Transition API\uc640 \uc720\uc0ac\ud558\ub2e4. \ub458 \ub2e4 \uc5ec\ub7ec \uac12\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uc9c0\ub9cc, Transition\uc740 \uc0c1\ud0dc \ubcc0\uacbd\uc5d0 \ub530\ub77c \uac12\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \ubc18\uba74, InfiniteTransition\uc740 \uac12\uc5d0 \ubb34\uae30\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p>InfiniteTransition\uc744 \uc0dd\uc131\ud558\ub824\uba74 RememberInfiniteTransition \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc790. \uadf8\ub7f0 \ub2e4\uc74c \uac01 \uc560\ub2c8\uba54\uc774\uc158 \uac12 \ubcc0\uacbd\uc740 InfiniteTransition\uc758 animate* \ud655\uc7a5 \ud568\uc218 \uc911 \ud558\ub098\ub85c \uc120\uc5b8\ub420 \uc218 \uc788\ub2e4. \uc774 \uacbd\uc6b0 \uc54c\ud30c \uac12\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ubbc0\ub85c animationFloat\ub97c \uc0ac\uc6a9\ud574\ubcf4\uaca0\ub2e4. initialValue \ub9e4\uac1c\ubcc0\uc218\ub294 0f\uc5ec\uc57c \ud558\uace0, targetValue\ub294 1f\uc774\uc5ec\uc57c \ud55c\ub2e4. \uc774 \uc560\ub2c8\uba54\uc774\uc158\uc5d0 AnimationSpec\uc744 \uc9c0\uc815\ud560 \uc218\ub3c4 \uc788\uc9c0\ub9cc, \uc774 API\ub294 InfiniteRepeatableSpec\ub9cc \uc0ac\uc6a9\ud55c\ub2e4. \uc774\ub97c \ud558\ub098 \uc0dd\uc131\ud558\uae30 \uc704\ud574 InfinityRepeatable \ud568\uc218\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \uc774 AnimationSpec\uc740 \uc2dc\uac04(duration) \uae30\ubc18\uc73c\ub85c AnimationSpec\uc744 \ub798\ud551\ud558\uace0 \ubc18\ubcf5 \uac00\ub2a5\ud558\uac8c \ub9cc\ub4e0\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uacb0\uacfc \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val infiniteTransition = rememberInfiniteTransition()<br>val alpha by infiniteTransition.animateFloat(<br>&nbsp; &nbsp; initialValue = 0f,<br>&nbsp; &nbsp; targetValue = 1f,<br>&nbsp; &nbsp; animationSpec = infiniteRepeatable(<br>&nbsp; &nbsp; &nbsp; &nbsp; animation = keyframes {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; durationMillis = 1000<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0.7f at 500<br>&nbsp; &nbsp; &nbsp; &nbsp; },<br>&nbsp; &nbsp; &nbsp; &nbsp; repeatMode = RepeatMode.Reverse<br>&nbsp; &nbsp; )<br>)<\/code><\/pre>\n\n\n\n<p>\uc571\uc744 \uc2e4\ud589\ud558\uace0 \uc0c8\ub85c \uace0\uce68 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud574 \ubcf4\uc790. \uc774\uc81c \ub85c\ub529 \uc778\ub514\ucf00\uc774\ud130\uac00 \uc6c0\uc9c1\uc774\ub294 \uac83\uc744 \ubcfc \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\/ca4d1d5bfe87b2a9.gif?hl=ko\" alt=\"ca4d1d5bfe87b2a9.gif\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud604\uc7ac \uc628\ub3c4 \uc606\uc5d0 \uc788\ub294 \uc0c8\ub85c \uace0\uce68 \uc544\uc774\ucf58 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud574 \ubcf4\uc790. \uc571\uc774 \ucd5c\uc2e0 \ub0a0\uc528 \uc815\ubcf4\ub97c \ub85c\ub4dc\ub97c \uc2dc\uc791(\ud558\ub294 \ucc99) \ud55c\ub2e4. \ub85c\ub529\uc774 \uc644\ub8cc\ub420 \ub54c\uae4c\uc9c0 \ud68c\uc0c9 \uc6d0\uacfc \ub9c9\ub300\uc778 \ub85c\ub529 \uc778\ub514\ucf00\uc774\ud130\uac00 \ub098\ud0c0\ub09c\ub2e4. \uc774 \uc778\ub514\ucf00\uc774\ud130 \uc54c\ud30c \uac12(\ud22c\uba85\ub3c4) \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\uc5ec \ud504\ub85c\uc138\uc2a4\uac00 \uc9c4\ud589 \uc911\uc784\uc744 \ub354 \uba85\ud655\ud558\uac8c \ud45c\uc2dc\ud574 \ubcf4\uc790. LoadingRow \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c TODO 5\ub97c \ucc3e\uc790. \uc774 \uac12\uc744 0f\uc640 1f \uc0ac\uc774\uc5d0\uc11c [&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\/45736"}],"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=45736"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45736\/revisions"}],"predecessor-version":[{"id":45737,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45736\/revisions\/45737"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}