Delighting Details - Animated Vector Drawables
summary
Shows how to animate icons by using vector drawables with trimPathStart/End/Offset to reveal strokes, converting SVGs to strokes not shapes, and sequencing with interpolators and start offsets so a circle draws then a connector appears. Uses objectAnimator + animated-vector (use animated-vector-compat for KitKat), and explains pathData morphing requires matched command counts so duplicate commands to align paths; pathData animation is Lollipop+, XML bundle (build-tools 24) merges files and animated selector needs Marshmallow+.
AI-written summary · about
chapters (15)
- 0:00Introduction and welcome
- 0:58Vector drawables basics
- 2:44SVG fundamentals explained
- 6:46Key properties for animation
- 8:17Drawing animation with trim path
- 10:05Live design demonstration
- 15:12Converting SVG to vector drawable
- 18:36Configuring vector drawable properties
- 21:08Creating animations with ObjectAnimator
- 24:39Connecting animations to vectors
- 26:24Animating path data
- 31:02Simplifying with XML bundle format
- 32:46State list animations
- 33:07Delighting users with animations
- 33:52Q&A session
related talks
38mIn a World of Pure Android Animation 🍭🍫
49mMobiconf: Mark Allisson, blog.stylingandroid.com
40mI Like The Way You Move
43mMeaningful motion design and how to implement it
41mVectorial Victories
47mLearn Some New Moves: Advanced Android Animation
45mAnimations in Material Design - Significance, Context and Hierarchy
31mShapeShifting: Creating delightful icon animations