{"id":3310,"date":"2023-06-11T12:56:42","date_gmt":"2023-06-11T16:56:42","guid":{"rendered":"https:\/\/michaelrowe01.com\/?p=3310"},"modified":"2023-06-11T12:56:45","modified_gmt":"2023-06-11T16:56:45","slug":"animate-with-springs","status":"publish","type":"post","link":"https:\/\/michaelrowe01.com\/index.php\/blog\/animate-with-springs\/","title":{"rendered":"Animate with Springs"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"371\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?resize=660%2C371&#038;ssl=1\" alt=\"\" class=\"wp-image-3313\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/%EF%A3%BFWWDC23-41.png?w=1320&amp;ssl=1 1320w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<p>All about engaging your user with better animations<\/p>\n\n\n\n<p>Why Springs<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Animations provide a level of continuity, watching this move is more natural than just seeing it in a new place.&nbsp; Velocity is important to make it look more natural<\/li>\n\n\n\n<li>Ease in and out is a bezier animation defined by a curve and duration, to me this adds gravity to the animation<\/li>\n\n\n\n<li>Spring is like an ease in and out animation; however if you use a gesture with an animation a spring looks more natural if you flick or show the object<\/li>\n\n\n\n<li>Motion of a spring is not only a bouncing animation; it is about how the animation ends. It is a slow and natural stop, not like hitting a wall.<\/li>\n<\/ul>\n\n\n\n<p>How Springs Work<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You are modeling a motion of an object attached to a spring. This is impacted by the mass of the object, the stiffness of the spring, and the damping of the system (aka friction).\n<ul class=\"wp-block-list\">\n<li>Initial position of the animation, and the target is the resting position of the spring.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>While changing those properties make sense for a physical system; in software we use duration and bounce to reflect the spring.&nbsp; Adding duration makes it take longer, and bounce will cause a bounce in the curve (if greater than 0, at 0 is smooth curve, less than zero takes a flatter time to stop.<\/li>\n\n\n\n<li>All of the math is implemented for you, a bouncy spring is like a cosine wave, at 100% it will oscillates back and forth.&nbsp; A * cos(2\u03c0 * t \/ duration).&nbsp; You can see all three curves in this chart, where the Blue and Green curves are defined at the bottom and the dark curve is defined by the previous formula.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"371\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?resize=660%2C371&#038;ssl=1\" alt=\"\" class=\"wp-image-3312\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?resize=1536%2C864&amp;ssl=1 1536w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.43.43-2.png?w=1320&amp;ssl=1 1320w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To preserve velocity out cosine curve will start off with a downward curve.<\/li>\n\n\n\n<li>The velocity can come from a the velocity of a gesture, or from the velocity from an interrupted animation. The session goes through the rest of the calculations for those who are interested.<\/li>\n\n\n\n<li>You can use a completion handler that uses perceptual duration instead of the settling duration to process other activities&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>How to use Springs<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Springs are the default for SwiftUI<\/li>\n\n\n\n<li>You can explicitly use them&nbsp; presets like .snappy, .bouncy, and .smooth, and tune it with a duration or extra bounce<\/li>\n\n\n\n<li>You can customize the .spring completely&nbsp;<\/li>\n\n\n\n<li>There is also a spring model type to programmatically covert parameters, or just do the math yourself with<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"238\" src=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.51.32.png?resize=660%2C238&#038;ssl=1\" alt=\"\" class=\"wp-image-3311\" srcset=\"https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.51.32.png?resize=1024%2C369&amp;ssl=1 1024w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.51.32.png?resize=300%2C108&amp;ssl=1 300w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.51.32.png?resize=768%2C277&amp;ssl=1 768w, https:\/\/i0.wp.com\/michaelrowe01.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-11-at-12.51.32.png?w=1212&amp;ssl=1 1212w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>All about engaging your user with better animations Why Springs How Springs Work How to use Springs<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_wp_convertkit_post_meta":{"form":"-1","landing_page":"0","tag":"0","restrict_content":"0"},"hide_page_title":"","footnotes":""},"categories":[2,3],"tags":[721,752,751,680],"class_list":["post-3310","post","type-post","status-publish","format-standard","hentry","category-blog","category-personal-softwareandit","tag-animation","tag-day-7","tag-springs","tag-wwdc23"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/comments?post=3310"}],"version-history":[{"count":1,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3310\/revisions"}],"predecessor-version":[{"id":3314,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/posts\/3310\/revisions\/3314"}],"wp:attachment":[{"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/media?parent=3310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/categories?post=3310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelrowe01.com\/index.php\/wp-json\/wp\/v2\/tags?post=3310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}