{"id":136,"date":"2018-03-28T14:15:47","date_gmt":"2018-03-28T05:15:47","guid":{"rendered":"http:\/\/oksisi2.ddns.net:8092\/wordpress\/?p=136"},"modified":"2018-03-28T14:15:47","modified_gmt":"2018-03-28T05:15:47","slug":"animatedvectordrawable-turn-record-button-into-stopbutton","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=136","title":{"rendered":"(AnimatedVectorDrawable) Turn Record Button into StopButton"},"content":{"rendered":"

AnimatedVectorDrawable?<\/h2>\n

AnimatedVectorDrawable \ud074\ub798\uc2a4\ub294 VectorDrawable, ObjectAnimator \ub610\ub294 AnimatorSet\uacfc \ud568\uaed8 \ub3d9\uc791\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc \uc8fc\ub294 \ud074\ub798\uc2a4\uc785\ub2c8\ub2e4
\nAPI25\ub808\ubca8 \uc774\uc804\uc5d0\ub294 \u00a0UI \uc4f0\ub808\ub4dc\uc5d0\uc11c \ub3d9\uc791\ud588\ub358\uac83\uacfc\ub294 \ub2ec\ub9ac, API 25\ub808\ubca8\ubd80\ud130\ub294 RenderThread\uc5d0\uc11c \ub3d9\uc791\ud569\ub2c8\ub2e4.
\n\uadf8\ub798\uc11c UI \uc4f0\ub808\ub4dc\uc5d0 \uc791\uc5c5\ub7c9\uc774 \ub9ce\uc544\ub3c4 \ub3d9\uc791\uc774 \ub9e4\uc6b0 \ubd80\ub4dc\ub7fd\uc2b5\ub2c8\ub2e4.
\nUI\uc4f0\ub808\ub4dc\uac00 \uc751\ub2f5\ud558\uc9c0 \uc54a\uc544\ub3c4 UI\uc4f0\ub808\ub4dc\uac00 \ub2e4\uc74c \ud504\ub808\uc784\uc744 \ucc98\ub9ac\ud560\uc218 \uc788\uc744 \ub54c\uae4c\uc9c0 \uacc4\uc18d \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n\ub530\ub77c\uc11c RenderThread \uac00 \ud65c\uc131\ub41c AnimatedVectorDrawable\uacfc UI \uc4f0\ub808\ub4dc \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc815\ud655\ud558\uac8c \ub531 \uc870\uc728\ud558\uae30\ub294 \ud798\ub4ed\ub2c8\ub2e4.
\n\ucd94\uac00\uc801\uc73c\ub85c \ub80c\ub354\uc4f0\ub808\ub4dc\uc5d0\uc11c \ub3d9\uc791\ud558\ub294\u00a0AnimatedVectorDrawable\uc774 \ub9c8\uc9c0\ub9c9\ud504\ub808\uc784\uc774 \ub05d\ub098\uba74 OnAnimationEnd(Drawable)\uc774 \ud638\ucd9c\ub429\ub2c8\ub2e4.
\n 
\nFor more details :
\nhttps:\/\/developer.android.com\/reference\/android\/graphics\/drawable\/AnimatedVectorDrawable.html?hl=ko<\/a>
\n <\/p>\n

\ub179\ud654 \ubc84\ud2bc \uc911\uc9c0 \ubc84\ud2bc \ubaa8\ud551 \uc560\ub2c8\uba54\uc774\uc158 \ub9cc\ub4e4\uc5b4 \ubcf4\uae30<\/h2>\n

\"\"<\/a>
\n 
\n <\/p>\n

path data \uc815\uc758 \ud558\uae30<\/h3>\n

\uacbd\ub85c: res\/values\/paths.xml<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<resources>\n    <string name=\"path_circle\">M 2,6\n        C 2,3.8 3.8,2 6,2\n        C 8.2,2 10,3.8 10,6\n        C 10,8.2 8.2,10 6,10\n        C 3.8,10 2,8.2 2,6<\/string>\n    <string name=\"path_rounded_rectangle\">M 3,6\n        C 3,3 3,3 6,3\n        C 9,3 9,3 9,7\n        C 9,9 9,9 7,9\n        C 3,9 3,9 3,7<\/string>\n<\/resources><\/pre>\n
\uc6d0\uacfc \ubaa8\uc11c\ub9ac\uac00 \ub465\uadfc \uc0ac\uac01\ud615\uc744 \ubca1\ud130\ub85c \uadf8\ub9ac\uae30 \uc704\ud55c path data \ub97c \uc815\uc758 \ud574\uc90d\ub2c8\ub2e4.
\nNote: \ub450\uac1c\uc758 \ubaa8\uc591\uc774 \ub2e4\ub978 \uc250\uc774\ud504\ub97c \ubaa8\ud551\uc744 \ud558\ub294 \uacbd\uc6b0 path data\uc758 \uc885\ub958\ub098 \uac2f\uc218\uac00 \uc815\ud655\ud558\uac8c \uc77c\uce58\ud574\uc57c\ub9cc \ud569\ub2c8\ub2e4.
\n <\/p>\n
VectorDrawable \ub9cc\ub4e4\uae30<\/h3>\n
\uacbd\ub85c : res\/drawable\/vector_record.xml<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<vector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:width=\"35dp\"\n    android:height=\"35dp\"\n    android:viewportHeight=\"12\"\n    android:viewportWidth=\"12\">\n    <group\n        android:pivotX=\"6\"\n        android:pivotY=\"6\">\n        <path\n            android:name=\"circle\"\n            android:fillColor=\"@color\/red\"\n            android:pathData=\"@string\/path_circle\" \/>\n    <\/group>\n    <group\n        android:pivotX=\"6\"\n        android:pivotY=\"6\"\n        android:scaleX=\"1.3\"\n        android:scaleY=\"1.3\">\n        <path\n            android:name=\"outer\"\n            android:pathData=\"@string\/path_circle\"\n            android:strokeColor=\"@android:color\/black\"\n            android:strokeWidth=\"0.4\" \/>\n    <\/group>\n<\/vector><\/pre>\n
<vector>\ud0dc\uadf8\ub97c \uc774\uc6a9\ud558\uc5ec VectorDrawable\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n<group>\ud0dc\uadf8\ub294 \ud328\uc2a4\ub4e4\uc758 \uc9d1\ud569\uc785\ub2c8\ub2e4. pivot\uc774\ub098 scale\ub4f1\uc758 \uc18d\uc131\uc744 \uc124\uc815\uc744 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n<path>\ud0dc\uadf8\uc758 pathData \uc18d\uc131\uc5d0 \ubbf8\ub9ac \uc815\uc758 \ud574\ub454 shape(\uc6d0)\uc758 id\ub97c \ub123\uc2b5\ub2c8\ub2e4.
\nps: \uc800\ub9cc \uadf8\ub7f0\uc9c0 \ubaa8\ub974\uaca0\uc73c\ub098 pathData\uc5d0 id\ub85c \ucc38\uc870\ud558\ub294 \ubc29\uc2dd\uc744 \uc4f8\uacbd\uc6b0 preview\uc5d0 \uc81c\ub300\ub85c \ud45c\ud604\uc774 \ub418\uc9c0 \uc54a\ub294 \uacbd\uc6b0\uac00 \uc885\uc885 \ubcf4\uc600\uc2b5\ub2c8\ub2e4. \ub208\uc73c\ub85c \ubcf4\ub294\uac8c \uc911\uc694\ud558\ub2e4\uba74 path data\ub97c \uc9c1\uc811 \ub123\uc5b4\uc8fc\uba74 \ud574\uacb0\ub429\ub2c8\ub2e4.<\/em>
\n\uc774\uc81c \uc644\uc131\ub41c xml\uc744 \uc774\ubbf8\uc9c0\ubdf0\uc5d0 \ub123\uc73c\uba74 \uc6d0\ud615 \ub179\ud654 \ubc84\ud2bc\uc774 \ub098\uc624\ub294\uac83\uc744 \ud655\uc778\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc544\uc9c1 \uc6c0\uc9c1\uc774\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4. \uc560\ub2c8\uba54\uc774\ud130\ub97c \ucd94\uac00 \ud558\uc9c0 \uc54a\uc558\uc73c\ub2c8\uae4c\uc694.
\n\ub465\uadfc\uc0ac\uac01\ud615 \ubc84\ud2bc \uc124\uba85\uc740 \uc704 \uc124\uba85\uacfc \uac19\uc73c\ubbc0\ub85c \uc0dd\ub7b5\ud558\uaca0\uc2b5\ub2c8\ub2e4.
\n 
\nAnimatedVectorDrawable \ub9cc\ub4e4\uae30
\n\uacbd\ub85c :\u00a0res\/drawable\/vector_record.xml<\/p>\n
<animated-vector xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:aapt=\"http:\/\/schemas.android.com\/aapt\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:drawable=\"@drawable\/vector_record\"\n    tools:targetApi=\"lollipop\">\n    <target android:name=\"circle\">\n        <aapt:attr name=\"android:animation\">\n            <set\n                android:fillAfter=\"true\"\n                android:ordering=\"together\">\n                <objectAnimator\n                    android:interpolator=\"@android:anim\/linear_interpolator\"\n                    android:propertyName=\"pathData\"\n                    android:valueFrom=\"@string\/path_circle\"\n                    android:valueTo=\"@string\/path_rounded_rectangle\"\n                    android:valueType=\"pathType\" \/>\n            <\/set>\n        <\/aapt:attr>\n    <\/target>\n<\/animated-vector><\/pre>\n
drawable-v21 \ud3f4\ub354\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c lint \uc5d0\ub7ec\uac00 \ub0a0\uac81\ub2c8\ub2e4.\u00a0lollipop\uc774\uc0c1\uc5d0\uc11c\ub9cc \uc4f8\uc218 \uc788\uae30 \ub54c\ubb38\uc774\uc8e0. drawable\ud3f4\ub354\ub97c \ubc18\ub4dc\uc2dc \uc0ac\uc6a9\ud558\uace0 \uc2f6\ub2e4\uba74
\ntargetApi \ub97c \uc9c0\uc815\ud574\uc90d\ub2c8\ub2e4.
\ndrawable \uc18d\uc131\uc5d0\ub294 \uc704\uc5d0\uc11c \ubbf8\ub9ac \uc815\uc758\ud55c vector drawable \ub9ac\uc18c\uc2a4 id \ub97c \ub123\uc2b5\ub2c8\ub2e4.
\n 
\n<target>\ud0dc\uadf8\uc5d0\ub294 \uc704\uc5d0\uc11c \uc9c0\uc815\ud55c vectordrawable\uc744\uc5d0 \ub300\ud574 \uc5b4\ub5a4 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc9c0\uc815\ud560\uc9c0 \uc815\ud558\ub294 \uacf3\uc785\ub2c8\ub2e4.
\n\uc560\ub2c8\uba54\uc774\ud130\ub97c \uc9c0\uc815\ud574\uc57c\ud558\ub294\ub370 res\/anim\/\uc560\ub2c8\uba54\uc774\uc158. xml \ud30c\uc77c\uc744 \ub9cc\ub4e4\uae30 \uc2eb\uc5b4 \ubc14\ub85c \uc120\uc5b8\ud574\uc8fc\uc5c8\uc2b5\ub2c8\ub2e4.
\nfillafter\uc18d\uc131\uc740 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2e4\ud589\ud55c \ud6c4 \ub9c8\uc9c0\ub9c9 \ud504\ub808\uc784\uc0c1\ud0dc\ub85c \uc720\uc9c0\ud560 \uac83\uc778\uc9c0\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4.
\nordering\uc740 \uc560\ub2c8\uba54\uc774\ud130\uac00 \uc5ec\ub7ec\uac1c\uc778\uacbd\uc6b0 \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ud560\uac83\uc778\uc9c0\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4. \ub3d9\uc2dc\uba74 together \ud55c\uac1c\uc529\uc774\uba74 sequentially\ub97c \uc90d\ub2c8\ub2e4.
\n\ub4dc\ub514\uc5b4 <objectAnimator>\ud0dc\uadf8\uae4c\uc9c0 \uc654\uc2b5\ub2c8\ub2e4
\ninterpolator\uc5d0\ub294 \uc6d0\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ud0c0\uc785\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc804 \uadf8\ub0e5 \uc548\ub4dc\ub85c\uc774\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ub4e4\uc5b4\uac00\uc788\ub294 linear interpolator \ub97c \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4. \ub2e4\uc591\ud55c \ud6a8\uacfc\ub97c \uc8fc\uace0 \uc2f6\ub2e4\uba74 \uc9c1\uc811 \uc815\uc758 \ud574\uc11c \uc0ac\uc6a9\ud558\uba74 \ub418\uaca0\uc8e0?
\nvalueFrom \uc5d0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \uc2dc\uc791\ud560 path data\ub97c
\nvalueTo\uc5d0\ub294 \uc560\ub2c8\uba54\uc774\uc158\uc774 \ub05d\ub0a0 path data\ub97c \ub123\uc5b4\uc900\ub4a4 \ub098\uc911\uc5d0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc2e4\ud589\ud558\uba74 \uc790\ub3d9\uc73c\ub85c morphing\uc774 \ub429\ub2c8\ub2e4.
\n 
\n\uac70\uc758 \ub2e4\uc654\uc2b5\ub2c8\ub2e4.
\n 
\n\uc560\ub2c8\uba54\uc774\uc158 \uc2e4\ud589\ud574\ubcf4\uae30
\nres\/layout\/activity_main.xml<\/p>\n
<android.support.constraint.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\"com.oksisi213.animatedvectordrawablestudy.MainActivity\">\n    <ImageView\n        android:id=\"@+id\/record\"\n        android:layout_width=\"100dp\"\n        android:layout_height=\"100dp\"\n        android:src=\"@drawable\/anim_vector_record_to_stop\"\n        app:layout_constraintBottom_toTopOf=\"parent\"\n        app:layout_constraintLeft_toLeftOf=\"parent\"\n        app:layout_constraintRight_toRightOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n<\/android.support.constraint.ConstraintLayout><\/pre>\n
MainActivity.kt<\/p>\n
class MainActivity : AppCompatActivity() {\n   override fun onCreate(savedInstanceState: Bundle?) {\n      super.onCreate(savedInstanceState)\n      setContentView(R.layout.activity_main)\n      record.setOnClickListener {\n         if (record.tag == null) {\n            record.setImageResource(R.drawable.anim_vector_record_to_stop)\n            (record.drawable as AnimatedVectorDrawable).start()\n            record.tag = 0\n         } else {\n            record.setImageResource(R.drawable.anim_vector_stop_to_record)\n            (record.drawable as AnimatedVectorDrawable).start()\n            record.tag = null\n         }\n      }\n   }\n}<\/pre>\n
drawable\uac1d\uccb4\ub97c AnimateVectorDrawable\ub85c \uce90\uc2a4\ud305\ud558\uc5ec start()\ud574\uc8fc\uba74 \ub05d!
\n 
\ngit :\u00a0https:\/\/github.com\/Charlezz\/AnimatedVectorDrawableStudy.git<\/a>
\n\ucc38\uace0 :\u00a0https:\/\/www.androiddesignpatterns.com\/2016\/11\/introduction-to-icon-animation-techniques.html<\/a>
\n <\/p>\n","protected":false},"excerpt":{"rendered":"
AnimatedVectorDrawable? AnimatedVectorDrawable \ud074\ub798\uc2a4\ub294 VectorDrawable, ObjectAnimator \ub610\ub294 AnimatorSet\uacfc \ud568\uaed8 \ub3d9\uc791\ud558\ub294 \uc560\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc \uc8fc\ub294 \ud074\ub798\uc2a4\uc785\ub2c8\ub2e4 API25\ub808\ubca8 \uc774\uc804\uc5d0\ub294 \u00a0UI \uc4f0\ub808\ub4dc\uc5d0\uc11c \ub3d9\uc791\ud588\ub358\uac83\uacfc\ub294 \ub2ec\ub9ac, API 25\ub808\ubca8\ubd80\ud130\ub294 RenderThread\uc5d0\uc11c \ub3d9\uc791\ud569\ub2c8\ub2e4. \uadf8\ub798\uc11c UI \uc4f0\ub808\ub4dc\uc5d0 \uc791\uc5c5\ub7c9\uc774 \ub9ce\uc544\ub3c4 \ub3d9\uc791\uc774 \ub9e4\uc6b0 \ubd80\ub4dc\ub7fd\uc2b5\ub2c8\ub2e4. UI\uc4f0\ub808\ub4dc\uac00 \uc751\ub2f5\ud558\uc9c0 \uc54a\uc544\ub3c4 UI\uc4f0\ub808\ub4dc\uac00 \ub2e4\uc74c \ud504\ub808\uc784\uc744 \ucc98\ub9ac\ud560\uc218 \uc788\uc744 \ub54c\uae4c\uc9c0 \uacc4\uc18d \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc801\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c RenderThread \uac00 \ud65c\uc131\ub41c […]<\/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\/136"}],"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=136"}],"version-history":[{"count":0,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/136\/revisions"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}