Convert Figma logo to code with AI

alexjlockwood logoShapeShifter

SVG icon animation tool for Android, iOS, and the web

3,964
200
3,964
187

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:

  1. Visit the ShapeShifter website: https://shapeshifter.design
  2. Create your shapes using the built-in tools or import existing SVG files
  3. Adjust the start and end states of your shapes
  4. Fine-tune the animation using the timeline and easing options
  5. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Shape Shifter

Build Status Coverage Status GitHub Stats

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)!

Screen capture of tool

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):

In-depth path morphing with Shape Shifter

Here are some example icon animations created by Shape Shifter:

Expand to collapse animationOverflow to back arrow animationPlay-pause-stop animationAnimals animation

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 Ls into Qs and As into Cs 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:

  1. First install Node.js and npm.

  2. Clone the repository and in the root directory, run:

    npm install
    
  3. 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!