Icon Animation thru SVG morphing by Alex Lockwood, Creator of Shape Shifter

Wednesday, November 22, 2017 - 18:30
Bay Area Android Developer Group
San Francisco

I've brought back one of the best sessions I saw at the recent DroidCon SF:

Icon Animation thru SVG morphing by Alex Lockwood, Creator of Shape Shifter. Shape Shifter is a free single-purpose animation creation and open source tool for both designers and developers, which supports the Android format, iOS, and the Web. 

Watch this video tutorial to see Shape Shifter in action. If you can't replicate what's shown in that one, take a look at this one especially, starting at 3:25.


6:30 Check-in &  food. Thanks again to Google and Launchpad for the food and space.

6:55 Welcome message

7:00-8:00 Topic: In-depth path morphing w/ Shape Shifter by Alex Lockwood

8:00-8:45 TBD

8:55 End

In-depth path morphing w/ Shape Shifter

Writing high-quality path morphing animations for Android is a near impossible task. In order to morph one shape into another, the SVG paths describing the two must be compatible with each other—that is, they need to have the same number and type of drawing commands. Unfortunately popular design tools, such as Sketch and Illustrator, do not take this into account, and as a result engineers will often have to spend time tweaking the raw SVGs given to them by designers before they can be morphed. To address this issue, I built a web app called Shape Shifter (https://shapeshifter.design), a tool that helps developers and designers to more easily create path morphing animations for their Android apps. In this talk, I will explain how to use Shape Shifter to create seamless transitions between arbitrary shapes using AnimatedVectorDrawables. I will also explain how Shape Shifter internally uses bioinformatics algorithms in order to auto-generate morphing animations between incompatible shapes, as well as some of the challenges I faced while building the tool.

Alex Lockwood

Alex is an Android designer & developer who helps other designers and developers to understand and create beautiful material design apps.

Twitter: @alexjlockwood (https://twitter.com/alexjlockwood)
Free Tool: Shape Shifter (https://shapeshifter.design/)
Blog: www.androiddesignpatterns.com (http://www.androiddesignpatterns.com/)
Donations to fund Shape Shifter project: http://opencollective.com/shapeshifter


Launchpad Space

Subscribe here (https://goo.gl/forms/kllPDSpCSzuJOX7I2) to receive biweekly event updates from Launchpad Space

Also thanks to Google and Launchpad for the food and drinks.

There is currently no plan to video record or video stream this session, although Alex Lockwood's session has already been videotaped at DroidCon SF (along with most other DroidCon SF sessions). And those video links will get posted to the @DroidConSF Twitter feed when they're ready.