One Shot: Meaningful vector animation using Shape Shifter
summary
Step-by-step workflow that turns boring SVG icons into working Android animations: import SVG or vector drawable into shapeshifter.design, split complex icons into layers, use auto-fix plus manual point shifts so paths have the same commands and point order, add animated-vector drawable object-animators for pathData, tweak interpolators (overshoot, rotation), export XML and run on device. Examples: expand/collapse, add→check, and a camera-shutter morph — all exported and working on Android.
AI-written summary · about
chapters (22)
- 0:00Start
- 1:45Creating Simple Vector Animations Using Shape Shifter
- 4:25Scalable Vector Graphics
- 7:09Create a Simple Vector Using Line Commands
- 7:51Curve Command
- 9:05Path Modification Animations
- 9:15Animated Vector Drawables
- 12:29Morphing a Square into a Circle
- 15:18Shift Points
- 17:38Create a Meaningful Animation
- 19:31Import Svg
- 23:26A Reverse Animation
- 25:01Concept
- 30:54Add Points
- 31:57Intermediate Design
- 34:01Contents of this Android Vector Drawable
- 36:24Camera Click with Curves
- 38:07Delete Animation
- 39:03Drag Handle
- 40:12Filter Animation
- 43:45How Can We Loop Animations
- 44:58Final Questions
related talks
31mShapeShifting: Creating delightful icon animations
28mShapeShifting: Creating delightful icon animations
39mIn-depth path morphing w/ Shape Shifter
44mIn-depth path morphing w/ Shape Shifter
40mI Like The Way You Move
45mVector Workflows
31mI like to move it, move it
49mMobiconf: Mark Allisson, blog.stylingandroid.com