In-depth path morphing w/ Shape Shifter
summary
A web app called Shape Shifter auto-generates Android path morphs by adding dummy points, converting lines to cubic beziers, and reordering vertices so SVG paths share the same command types; it exports to AnimatedVectorDrawable, SVG sprite sheets and CSS. Autofix first used a naive “minimize travel” fill (too many points for AVDs and hits Android’s ~800‑char lint), then a Needleman‑Wunsch alignment style O(n²) algorithm that places dummy points where detail is needed, works well for ~10–20 point icons, struggles with 50–100 point shapes.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:01What is path morphing
- 3:50How path morphing works
- 6:35Fixing incompatible paths
- 9:47Order of path points matters
- 11:33Requirements recap
- 11:55Why Shape Shifter was created
- 15:28Demo of Shape Shifter
- 18:18Morphing complex shapes
- 20:10Exporting animations
- 20:53Examples and limitations
- 21:57Introducing autofix
- 26:32DNA alignment for paths
- 30:22Morphing paths with holes
- 32:12Triangulation approach
- 34:00Future of Shape Shifter
- 36:29Links and acknowledgments
related talks
44mIn-depth path morphing w/ Shape Shifter
48mOne Shot: Meaningful vector animation using Shape Shifter
28mShapeShifting: Creating delightful icon animations
47mLearn Some New Moves: Advanced Android Animation
41mGraphics for Android Developers, Part Deux
40mI Like The Way You Move
43mMeaningful motion design and how to implement it
31mThe Language of Shapes: Understanding the SVG Path