Introducing Shape Shifter v1.0, https://shapeshifter.design

For the past 2 months I've been working tirelessly on merging Shape Shifter and +Roman Nurik​ Android Icon Animator tool into a single web app. Today I am finally ready to release Shape Shifter v1.0, which provides the following features:

* Build layered vector graphics using groups, paths, and clip paths. (https://goo.gl/hHECgH)
* Create property animations for each individual layer and organize them via a timeline. (https://goo.gl/tvXukk)
* Edit the individual properties of each layer/property animation by hand and view how they affect the rendered result. (http://i.imgur.com/e8XqyDR.png)
* Create path morphing animations even if the path strings are incompatible. Shape Shifter will detect whether the path strings are incompatible and will prompt you to either “auto fix” the paths or to fix them by hand. (https://goo.gl/Qcw7Pe) Note that pretty much all of the functionality that existed in previous versions of this tool is hidden behind that “edit paths” button in the screenshot, so don’t miss it! :)
* Export the resulting animation to SVG, VectorDrawable, AnimatedVectorDrawable, and SVG spritesheet format (CSS keyframes coming soon).

In addition to these features, Shape Shifter can also be used as a SVG-to-VectorDrawable converter (better than most of the existing conversion tools out there IMO).

It is also a great educational tool for teaching Android developers about AnimatedVectorDrawables (i.e. the layers make up the VectorDrawable specified in the <animated-vector android:drawable=“…”> attribute and the animation blocks are the AVD’s <target> nodes).

There are several demos available to try under “File” —> “Demo”. If you want to create your own icon animations, I recommend downloading/importing some SVGs from https://material.io/icons/ and seeing what you can come up with.

In the coming weeks I’ll be posting more documentation/videos illustrating how to use the tool. Until then, I would love to hear your thoughts/suggestions/ideas for further improving the tool!

Live version: https://shapeshifter.design
Video tutorial: https://youtu.be/2aq3ljlnQdI
Source code: https://github.com/alexjlockwood/ShapeShifter
Intro to icon animations: https://goo.gl/tSQ3pj
Animated Photo
Shared publiclyView activity