{"id":717,"date":"2018-08-22T19:16:42","date_gmt":"2018-08-22T10:16:42","guid":{"rendered":"http:\/\/www.charlezz.com\/?p=717"},"modified":"2018-08-22T19:21:44","modified_gmt":"2018-08-22T10:21:44","slug":"motionlayout%ec%9c%bc%eb%a1%9c-%eb%a7%8c%eb%93%9c%eb%8a%94-%ec%95%88%eb%93%9c%eb%a1%9c%ec%9d%b4%eb%93%9c-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=717","title":{"rendered":"MotionLayout\uc73c\ub85c \ub9cc\ub4dc\ub294 \uc548\ub4dc\ub85c\uc774\ub4dc \uc560\ub2c8\uba54\uc774\uc158"},"content":{"rendered":"<h1>MotionLayout\uc73c\ub85c \ub9cc\ub4dc\ub294 \uc560\ub2c8\uba54\uc774\uc158<\/h1>\n<p>ConstraintLayout 2.0\uc774 \ucd9c\uc2dc \ub418\uba74\uc11c MotionLayout\uc774\ub77c\ub294 \uc0c8\ub85c\uc6b4 \ub808\uc774\uc544\uc6c3\uc774 \ub4f1\uc7a5\ud588\uc2b5\ub2c8\ub2e4. MotionLayout\uc740 ConstrainLayout\uc744 \uc0c1\uc18d\ud55c \ub808\uc774\uc544\uc6c3\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ubc29\uc2dd\uc73c\ub85c \ub3d9\uc801\uc778 \ud654\uba74\uc744 \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n<p>\uae30\uc874\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30\uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\uc220\ub4e4\uc744 \uc801\uc6a9\ud588\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.android.com\/reference\/android\/graphics\/drawable\/AnimatedVectorDrawable\">AnimatedVectorDrawable<\/a>( <a href=\"http:\/\/www.charlezz.com\/?p=136\">\ubaa8\ud551 \uc560\ub2c8\uba54\uc774\uc158 \ubc84\ud2bc \ub9cc\ub4e4\uae30<\/a> )<\/li>\n<li><a href=\"https:\/\/developer.android.com\/guide\/topics\/graphics\/prop-animation\">Property Animation<\/a><\/li>\n<li><a href=\"https:\/\/developer.android.com\/reference\/android\/animation\/LayoutTransition\">LayoutTransition<\/a>, (<a href=\"https:\/\/developer.android.com\/training\/transitions\/\">Animate layout changes using a transition<\/a>)<\/li>\n<li><a href=\"https:\/\/developer.android.com\/reference\/android\/support\/design\/widget\/CoordinatorLayout\">CoordinatorLayout<\/a>(<a href=\"https:\/\/blog.bsk.im\/2015\/08\/18\/introducing-android-design-support-library\/\">\ub514\uc790\uc778 \uc11c\ud3ec\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/a>)<\/li>\n<\/ul>\n<p>MotionLayout\uc740 \uae30\uc874\uc758 \ubc29\uc2dd\uacfc\ub294 \ub2e4\ub974\uac8c \ub808\uc774\uc544\uc6c3 \ub450\uac1c\ub97c \ub9cc\ub4e0 \ub4a4, \ub450 \ub808\uc774\uc544\uc6c3 \uc0ac\uc774\uc758 \uc804\ud658\ud6a8\uacfc\ub97c \uc815\uc758\ud569\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\ub418\ub294 \ud504\ub808\uc784\ub4e4\uc744 \ud0d0\uc0c9\uac00\ub2a5\ud558\uba70, \ud654\uba74 \ud130\uce58 \uc870\uc791\uacfc \ud0a4\ud504\ub808\uc784 \ubc0f \uac01\uc885 \ud654\uba74\uc804\ud658\ud6a8\uacfc\ub4f1\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n<p>MotionLayout\uc740 \ubcc4\ub3c4\uc758 Java\/Kotlin \ucf54\ub4dc \uc791\uc131\uc5c6\uc774\ub3c4 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ub0bc\uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6d0\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c xml\ub9cc \uc120\uc5b8\ud574\uc8fc\uba74 \ub429\ub2c8\ub2e4. \ud604\uc7ac\ub294 \uacf5\uac1c\ub418\uc9c0 \uc54a\uc558\uc9c0\ub9cc \ucd94\ud6c4\uc5d0\ub294 \uc544\ub798\uc640 \uac19\uc740 \ud234\ub3c4 \uc4f8 \uc218 \uc788\uac8c \ub420 \uac83\uc785\ub2c8\ub2e4.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*--BinUe-6XZPrZhPys6mzA.gif\" width=\"700\" height=\"407\" class=\"alignnone size-large\" \/><\/p>\n<h2>\uc81c\uc57d\uc0ac\ud56d\u00a0<\/h2>\n<ul>\n<li>API Level 18 \uc774\uc0c1 \uc9c0\uc6d0 (\uc804\uccb4 \uc548\ub4dc\ub85c\uc774\ub4dc \uc0ac\uc6a9\uc790\uc758 <a href=\"https:\/\/developer.android.com\/about\/dashboards\/\">95.9%<\/a>)<\/li>\n<li>TransitionManager\uc640\ub294 \ub2ec\ub9ac, MotionLayout\uc740 \uc911\ucca9 \ub41c \ub808\uc774\uc544\uc6c3 \uacc4\uce35\ubfd0\ub9cc \uc544\ub2c8\ub77c Activity Transition\uc5d0\uc11c\ub3c4 \uc791\ub3d9 \ud560 \uc218 \uc788\ub294 \uc9c1\uc811\uc801\uc778 \uc790\uc2dd\ubdf0\uc5d0 \ub300\ud55c \uae30\ub2a5\ub4e4\ub3c4 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h2>\uc5b8\uc81c \uc4f0\uba74 \uc88b\uc744\uae4c?<\/h2>\n<p>MotionLayout\uc740 UI\ub97c \uc6c0\uc9c1\uc774\uac70\ub098 \uc0ac\uc774\uc988\ub97c \uc870\uc808\ud558\uace0 \uc2f6\uc744\ub54c \uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubc84\ud2bc, \uc774\ubbf8\uc9c0, \ud0c0\uc774\ud2c0 \uc601\uc5ed \ub4f1 \uc0ac\uc6a9\uc790\uc758 \uc870\uc791\uacfc \uc9c1\uc811\uc801\uc73c\ub85c \uc0c1\ud638\uc791\uc6a9 \ud560 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uc0d8\ud50c\ud504\ub85c\uc81d\ud2b8\ub97c \ub2e4\uc6b4\ubc1b\uc544 \ud14c\uc2a4\ud2b8 \ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n<p>\uc0d8\ud50c : <a href=\"https:\/\/github.com\/googlesamples\/android-ConstraintLayoutExamples\">https:\/\/github.com\/googlesamples\/android-ConstraintLayoutExamples<\/a><\/p>\n<h2>\ud504\ub85c\uc81d\ud2b8\uc5d0 MotionLayout \uc801\uc6a9\ud574\ubcf4\uae30<\/h2>\n<p>app\ubaa8\ub4c8 \ub808\ubca8\uc758 gradle\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc774 \ucd94\uac00\ud574\uc8fc\uc138\uc694.<\/p>\n<pre class=\"lang:java decode:true\">dependencies {\r\n    implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'\r\n}<\/pre>\n<h2>MotionLayout\uc758 \uc791\ub3d9 \uc6d0\ub9ac<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/2000\/1*ht1WQDkxsoeINtC2pwSfig.png\" width=\"973\" height=\"709\" class=\"alignnone size-large\" \/><\/p>\n<p>MotionLayout\uc758 \uac00\uc7a5 \ud070 \ud2b9\uc9d5\uc774\uc790 \uc7a5\uc810\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \uad00\ub828 \ub0b4\uc6a9\uc744 \ubcc4\ub3c4\uc758 xml\ub85c \ubd84\ub9ac(\ubaa8\ub4c8\ud654,\uc7ac\uc0ac\uc6a9) \ud558\uc5ec \uc0ac\uc6a9\ud55c\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4.<\/p>\n<p>MotionLayout\uc740 ConstraintLayout\uc744 \uc0ac\uc6a9\ud560\ub54c\ucc98\ub7fc \ud654\uba74\uc5d0 \ud45c\ud604\ud558\uace0 \uc2f6\uc740 View\ub4e4\uacfc MotionHelper\ub9cc\uc744 \ud3ec\ud568 \ud569\ub2c8\ub2e4. (MotionHelper\ub294 \uc0d8\ud50c\ud504\ub85c\uc81d\ud2b8\uc758 21\ubc88 FadeIn \ucc38\uc870) \ub3c5\ub9bd\ub41c MotionScene\uc73c\ub85c \ubd80\ud130 \ud654\uba74 \ud130\uce58\uc5d0 \ub300\ud55c \uc815\uc758, \ud0a4\ud504\ub808\uc784\uc5d0 \ub300\ud55c \uc815\uc758, \ubdf0 \uc18d\uc131\uc5d0 \ub300\ud55c \uc815\uc758\ub4f1\uc744 \uc120\uc5b8\ud560 \uc218 \uc788\uc73c\uba70 MotionLayout\uc740 app:layoutDescription\uc774\ub77c\ub294 \uc18d\uc131\uc5d0 MotionScene\uc5d0 \ub300\ud55c \uc544\uc774\ub514\ub9cc\uc744 \ucc38\uc870\ud558\uc5ec \uc0ac\uc6a9\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n<p>\uac01 \ud30c\uce20\uac00 \uc5b4\ub5a4 \uc5ed\ud560\uc744 \ud558\ub294\uc9c0 \ud558\ub098\uc529 \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>&lt;MotionLayout&gt;<\/h3>\n<p>MotionScene\uc5d0\uc11c \uc815\uc758\ub41c ConstraintSet\uc5d0 \uc758\ud574 \ub808\uc774\uc544\uc6c3\uac04 \ud654\uba74\uc804\ud658\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. <br \/>\n\uadf8\ub7ec\ubbc0\ub85c MotionScene\ud30c\uc77c \uc5f0\uacb0\uc774 \ud544\uc218\uc801\uc73c\ub85c \ud544\uc694\ud558\uba70, \uc5f0\uacb0\uc2dc\uc5d0\ub294 &#8220;layoutDescription&#8221;\uc5d0 \ub9ac\uc18c\uc2a4 \uc544\uc774\ub514\ub85c \uc5f0\uacb0\ud569\ub2c8\ub2e4.<\/p>\n<h3>&lt;MotionScene&gt;<\/h3>\n<p>MotionScene\uc740 ConstraintSet, \ud0a4\ud504\ub808\uc784, \ud130\uce58 \uc870\uc791, \ud654\uba74\uc804\ud658 \ud6a8\uacfc\ub4f1\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc815\ubcf4\ub97c \ud3ec\ud568\ud55c xml \ud30c\uc77c\uc774\uba70\u00a0<strong><em>res \/ xml\u00a0<\/em><\/strong>\ud3f4\ub354\uc5d0 \uc800\uc7a5\ub418\uc5b4\uc57c\ud569\ub2c8\ub2e4.<\/p>\n<h3>&lt;Transition&gt;<\/h3>\n<p>MotionScene\ub0b4\uc5d0\uc11c \uc815\uc758 \ub418\uba70,\u00a0 \ud654\uba74\uc744 \uc5b4\ub5a4\uc2dd\uc73c\ub85c \uc804\ud658\uc2dc\ud0ac\uc9c0\uc5d0 \ub300\ud55c \uc815\uc758\ub97c \ud569\ub2c8\ub2e4.\u00a0<\/p>\n<ul>\n<li>constraintSetStart : \uccab\ubc88\uc9f8 \ud504\ub808\uc784\uc774 \ub420 \uc81c\uc57d\uc870\uac74\uc744 \uc815\uc758\ud55c \ub808\uc774\uc544\uc6c3 \ub610\ub294 ConstraintSet\uc758 \uc544\uc774\ub514\ub97c \ucc38\uc870\ud569\ub2c8\ub2e4.<\/li>\n<li>constraintSetEnd : \ub9c8\uc9c0\ub9c9 \ud504\ub808\uc784\uc774 \ub420 \uc81c\uc57d\uc870\uac74\uc744 \uc815\uc758\ud55c \ub808\uc774\uc544\uc6c3 \ub610\ub294 ConstraintSet\uc758 \uc544\uc774\ub514\ub97c \ucc38\uc870\ud569\ub2c8\ub2e4.<\/li>\n<li>interpolator : \uc8fc\uc5b4\uc9c4 \uc2dc\uac04\ub0b4\uc5d0\uc11c \uc5b4\ub5a4\uc2dd\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc18d\ub3c4\ub97c \uc870\uc808\ud560\uac74\uc9c0 \uc815\uc758\ud569\ub2c8\ub2e4. (\uc608 : easeInOut, linear)<\/li>\n<li>duration : \ud654\uba74\uc804\ud658 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc218\ud589\ud558\ub294 \uc2dc\uac04\uc5d0 \ub300\ud55c \uae38\uc774\ub97c \uc815\uc758\ud569\ub2c8\ub2e4.<\/li>\n<li>staggered : 0\ubd80\ud130 1\uae4c\uc9c0 float \uac12\uc774 \ub4e4\uc5b4\uac00\uba70, duration\ub0b4\uc5d0\uc11c staggered\uc758 \uac12\uc758 \ube44\uc728\ub9cc\ud07c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc9c0\uc5f0\uc2dc\ucf30\ub2e4\uac00 \ube60\ub974\uac8c \ub0a8\uc740 \ud504\ub808\uc784\ub4e4\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\uc2dc\ud0b5\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 duration\uc758 \uac12\uc774 5\uc774\uace0 staggered\uc758 \uac12\uc740 0.2\ub77c\uace0 \uac00\uc815\ud558\uba74 1\ucd08\uc815\ub3c4 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc9c0\uc5f0\uc2dc\ucf30\ub2e4\uac00 4\ucd08\ub9cc\uc5d0 \ubaa8\ub4e0 \ud504\ub808\uc784\uc744 \uc2e4\ud589\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h3>&lt;OnSwipe&gt;<\/h3>\n<p>Transition\ub0b4\uc5d0\uc11c \uc815\uc758 \ub429\ub2c8\ub2e4. \uc190\ub05d\uc758 \uc6c0\uc9c1\uc784\uacfc \ud654\uba74\uc804\ud658\uc744 \uc77c\uce58 \uc2dc\ucf1c\uc8fc\ub294 \ud578\ub4e4\ub7ec\uc785\ub2c8\ub2e4. \uba87\uac00\uc9c0 \uc124\uc815\ud574\uc57c\ud558\ub294 \uc18d\uc131\ub4e4\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>touchAnchorId : \ucd94\uc801\ud558\uace0 \uc2f6\uc740 \uc624\ube0c\uc81d\ud2b8 \uc544\uc774\ub514<\/li>\n<li>touchAnchorSide : \ucd94\uc801\ud558\uace0 \uc2f6\uc740 \uc624\ube0c\uc81d\ud2b8\uc758 \uce21\uba74\ucabd\uc815\uc758. <strong>right<\/strong>, <strong>left<\/strong>, <strong>top<\/strong>, <strong>bottom<\/strong> \uc911 \ud0dd1<\/li>\n<li>dragDirection : \ucd94\uc801\ud558\uace0 \uc2f6\uc740 \ubaa8\uc158\uc758 \ubc29\ud5a5 \uc815\uc758. <strong>dragRight<\/strong>, <strong>dragLeft<\/strong>, <strong>dragUp<\/strong>, <strong>dragDown \uc73c\ub85c\u00a0<\/strong>\uc815\uc758 \ud560 \uc218 \uc788\ub2e4. MotionLayout\uc758 progress\uac00 0\ubd80\ud130 1\uae4c\uc9c0 \uc5b4\ub5bb\uac8c \ubcc0\ud654 \ud560\uac83\uc778\uc9c0\uc5d0 \ub300\ud55c \uc815\uc758\uc785\ub2c8\ub2e4.<\/li>\n<li>maxVelocity : touch up \ub420 \ub54c, \uc560\ub2c8\uba54\uc774\uc158\uc758 \ucd5c\ub300 \uc18d\ub825\uac12 \uc815\uc758<\/li>\n<li>maxAcceleration : touch up \ub420 \ub54c, \uc5bc\ub9c8\ub098 \ube68\ub9ac \uc560\ub2c8\uba54\uc774\uc158\uc774 \uac00\uc18d\ud558\uace0 \uac10\uc18d\ud558\ub294\uc9c0\uc5d0 \ub300\ud55c \uc815\uc758<\/li>\n<li>moveWhenScrollAtTop : true \ub610\ub290 false\ub300\uc785. RecyclerView\ub098 NestedScrollView\uac19\uc740 \uc2a4\ud06c\ub864 \uac00\ub2a5\ud55c \ubdf0\uac00 \uc2a4\ud06c\ub864\ub420 \ub54c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\uc2dc\ud0ac\uc9c0\uc5d0 \ub300\ud55c \uc815\uc758\uc785\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h3>&lt;OnClick&gt;<\/h3>\n<p>targetView\ub97c \ud074\ub9ad\ud588\uc744\ub54c \uc5b4\ub5a4 \ud654\uba74\uc804\ud658 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \ubcf4\uc5ec\uc904\uc9c0 \uc815\uc758\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>target : \ud654\uba74\uc804\ud658\uc744 \ud2b8\ub9ac\uac70\ud560 \ubdf0 \uc544\uc774\ub514<\/li>\n<li>mode : \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud55c \uc815\uc758\uc785\ub2c8\ub2e4.\n<ul>\n<li>transitionToEnd &#8211; \ud604\uc7ac \ud504\ub808\uc784\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158 \ub9c8\uc9c0\ub9c9\ucabd\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li>\n<li>transitionToStart &#8211; \ud604\uc7ac \ud504\ub808\uc784\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc758 \uc2dc\uc791\uc810\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li>\n<li>toggle &#8211; \ud604\uc7ac \ud504\ub808\uc784\uc5d0\uc11c \uc2dc\uc791\uc810 \ub610\ub294 \ub05d\uc810\uc73c\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud1a0\uae00\uc2dc\ud0a4\uba70 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/li>\n<li>jumpToEnd &#8211; \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\uc2dc\ud0a4\uc9c0 \uc54a\uace0 \ub9c8\uc9c0\ub9c9 \ud504\ub808\uc784\uc73c\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/li>\n<li>jumpToStart &#8211; \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\uc2dc\ud0a4\uc9c0\uc54a\uace0\u00a0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>&lt;KeyFrameSet&gt;<\/h3>\n<p>KeyFrame\uc744 \uc801\uc6a9\ud558\uba74 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ucee4\ube0c\ub97c \uc801\uc6a9\ud558\uac70\ub098 \ubaa8\ud551\uc744 \uc2dc\ub3c4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. KeyFrameSet\uc5d0 \uc801\uc6a9\ud560 \uc218 \uc788\ub294 \ud0dc\uadf8\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4<\/p>\n<ul>\n<li>KeyPosition<\/li>\n<li>KeyAttribute<\/li>\n<li>KeyCycle<\/li>\n<\/ul>\n<p>\uc544\ub798\uc758 \uc608\uc81c\ub97c \ud655\uc778\ud574\uc8fc\uc138\uc694<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;Transition ...&gt;\r\n    &lt;KeyFrameSet&gt;\r\n        &lt;KeyPosition\r\n            motion:keyPositionType=\"parentRelative\"\r\n            motion:percentY=\"0.25\"\r\n            motion:framePosition=\"50\"\r\n            motion:target=\"@+id\/button\"\/&gt;\r\n    &lt;\/KeyFrameSet&gt;\r\n&lt;\/Transition&gt;<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*jOmDbVPaNMiqZqCb9W6I3w.gif\" width=\"800\" height=\"450\" class=\"alignnone size-large\" \/><\/p>\n<h3>&lt;KeyPosition&gt;<\/h3>\n<p>\ud0a4\ud504\ub808\uc784\uc5d0\uc11c\uc758 \ubdf0\uc758 \uc704\uce58\ub97c \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>target : \ud0c0\uac9f \ubdf0\uc758 \uc544\uc774\ub514<\/li>\n<li>framePosition : \uc804\uccb4 \uc560\ub2c8\uba54\uc774\uc158\uc758 \ud504\ub808\uc784\uc744 100\uc774\ub77c\uace0 \uac00\uc815\ud560 \ub54c \ud0a4\ud504\ub808\uc784\uc774 \ub420 \ud504\ub808\uc784\uc758 \uc704\uce58\uc785\ub2c8\ub2e4. 0~100 \uc785\ub825<\/li>\n<li>transitionEasing : \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2e4\ud589\ub420\ub54c \uc644\ub9cc\ud55c \uace1\uc120\uc744 \uadf8\ub9ac\uae30 \uc704\ud55c \uac12\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.<\/li>\n<li><span>percentX, percentY : pathRelative\ub0b4\uc5d0\uc11c X\ucd95 \ub610\ub294 Y\ucd95\uc744 \ub530\ub77c \ube44\uc728\uc801\uc73c\ub85c \uac70\ub9ac\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<\/span><\/li>\n<li>curveFit : \uc9c1\uc120\uc744 \uae30\ubc18\uc73c\ub85c \ud558\ub294 \uacbd\ub85c(linear) \ub610\ub294 \ub2e8\uc870\ub85c\uc6b4 \uc2a4\ud50c\ub77c\uc778 \uace1\uc120\uc744 \uae30\ubc18\uc73c\ub85c \ud558\ub294 \uacbd\ub85c\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.(spline)<\/li>\n<li>drawPath : \ub514\ubc84\uae45\uc744 \uc704\ud574 \uacbd\ub85c\uac00 \ub098\ud0c0\ub0a9\ub2c8\ub2e4.<\/li>\n<li>sizePecent : \ubdf0 \uc0ac\uc774\uc988\ub97c \uc870\uc808\ud569\ub2c8\ub2e4.<\/li>\n<li>keyPositionType : \uc120\ud615 \uacbd\ub85c\uc5d0 \ub300\ud55c \ud0a4\ud504\ub808\uc784\uc758 \ud3b8\ucc28\ub97c \uacc4\uc0b0\ud558\ub294 \ubc29\ubc95\uc744 \uacb0\uc815\ud569\ub2c8\ub2e4.\n<ul>\n<li>deltaRelative : \uc2dc\uc791\/ \ub05d \uc704\uce58\ub97c \uacc4\uc0b0\ud558\uba70 \ubc31\ubd84\uc728\ub85c \ub098\ud0c0\ub0c5\ub2c8\ub2e4.<br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*lPeWWsomgV10QRFBT7i9kQ.png\" width=\"1070\" height=\"870\" class=\"alignnone size-large\" \/><br \/>\nparentRelative\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc0c1\ub300\uc801\uc73c\ub85c \uc9c1\uad00\uc801\uc778 \uc88c\ud45c\uacc4\uc774\uba70 \uc77c\ubc18\uc801\uc73c\ub85c\ub294 \uc88b\uc740 \uacb0\uacfc\ub97c \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \ubdf0\uac00 \uc218\ud3c9 \ub610\ub294 \uc218\uc9c1 \ub3d9\uc791\uc73c\ub85c \uc2dc\uc791\ub418\uac70\ub098 \ub05d\ub0a0\ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4.<br \/>\n\uc7a0\uc7ac\uc801\uc778 \ubb38\uc81c\uac00 \ud558\ub098 \uc788\ub294\ub370, \uc704\uc82f\uc758 \uc2dc\uc791 \uc704\uce58\uc640 \ub05d \uc704\uce58\uc758 \ucc28\uc774\uc5d0 \ub530\ub77c \uc815\uc758\ub418\ubbc0\ub85c \ucc28\uc774\uac00 \ub9e4\uc6b0 \uc791\uac70\ub098 0\uc778 \uacbd\uc6b0 \uc601\ud5a5\uc744 \ubc1b\ub294 \ucd95\uc5d0\uc11c \ud0a4 \ud504\ub808\uc784\uc758 \uc704\uce58\uac00 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ubdf0\uac00 \ud654\uba74\uc758 \uc67c\ucabd\uc5d0\uc11c \uc624\ub978\ucabd\uc73c\ub85c \uc774\ub3d9\ud558\uba74\uc11c \ub3d9\uc77c\ud55c \ub192\uc774\uc5d0 \uba38\ubb34\ub974\ub294 \uacbd\uc6b0 \uc704\uce58 \ud0a4\ud504\ub808\uc784\uc5d0 deltaRelative percentY\ub97c \uc0ac\uc6a9\ud574\ubd10\uc57c \uc544\ubb34\ub7f0 \uc77c\uc774 \uc77c\uc5b4\ub098\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/li>\n<li>pathRelative : \uc2dc\uc791 \uc0c1\ud0dc\uc640 \ub05d \uc0c1\ud0dc \uc0ac\uc774\uc758 \uc9c1\uc120 \uacbd\ub85c\ub97c \uae30\uc900\uc73c\ub85c \uc815\uc758 \ub429\ub2c8\ub2e4. deltaRelative\ub97c \uc88c\ud45c\uacc4\ub85c \uc0ac\uc6a9\ud588\uc744\ub54c \uc0dd\uae30\ub358 \ubb38\uc81c\uc810\uc744 \ud574\uacb0\ud560 \uc218 \uc788\uc73c\uba70, \uc138\ub85c \ucd95\uc5d0\uc11c \uc774\ub3d9\ud558\uc9c0 \uc54a\ub294 \uc704\uc82f\uc5d0\uc11c\ub3c4 pathRelative\ub97c \uc0ac\uc6a9\ud558\uba74 \uc704\uce58 \ud0a4 \ud504\ub808\uc784\uc744 \uc774\ud0c8 \uacbd\ub85c\ub85c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. -\uc88c\ud45c\ub3c4 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ub05d\uc810\uc774 \ubcc0\uacbd \ub418\ub354\ub77c\ub3c4 \uc77c\uc815\ud558\uac8c \uc720\uc9c0\ub418\ub294 \uace1\uc120 \ubaa8\uc591(\uc608 : &#8220;S&#8221;\ubaa8\uc591)\uc744 \uc5bb\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*CEBdlTMmXanZBg96IFDhLg.png\" width=\"1070\" height=\"870\" class=\"alignnone size-large\" \/><\/li>\n<li>parentRelative : \uc88c\ud45c\uac00 \ubd80\ubaa8 \ucee8\ud14c\uc774\ub108 \uae30\uc900\uc73c\ub85c \ud45c\ud604\ub429\ub2c8\ub2e4. \ud0a4\ud504\ub808\uc784\uc758 \uc704\uce58\ub97c \ud45c\ud604\ud558\ub294 \ub9e4\uc6b0 \uc9c1\uad00\uc801\uc778 \ubc29\ubc95\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \ucee8\ud14c\uc774\ub108\uc5d0 \uc0c1\ub300\uc801\uc774\uc5ec\uc57c \ud558\ub294 \uacc4\uc0b0\uc744 \ud560 \ub54c \uc774 \ubc29\ubc95\uc744 \uc774\uc6a9\ud569\ub2c8\ub2e4.<br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*PgRVDmgacQFedFr9X1oRpQ.png\" width=\"1070\" height=\"870\" class=\"alignnone size-large\" \/><br \/>\n\uc774 \uc88c\ud45c\uacc4\ub294 \ubd80\ubaa8 \uc704\uce58\uc5d0\ub9cc \uae30\ubc18\uc744 \ub450\uace0\uc788\uae30 \ub54c\ubb38\uc5d0 , \uacb0\uacfc\uc801\uc73c\ub85c \ud0a4\ud504\ub808\uc784\uc758 \uc704\uce58\uac00 \ucc28\uc120\uc801 \uc704\uce58(\uc2dc\uc791\/\ub05d \uc704\uce58\uc5d0 \uc0c1\ub300\uc801)\ub85c \ub05d\ub098\ub294 \uc0c1\ud669\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<li>pathMotionArc : \ub465\uadfc \ud65c\ubaa8\uc591\uc744 \uc5b4\ub5bb\uac8c \uadf8\ub9b4\uc9c0 \uc815\uc758\ud569\ub2c8\ub2e4. (none, flip, startHorizontal, startVertical)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>&lt;KeyAttribute&gt;<\/h3>\n<p>KeyFrame\ub0b4\uc5d0\uc11c KeyPosition\uacfc \ube44\uc2b7\ud55c \uc5ed\ud560\uc744 \ud558\uc9c0\ub9cc Position\uc774 \uc544\ub2cc Attribute(\uc18d\uc131)\uc5d0 \uad00\uc5ec \ud55c\ub2e4.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;KeyFrameSet&gt;\r\n    &lt;KeyAttribute\r\n        android:scaleX=\"2\"\r\n        android:scaleY=\"2\"\r\n        android:rotation=\"-45\"\r\n        motion:framePosition=\"50\"\r\n        motion:target=\"@id\/button\" \/&gt;\r\n&lt;\/KeyFrameSet&gt;<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*tBmw-3uA2IcXZCtRBmMarA.gif\" width=\"800\" height=\"450\" class=\"alignnone size-large\" \/><\/p>\n<ul>\n<li>KeyFrame\uacfc \ube44\uc2b7\ud55c \uc18d\uc131\uc744 \uac00\uc9c0\uace0 \uc788\uc74c( target, framePosition, curveFit, transitionEasing, transitionPathRotate, drawPath, progress)<\/li>\n<li>View\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 attribute\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc74c. (visibility, alpha, elevation, rotation, rotationX, rotationY, scaleX, scaleY, translationX, translationY, translationZ)<br \/>\nelevation\uacfc translationZ\ub294 API Level 21 \uc774\uc0c1\uc5d0\uc11c \uc0ac\uc6a9\uac00\ub2a5\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n<h3>&lt;ConstraintSet&gt;<\/h3>\n<p>ConstraintSet\uc758 \uae30\ubcf8\uc801\uc778 \uac1c\ub150\uc740 \ubaa8\ub4e0 \ub808\uc774\uc544\uc6c3 \uc704\uce58\uc5d0 \ub300\ud574 \ucea1\uc290\ud654\ub97c \ud558\ub294 \uac83\uc785\ub2c8\ub2e4. View\ub97c \uc7ac\uc0dd\uc131\ud560 \ud544\uc694 \uc5c6\uc774 View\uc5d0 \ub300\ud55c \uc704\uce58 \ubc0f \uc218\uce58\ub9cc \ubc14\uafc0 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\u00a0<\/p>\n<p>TransitionManager\uc640 \ud568\uaed8 \ub3d9\uc791\ud558\uba70 MotionLayout\uc758 \uac00\uc7a5 \uae30\ucd08\uc801\uc778 \ubd80\ubd84\uc774 \ub429\ub2c8\ub2e4.<\/p>\n<p>\uc5ec\ub7ec\uac1c\uc758 &lt;Constraint&gt;\ub97c \ud3ec\ud568\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h3>&lt;Constraint&gt;<\/h3>\n<p>\ud2b9\uc815 \ubdf0\uc5d0 \uc704\uce58\ub098 \ud06c\uae30\uc5d0 \ub300\ud55c \ub300\ud55c \uc81c\uc57d\uc870\uac74\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>View Attribute + ConstraintLayout Attribute \uc815\uc758<\/li>\n<li>transitionEasing : \uc774 \uc9c0\uc810\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9\ud560 \ub54c \uc0ac\uc6a9\ud560 \uc644\ub9cc\ud55c \uace1\uc120 \uc815\uc758<\/li>\n<li>transitionPathRotate : float \uac12\uc744 \ub300\uc785. \uc624\ube0c\uc81d\ud2b8\ub97c \uc0c1\ub300\uc801\uc73c\ub85c \ud68c\uc804<\/li>\n<li>drawPath : \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc791\ub3d9\ub420 \uc704\uce58\uc758 path\uac00 \ub098\ud0c0\ub0a8. \ud14c\uc2a4\ud2b8\ubaa9\uc801\uc774\uba70 \uc2e4\uc81c \ucd9c\uc2dc\ub420 \uc571\uc5d0\ub294 \ub098\uc624\uc9c0 \uc54a\ub294\uac83\uc774 \uc88b\ub2e4.<\/li>\n<li>progress : \ud574\ub2f9\ubdf0\uc758 setProgress(float)\ub97c \ud638\ucd9c\ud55c\ub2e4.<\/li>\n<\/ul>\n<h3>&lt;CustomAttribute&gt;<\/h3>\n<p><img decoding=\"async\" class=\"progressiveMedia-image js-progressiveMedia-image\" data-src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*J4wdLZ8zoaTsQ8f6oC3SMA.png\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*J4wdLZ8zoaTsQ8f6oC3SMA.png\" \/><\/p>\n<p>&lt;Constraint&gt;\uc5d0 \uc18d\ud558\uba70 \ubdf0\uc5d0 \ub300\ud55c \uc18d\uc131\uc744 \ubcc0\uacbd\uc2dc\ud0ac \uc218 \uc788\ub2e4. start\ub418\ub294 constraint\uc5d0\uc11c \uc815\uc758\ud588\ub2e4\uba74\u00a0 end\ucabd\ub3c4 \uc815\uc758\ud574\uc57c\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>attributeName : \uc18d\uc131\uc5d0 \ub300\ud55c \uc774\ub984. Case senstive\ud558\ub2e4. BackgroundColor\ub77c\uace0 \uc801\uc73c\uba74 setBackgroundColor\uba54\uc18c\ub4dc\ub97c \ucc3e\uac8c \ub41c\ub2e4.<\/li>\n<li>\uc785\ub825\uc5d0 \ub300\ud55c \uac12\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud0c0\uc785\uc73c\ub85c \uc815\uc758 \ub420 \uc218 \uc788\ub2e4.\n<ul>\n<li>customColorValue<\/li>\n<li>customIntegerValue<\/li>\n<li>customFloatValue<\/li>\n<li>customStringValue<\/li>\n<li>customDimension<\/li>\n<li>customBoolean<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Conclusion<\/h2>\n<blockquote>\n<p style=\"text-align: center;\">\uc544\uc9c1 Alpha \ub2e8\uacc4\uc758 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub77c \uad00\ub828 \uc790\ub8cc\uac00 \ud131\uc5c6\uc774 \ubd80\uc871\ud558\uba70, \uad6c\uae00 \uc548\ub4dc\ub85c\uc774\ub4dc \uac1c\ubc1c\uc790 Nicolas Roard\uc758 \ud3ec\uc2a4\ud305\uc744 \ucc38\uc870\ud55c\uac83\uc774 9\ud560\uc785\ub2c8\ub2e4. (<a href=\"https:\/\/medium.com\/google-developers\/introduction-to-motionlayout-part-i-29208674b10d\">part1<\/a>, <a href=\"https:\/\/medium.com\/p\/a31acc084f59\">part2<\/a>, <a href=\"https:\/\/medium.com\/p\/47cd64d51a5\">part3<\/a>, <a href=\"https:\/\/medium.com\/google-developers\/defining-motion-paths-in-motionlayout-6095b874d37\">part4<\/a>\u00a0\ucd94\ud6c4 \ub354 \ud3ec\uc2a4\ud305 \uc608\uc815\uc778\ub4ef \ud569\ub2c8\ub2e4.)\u00a0 MotionLayout\uc73c\ub85c \ubd80\ud130 \ub098\uc624\ub294 \uc0b0\ucd9c\ubb3c\ub4e4\uc774 Awesome\uc778\uc9c0\ub77c \uc790\uafb8\uc790\uafb8 \ud30c\ubcf4\uac8c \ub429\ub2c8\ub2e4.<br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2018\/08\/ezgif.com-resize.gif\" alt=\"\" width=\"450\" height=\"450\" class=\"aligncenter size-full wp-image-721\" \/>CoordinatorLayout \uc5c6\uc774 \ub9cc\ub4e0 \ud654\uba74<\/p>\n<\/blockquote>\n<p>\uc9c1\uc811 \uc0d8\ud50c \ud504\ub85c\uc81d\ud2b8 \ud14c\uc2a4\ud2b8\ud574\ubcf4\uace0, \uac1c\uc778\uc801\uc73c\ub85c \uc774\ub7f0 \uc800\ub7f0 \ud14c\uc2a4\ud2b8\ud574\ubcf8 \uacb0\uacfc \uc544\uc9c1 \uc560\ub2c8\uba54\uc774\uc158 \uad00\ub828\ud574\uc11c \ub9e4\ub044\ub7fd\uc9c0 \uc54a\uc740 \ubd80\ubd84\uc774 \ub9ce\uc774 \ubcf4\uc774\uc9c0\ub9cc,\u00a0 \uc815\uc2dd\ubc84\uc804\uc73c\ub85c \ub9b4\ub9ac\uc988 \ub420\ub54c\ub294 \ub9ce\uc740\uac83\ub4e4\uc774 \uc218\uc815\ub418\uace0 \uc548\uc815\ud654 \ub420\uac83\uc774\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>MotionLayout\uc73c\ub85c \ub9cc\ub4dc\ub294 \uc560\ub2c8\uba54\uc774\uc158 ConstraintLayout 2.0\uc774 \ucd9c\uc2dc \ub418\uba74\uc11c MotionLayout\uc774\ub77c\ub294 \uc0c8\ub85c\uc6b4 \ub808\uc774\uc544\uc6c3\uc774 \ub4f1\uc7a5\ud588\uc2b5\ub2c8\ub2e4. MotionLayout\uc740 ConstrainLayout\uc744 \uc0c1\uc18d\ud55c \ub808\uc774\uc544\uc6c3\uc73c\ub85c \uc0c8\ub85c\uc6b4 \ubc29\uc2dd\uc73c\ub85c \ub3d9\uc801\uc778 \ud654\uba74\uc744 \uad6c\uc131\ud569\ub2c8\ub2e4. \uae30\uc874\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uad6c\ud604\ud558\uae30\uc704\ud574\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uae30\uc220\ub4e4\uc744 \uc801\uc6a9\ud588\uc5c8\uc2b5\ub2c8\ub2e4. AnimatedVectorDrawable( \ubaa8\ud551 \uc560\ub2c8\uba54\uc774\uc158 \ubc84\ud2bc \ub9cc\ub4e4\uae30 ) Property Animation LayoutTransition, (Animate layout changes using a transition) CoordinatorLayout(\ub514\uc790\uc778 \uc11c\ud3ec\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac) MotionLayout\uc740 \uae30\uc874\uc758 \ubc29\uc2dd\uacfc\ub294 \ub2e4\ub974\uac8c \ub808\uc774\uc544\uc6c3 [&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":[16],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/717"}],"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=717"}],"version-history":[{"count":4,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/717\/revisions"}],"predecessor-version":[{"id":724,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/717\/revisions\/724"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}