{"id":1193,"date":"2017-03-02T13:59:10","date_gmt":"2017-03-02T20:59:10","guid":{"rendered":"http:\/\/markalldritt.com\/?p=1193"},"modified":"2017-03-02T13:59:10","modified_gmt":"2017-03-02T20:59:10","slug":"animated-record-button-with-paintcode","status":"publish","type":"post","link":"https:\/\/markalldritt.com\/?p=1193","title":{"rendered":"Animated Record Button with PaintCode"},"content":{"rendered":"<p>Here is an example of how to use <a href=\"https:\/\/www.paintcodeapp.com\">PaintCode<\/a> to create an animated button.<\/p>\n\n<p>The code for this project is available on <a href=\"https:\/\/github.com\/alldritt\/RecordButton\">GitHub<\/a>.<\/p>\n\n<h2>Background<\/h2>\n\n<p>I wanted to create a record\/stop button for a project I&#8217;m working on that mirrored the appearance of the record\/stop button found in Apple&#8217;s iOS Camera Video recorder and Voice Recorder applications.<\/p>\n\n<p><img src=\"http:\/\/markalldritt.com\/wp-content\/uploads\/2017\/03\/VoiceRecorder.gif\" alt=\"Voice Recorder\" \/><\/p>\n\n<h2>PaintCode Design<\/h2>\n\n<p>PaintCode makes creating simple designs like this very simple.<\/p>\n\n<p><img src=\"http:\/\/markalldritt.com\/wp-content\/uploads\/2017\/03\/PaintCode.gif\" alt=\"PaintCode\" \/><\/p>\n\n<p>I have a square canvas in which there are two concentric circles.  The outer circle is the button&#8217;s frame (white), and the inner circle is the tappable button (red).<\/p>\n\n<p>Using PaintCode&#8217;s expressions I have two parameters:<\/p>\n\n<ul>\n<li>isPressed, a boolean, controls the color used to draw the inner circle<\/li>\n<li>isRecording, a fraction (0.0->1.0) controls the transition of the inner circle from a circle to a smaller rounded square<\/li>\n<\/ul>\n\n<h2>The Code<\/h2>\n\n<p>When the button is tapped, isPressed is set to true until the tap ends.  When the tap ends, the value of isRecording is animated from 0.0 -> 1.0 or 1.0 to 0.0 depending on the state of the button.  That&#8217;s it.<\/p>\n\n<p>Here is the result:<\/p>\n\n<p><img src=\"http:\/\/markalldritt.com\/wp-content\/uploads\/2017\/03\/RecordButton.gif\" alt=\"RecordButton\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is an example of how to use PaintCode to create an animated button.<\/p><div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/markalldritt.com\/?p=1193\">Continue Reading<span class=\"screen-reader-text\">Animated Record Button with PaintCode<\/span><\/a><\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[28,42],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7AQk-jf","_links":{"self":[{"href":"https:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts\/1193"}],"collection":[{"href":"https:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1193"}],"version-history":[{"count":4,"href":"https:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts\/1193\/revisions"}],"predecessor-version":[{"id":1200,"href":"https:\/\/markalldritt.com\/index.php?rest_route=\/wp\/v2\/posts\/1193\/revisions\/1200"}],"wp:attachment":[{"href":"https:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/markalldritt.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}