{"id":45727,"date":"2021-11-20T02:51:14","date_gmt":"2021-11-19T17:51:14","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45727"},"modified":"2021-11-20T02:51:15","modified_gmt":"2021-11-19T17:51:15","slug":"jetpack-compose-animation-%ea%b0%80%ec%8b%9c%ec%84%b1-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45727","title":{"rendered":"Jetpack Compose Animation – \uac00\uc2dc\uc131 \uc560\ub2c8\uba54\uc774\uc158"},"content":{"rendered":"\n

\uc571\uc758 \ucf58\ud150\uce20\ub97c \uc2a4\ud06c\ub864\ud558\uba74 \uc2a4\ud06c\ub864 \ubc29\ud5a5\uc5d0 \ub530\ub77c \ud50c\ub85c\ud305 \uc561\uc158 \ubc84\ud2bc\uc774 \ud655\uc7a5\ub418\uace0 \ucd95\uc18c\ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

TODO 2-1\uc744 \ucc3e\uc544\uc11c \uc774\uac83\uc774 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc790. HomeFloatingActionButton \ucef4\ud3ec\uc800\ube14 \uc548\uc5d0 \uc788\ub2e4. “EDIT”\ub77c\ub294 \ud14d\uc2a4\ud2b8\ub294 if \ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud45c\uc2dc\ud558\uac70\ub098 \uc228\uae34\ub2e4.<\/p>\n\n\n\n

if (extended) {
    Text(
        text = stringResource(R.string.edit),
        modifier = Modifier
            .padding(start = 8.dp, top = 3.dp)
    )
}<\/code><\/pre>\n\n\n\n
\uc774 \uac00\uc2dc\uc131 \ubcc0\uacbd\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \uac83\uc740 if\ub97c AnimatedVisibility \ucef4\ud3ec\uc800\ube14\ub85c \uac04\ub2e8\ud788 \ubc14\uafb8\ub294 \uac83\ubfd0\uc774\ub2e4.<\/p>\n\n\n\n
AnimatedVisibility(extended) {
    Text(
        text = stringResource(R.string.edit),
        modifier = Modifier
            .padding(start = 8.dp, top = 3.dp)
    )
}<\/code><\/pre>\n\n\n\n
\uc571\uc744 \uc2e4\ud589\ud558\uace0 \uc9c0\uae08 FAB(Floating Action Button)\uac00 \uc5b4\ub5bb\uac8c \ud655\uc7a5\ub418\uace0 \ucd95\uc18c\ub418\ub294\uc9c0 \ud655\uc778\ud558\uc790.
<\/p>\n\n\n\n
\ucc30\uc2a4 \uc0dd\uac01<\/strong>: \ucf54\ub4dc\ub7a9\uc5d0\uc11c \uc8fc\uc5b4\uc9c4 \ub0b4\uc6a9\uc73c\ub85c\ub294 \uc544\uc9c1 FAB \ud655\uc7a5\/\ucd95\uc18c\ub97c \ud655\uc778\ud560 \uc218\uac00 \uc5c6\ub2e4.<\/p><\/blockquote>\n\n\n\n
\"37a613b87156bfbe.gif\"\/<\/figure>\n\n\n\n
AnimatedVisibility\ub294 \uc9c0\uc815\ub41c Boolean \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud55c\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c AnimatedVisibility\ub294 \ud398\uc774\ub4dc \uc778 \ubc0f \ud655\uc7a5\ud558\uc5ec \uc694\uc18c\ub97c \ud45c\uc2dc\ud558\uace0 \ud398\uc774\ub4dc \uc544\uc6c3 \ubc0f \ucd95\uc18c\ud558\uc5ec \uc694\uc18c\ub97c \uc228\uae34\ub2e4. \uc774 \ub3d9\uc791\uc740 FAB\ub97c \uc0ac\uc6a9\ud558\ub294 \uc774 \uc608\uc81c\uc5d0\uc11c \uc798 \uc791\ub3d9\ud558\uc9c0\ub9cc \ub3d9\uc791\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
FAB\ub97c \ud074\ub9ad\ud558\uba74 “Edit feature is not supported(\ud3b8\uc9d1 \uae30\ub2a5\uc774 \uc9c0\uc6d0\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4)”\ub77c\ub294 \uba54\uc2dc\uc9c0\uac00 \ud45c\uc2dc\ub41c\ub2e4. \ub610\ud55c AnimatedVisibility\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub098\ud0c0\ub0ac\ub2e4\uac00 \uc0ac\ub77c\uc9c0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2e4\ud589\ub41c\ub2e4. \uc774 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud558\uc5ec \uc694\uc18c\uac00 \uc704\uc5d0\uc11c \uc548\uc73c\ub85c \ub4e4\uc5b4\uac00\uace0, \uc704\ub85c \ubbf8\ub044\ub7ec\uc9c0\ub3c4\ub85d \ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
TODO 2-2\ub97c \ucc3e\uc544 EditMessage \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c \ucf54\ub4dc\ub97c \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n
AnimatedVisibility(
    visible = shown
) {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        color = MaterialTheme.colors.secondary,
        elevation = 4.dp
    ) {
        Text(
            text = stringResource(R.string.edit_message),
            modifier = Modifier.padding(16.dp)
        )
    }
}<\/code><\/pre>\n\n\n\n
\uc560\ub2c8\uba54\uc774\uc158\uc744 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \ud558\ub824\uba74 AnimatedVisibility \ucef4\ud3ec\uc800\ube14\uc5d0 enter \ubc0f exit \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
enter \ub9e4\uac1c\ubcc0\uc218\ub294 EnterTransition\uc758 \uc778\uc2a4\ud134\uc2a4\uc5ec\uc57c \ud55c\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 SlideInVertically \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec EnterTransition\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub2e4. \uc774 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uba74 initialOffsetY \ubc0f animationSpec \ub9e4\uac1c\ubcc0\uc218\ub85c \ucd94\uac00\ud558\uc5ec \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\uc774 \uac00\ub2a5\ud558\ub2e4. initialOffsetY\ub294 \ucd08\uae30 \uc704\uce58\ub97c \ubc18\ud658\ud558\ub294 \ub78c\ub2e4\uc2dd\uc774\uc5ec\uc57c \ud55c\ub2e4. \ub78c\ub2e4\ub294 \uc694\uc18c\uc758 \ub192\uc774\uc5d0 \ud574\ub2f9\ud558\ub294 \uc778\uc790 \ud558\ub098\ub97c \uc218\uc2e0\ud558\ubbc0\ub85c, \uac04\ub2e8\ud788 \uc74c\uc218\ub97c \ubc18\ud658\ud560 \uc218 \uc788\ub2e4. SlideInVertically\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc2ac\ub77c\uc774\ub4dc \uc778 \ud6c4 \ub300\uc0c1 \uc624\ud504\uc14b\uc740 \ud56d\uc0c1 0(\ud53d\uc140)\uc774\ub2e4. initialOffsetY\ub294 \uc808\ub300\uac12 \ub610\ub294 \ub78c\ub2e4 \ud568\uc218\ub97c \ud1b5\ud574 \uc694\uc18c \uc804\uccb4 \ub192\uc774\uc758 \ubc31\ubd84\uc728\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
animationSpec\uc740 EnterTransition \ubc0f ExitTransition\uc744 \ud3ec\ud568\ud55c \ub9ce\uc740 \uc560\ub2c8\uba54\uc774\uc158 API\uc758 \uacf5\ud1b5 \ub9e4\uac1c\ubcc0\uc218\ub2e4. \ub2e4\uc591\ud55c AnimationSpec \ud0c0\uc785 \uc911 \ud558\ub098\ub97c \uc804\ub2ec\ud558\uc5ec, \uc2dc\uac04 \uacbd\uacfc\uc5d0 \ub530\ub77c \uc560\ub2c8\uba54\uc774\uc158 \uac12\uc774 \uc5b4\ub5bb\uac8c \ubcc0\uacbd\ub418\uc5b4\uc57c \ud558\ub294\uc9c0 \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4. \uc774 \uc608\uc81c\uc5d0\uc11c\ub294 \uac04\ub2e8\ud788 \uc2dc\uac04(duration) \uae30\ubc18\uc758 AnimationSpec\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uadf8\uac83\uc740 tween \ud568\uc218\ub85c\ub3c4 \ub9cc\ub4e4 \uc218 \uc788\ub2e4. \uc9c0\uc18d \uc2dc\uac04\uc740 150ms\uc774\uace0 easing\uc740 LinearOutSlowInEasing\uc774\ub2e4.<\/p>\n\n\n\n
\uc774\uc9d5(Easing)\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc758 \ubd84\uc218\ub97c \uc870\uc815\ud558\ub294 \ubc29\ubc95\uc774\ub2e4. \uc774\uc9d5\uc744 \uc0ac\uc6a9\ud558\uba74 \uc804\ud658 \uc694\uc18c\uac00 \uc77c\uc815\ud55c \uc18d\ub3c4\ub85c \uc774\ub3d9\ud558\ub294 \ub300\uc2e0 \uc18d\ub3c4\ub97c \ub192\uc774\uac70\ub098 \ub0ae\ucd9c \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n
\ub9c8\ucc2c\uac00\uc9c0\ub85c exit \ub9e4\uac1c\ubcc0\uc218\uc5d0 \ub300\ud574 slideOutVertically \ud568\uc218\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. SlideOutVertically\ub294 \ucd08\uae30 \uc624\ud504\uc14b\uc774 0\uc774\ub77c\uace0 \uac00\uc815\ud558\ubbc0\ub85c targetOffsetY\ub9cc \uc9c0\uc815\ud558\uba74 \ub41c\ub2e4. animationSpec \ub9e4\uac1c\ubcc0\uc218\uc5d0 \ub300\ud574 \ub3d9\uc77c\ud55c tween \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc \uc9c0\uc18d \uc2dc\uac04\uc740 250ms\uc774\uace0 FastOutLinearInEasing\uc758 easing\uc774 \uc788\ub2e4.<\/p>\n\n\n\n
\uacb0\uacfc \ucf54\ub4dc\ub294 \uc544\ub798\uc640 \uac19\uc544\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
AnimatedVisibility(\n\u00a0 \u00a0 visible = shown,\n\u00a0 \u00a0 enter = slideInVertically(\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc624\ud504\uc14b\uc774 -(\uc804\uccb4\ub192\uc774)\uc5d0\uc11c 0\uc73c\ub85c \uc2ac\ub77c\uc774\ub529 \ud558\uc5ec \ub0b4\ub824\uc628\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 initialOffsetY = { fullHeight -> -fullHeight },\n\u00a0 \u00a0 \u00a0 \u00a0 animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing)\n\u00a0 \u00a0 ),\n\u00a0 \u00a0 exit = slideOutVertically(\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc624\ud504\uc14b\uc774 0\uc5d0\uc11c -(\uc804\uccb4\ub192\uc774)\ub85c \uc2ac\ub77c\uc774\ub529 \ud558\uc5ec \uc62c\ub77c\uac04\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 targetOffsetY = { fullHeight -> -fullHeight },\n\u00a0 \u00a0 \u00a0 \u00a0 animationSpec = tween(durationMillis = 250, easing = FastOutLinearInEasing)\n\u00a0 \u00a0 )\n) {\n\u00a0 \u00a0 Surface(\n\u00a0 \u00a0 \u00a0 \u00a0 modifier = Modifier.fillMaxWidth(),\n\u00a0 \u00a0 \u00a0 \u00a0 color = MaterialTheme.colors.secondary,\n\u00a0 \u00a0 \u00a0 \u00a0 elevation = 4.dp\n\u00a0 \u00a0 ) {\n\u00a0 \u00a0 \u00a0 \u00a0 Text(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 text = stringResource(R.string.edit_message),\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 modifier = Modifier.padding(16.dp)\n\u00a0 \u00a0 \u00a0 \u00a0 )\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
\uc571\uc744 \uc2e4\ud589\ud558\uace0 FAB\ub97c \ub2e4\uc2dc \ud074\ub9ad\ud558\uc790. \uc774\uc81c \uba54\uc2dc\uc9c0\uac00 \uc0c1\ub2e8\uc5d0\uc11c \uc548\ud30e\uc73c\ub85c \ubbf8\ub044\ub7ec\uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"76895615b43b9263.gif\"\/<\/figure>\n","protected":false},"excerpt":{"rendered":"
\uc571\uc758 \ucf58\ud150\uce20\ub97c \uc2a4\ud06c\ub864\ud558\uba74 \uc2a4\ud06c\ub864 \ubc29\ud5a5\uc5d0 \ub530\ub77c \ud50c\ub85c\ud305 \uc561\uc158 \ubc84\ud2bc\uc774 \ud655\uc7a5\ub418\uace0 \ucd95\uc18c\ub418\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. TODO 2-1\uc744 \ucc3e\uc544\uc11c \uc774\uac83\uc774 \uc5b4\ub5bb\uac8c \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc790. HomeFloatingActionButton \ucef4\ud3ec\uc800\ube14 \uc548\uc5d0 \uc788\ub2e4. “EDIT”\ub77c\ub294 \ud14d\uc2a4\ud2b8\ub294 if \ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud45c\uc2dc\ud558\uac70\ub098 \uc228\uae34\ub2e4. \uc774 \uac00\uc2dc\uc131 \ubcc0\uacbd\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud558\ub294 \uac83\uc740 if\ub97c AnimatedVisibility \ucef4\ud3ec\uc800\ube14\ub85c \uac04\ub2e8\ud788 \ubc14\uafb8\ub294 \uac83\ubfd0\uc774\ub2e4. \uc571\uc744 \uc2e4\ud589\ud558\uace0 \uc9c0\uae08 FAB(Floating Action […]<\/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\/45727"}],"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=45727"}],"version-history":[{"count":3,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45727\/revisions"}],"predecessor-version":[{"id":45731,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45727\/revisions\/45731"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}