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.