Top Related Projects
Flutter runtime for Rive
Render After Effects animations natively on Android and iOS, Web, and React Native
Load and get full control of your Rive files in a Flutter project using this library.
Android view for displaying PDFs rendered with PdfiumAndroid
A curated list of awesome Android UI/UX libraries
Quick Overview
ShapeShifter is an open-source web application that simplifies the process of creating path morphing animations for Android, iOS, and the web. It provides a user-friendly interface for designing and exporting complex animations, making it easier for developers and designers to create smooth transitions between vector shapes.
Pros
- Intuitive visual interface for creating path morphing animations
- Supports export to multiple platforms (Android, iOS, and web)
- Generates optimized SVG and JSON output for efficient animations
- Free and open-source, allowing for community contributions and customization
Cons
- Limited to path morphing animations, not suitable for other types of animations
- Requires some understanding of vector graphics and animation principles
- May have a learning curve for users new to path morphing concepts
- Web-based tool, requiring an internet connection for use
Getting Started
To use ShapeShifter, follow these steps:
- Visit the ShapeShifter website: https://shapeshifter.design
- Create your shapes using the built-in tools or import existing SVG files
- Adjust the start and end states of your shapes
- Fine-tune the animation using the timeline and easing options
- Export the animation in your desired format (Android VectorDrawable, iOS CAShapeLayer, or SVG)
No installation is required as ShapeShifter is a web-based tool. Simply open the website in a modern web browser to start creating animations.
Competitor Comparisons
Flutter runtime for Rive
Pros of Rive Flutter
- Cross-platform support for multiple frameworks, including Flutter, React, and Web
- Real-time interactive animations with runtime manipulation
- Smaller file sizes for complex animations
Cons of Rive Flutter
- Steeper learning curve for designers and developers
- Requires a separate design tool (Rive) for creating animations
Code Comparison
ShapeShifter (XML-based):
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
</vector>
Rive Flutter (Dart code):
import 'package:rive/rive.dart';
class MyAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RiveAnimation.asset('assets/animation.riv');
}
}
ShapeShifter focuses on creating and exporting vector drawables for Android, while Rive Flutter offers a more comprehensive animation solution across multiple platforms. ShapeShifter uses XML for defining animations, whereas Rive Flutter integrates animations directly into the Flutter widget tree using Dart code.
Render After Effects animations natively on Android and iOS, Web, and React Native
Pros of Lottie-Android
- Wider adoption and community support
- More comprehensive documentation and examples
- Supports a broader range of animation features
Cons of Lottie-Android
- Larger library size and potential performance overhead
- Steeper learning curve for complex animations
- Requires external tools for creating animations (e.g., Adobe After Effects)
Code Comparison
ShapeShifter:
val animatedVectorDrawable = AnimatedVectorDrawableCompat.create(context, R.drawable.avd)
imageView.setImageDrawable(animatedVectorDrawable)
animatedVectorDrawable?.start()
Lottie-Android:
val animationView = LottieAnimationView(context)
animationView.setAnimation(R.raw.animation)
animationView.playAnimation()
Both libraries offer ways to create and display animations, but ShapeShifter focuses on vector animations created directly in Android, while Lottie-Android supports more complex animations exported from design tools. ShapeShifter's approach may be simpler for basic vector animations, while Lottie-Android provides more flexibility for intricate animations at the cost of increased complexity.
Load and get full control of your Rive files in a Flutter project using this library.
Pros of Flare-Flutter
- Integrated with Flutter framework, allowing seamless animation integration in Flutter apps
- Supports real-time animation editing and preview within the Flare editor
- Provides a more comprehensive animation ecosystem with design tools and runtime libraries
Cons of Flare-Flutter
- Limited to Flutter development, while ShapeShifter is platform-agnostic
- Steeper learning curve due to the need to understand both Flare and Flutter concepts
- Less flexibility in exporting animations to different formats compared to ShapeShifter
Code Comparison
ShapeShifter (XML output):
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
</vector>
Flare-Flutter (Dart code):
import 'package:flare_flutter/flare_actor.dart';
FlareActor(
"assets/animation.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: "idle",
)
Android view for displaying PDFs rendered with PdfiumAndroid
Pros of AndroidPdfViewer
- Specifically designed for PDF viewing in Android applications
- Provides a comprehensive set of features for PDF rendering and interaction
- Actively maintained with regular updates and bug fixes
Cons of AndroidPdfViewer
- Limited to PDF-related functionality, less versatile than ShapeShifter
- May have a steeper learning curve for developers unfamiliar with PDF rendering
- Potentially larger file size and resource usage compared to ShapeShifter
Code Comparison
AndroidPdfViewer:
pdfView.fromAsset("sample.pdf")
.pages(0, 2, 1, 3, 3, 3)
.defaultPage(1)
.onPageChange(this)
.load();
ShapeShifter:
val path = PathData.parse("M 0,0 L 100,100")
val animatedPath = AnimatedPathData.Builder(path)
.interpolator(FastOutSlowInInterpolator())
.duration(300)
.build()
AndroidPdfViewer focuses on PDF rendering and navigation, while ShapeShifter is tailored for creating and manipulating vector animations. The code snippets demonstrate their distinct purposes, with AndroidPdfViewer handling PDF loading and page management, and ShapeShifter dealing with path animations and interpolators.
A curated list of awesome Android UI/UX libraries
Pros of awesome-android-ui
- Comprehensive collection of UI libraries and components
- Regularly updated with new contributions from the community
- Covers a wide range of UI elements and design patterns
Cons of awesome-android-ui
- Not a standalone library, requires integration of multiple dependencies
- May lead to inconsistencies in design and implementation across projects
- Potential for outdated or unmaintained libraries in the collection
Code comparison
While a direct code comparison isn't applicable due to the nature of these repositories, here's a brief example of how they might be used:
ShapeShifter (SVG path creation):
val path = Path().apply {
moveTo(0f, 0f)
lineTo(100f, 100f)
close()
}
awesome-android-ui (using a library from the collection):
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
val chart = LineChart(context)
chart.data = LineData(dataSet)
chart.invalidate()
ShapeShifter focuses on creating and manipulating vector drawables, while awesome-android-ui provides a curated list of various UI libraries for different purposes.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Shape Shifter
Go to live version or ask a question on Slack
Shape Shifter is a web-app that simplifies the creation of icon animations for Android, iOS, and the web.
This tool currently exports to standalone SVGs, SVG spritesheets,
and CSS keyframe animations for the web, as well as to
AnimatedVectorDrawable
format for Android. I am totally open to adding support for other export formats as well, so
if you have a format that you'd like to see added in the future,
file a feature request!
Try out the beta version, which adds the ability to draw/edit paths directly on the canvas (written using the amazing paper.js library)!
Backers
Support us with either a one time donation or a monthly donation and help us continue our activities. Funds will go towards hiring new developers to work on awesome features! We'll display your logo below with a link to your site.
ð Become a backer ð
Sponsors
Is your company using Shape Shifter? Ask your manager to support us! We'll display your logo below with a link to your site.
ð Become a sponsor ð
Examples
I gave a couple of live demos that illustrate how to use the tool at Droidcon SF (15:15 - 20:33):
Here are some example icon animations created by Shape Shifter:
Problem
Writing high-quality path morphing animations is a tedious and time-consuming 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. This is problematic because:
- Design tools—such as Sketch and Illustrator—do not easily expose the order of points in a shape, making it difficult to change their order. As a result, engineers will often have to spend time tweaking the raw SVG path strings given to them by designers before they can be morphed, which can take a significant amount of time.
- Design tools often map to shape primitives not supported in certain platforms (e.g. circles need to be represented by a sequence of curves and/or arcs, not simply by their center point and radius).
- Design tools cannot place multiple path points in the same location, a technique that is often necessary when making two shapes compatible with each other.
- Design tools provide no easy way to visualize the in-between states of the desired path morph animation.
Features
To address these problems, Shape Shifter provides the following features:
- The ability to add/remove points to each path without altering their original appearance. The added points can be modified by dragging them to different positions along the path, and they can be later deleted using the keyboard as well.
- The ability to reverse/shift the relative positions of each path's points. While reordering points won't affect whether or not two paths are compatible, it often plays a huge role in determining the appearance of the resulting animation.
- Shape Shifter automatically converts incompatible pairs of SVG commands into a compatible
format. There's no longer any need to convert
L
s intoQ
s andA
s intoC
s by hand in order to make your paths compatible—Shape Shifter does this for you behind-the-scenes! - Shape Shifter provides a useful utility called 'auto fix', which takes two incompatible paths and attempts to make them compatible in an optimal way. Depending on the complexity of the paths, auto fix may or may not generate a satisfying final result, so further modification may be necessary in order to achieve the animation you're looking for.
- The ability to export the results to SVG spritesheets, CSS keyframes, and
AnimatedVectorDrawable
format for use on the web and in Android applications. I'm open to adding support for other export formats as well, so feel free to file a feature request!
How does it work?
Pretty much all of the graphics in this app are powered by bezier curve approximations under-the-hood.
I learned most of what I needed to know from this excellent primer on bezier curves
(especially sections 9 and 33, which explain how to split and project points onto bezier
curves without altering their original appearance). Most of the interesting SVG-related code
is located under src/app/model/paths
.
Auto fix is powered by an adaptation of the Needleman-Wunsch algorithm,
which is used in bioinformatics to align protein or nucleotide sequences. Instead of
aligning DNA base-pairs, Shape Shifter aligns the individual SVG commands that make up
each path instead. You can view the current implementation of the algorithm in the
AutoAwesome.ts
file.
Bug reports & feature requests
Let me know if you encounter any issues with the app (attach SVG files and/or screenshots if you can). Before you do, take a look at the list of known issues here and leave a comment on the existing bugs you want to see fixed in a future release!
I am open to pretty much any feature request, so don't be afraid to ask! I'll likely work on the most popular feature requests first. I'm especially curious how I can make this web app more useful for iOS and web developers.
Build instructions
If you want to contribute, you can build and serve the web app locally as follows:
-
Clone the repository and in the root directory, run:
npm install
-
To build and serve the web app locally, run:
npm start
Special thanks
Huge thanks to Nick Butcher, Roman Nurik, and Steph Yim for all of their help during the early stages of this project!
Top Related Projects
Flutter runtime for Rive
Render After Effects animations natively on Android and iOS, Web, and React Native
Load and get full control of your Rive files in a Flutter project using this library.
Android view for displaying PDFs rendered with PdfiumAndroid
A curated list of awesome Android UI/UX libraries
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot