{"id":13542017,"url":"https://github.com/bonnyfone/vectalign","last_synced_at":"2025-04-08T09:09:24.326Z","repository":{"id":39614164,"uuid":"41884850","full_name":"bonnyfone/vectalign","owner":"bonnyfone","description":"Tool for create complex morphing animations using VectorDrawables (allows morphing between any pair of SVG images)","archived":false,"fork":false,"pushed_at":"2021-06-22T09:52:47.000Z","size":123,"stargazers_count":2030,"open_issues_count":4,"forks_count":160,"subscribers_count":68,"default_branch":"master","last_synced_at":"2025-04-01T07:53:07.997Z","etag":null,"topics":["android","android-development","morphing-animations","svg-images","svg-path","vectalign"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bonnyfone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-03T21:32:10.000Z","updated_at":"2025-03-26T12:16:42.000Z","dependencies_parsed_at":"2022-09-15T21:40:41.497Z","dependency_job_id":null,"html_url":"https://github.com/bonnyfone/vectalign","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bonnyfone%2Fvectalign","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bonnyfone%2Fvectalign/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bonnyfone%2Fvectalign/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bonnyfone%2Fvectalign/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bonnyfone","download_url":"https://codeload.github.com/bonnyfone/vectalign/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809964,"owners_count":20999816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-development","morphing-animations","svg-images","svg-path","vectalign"],"created_at":"2024-08-01T10:01:00.162Z","updated_at":"2025-04-08T09:09:24.297Z","avatar_url":"https://github.com/bonnyfone.png","language":"Java","funding_links":[],"categories":["Java","Libs","SVG","CLI Tool"],"sub_categories":["\u003cA NAME=\"Tools\"\u003e\u003c/A\u003eTools"],"readme":"# VectAlign [ ![Build Status](https://travis-ci.org/bonnyfone/vectalign.svg?branch=master)](https://travis-ci.org/bonnyfone/vectalign) [ ![Download](https://api.bintray.com/packages/bonnyfone/maven/org.bonnyfone.vectalign/images/download.svg) ](https://bintray.com/artifact/download/bonnyfone/maven/vectalign-0.2-jar-with-dependencies.jar) [![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-VectAlign-brightgreen.svg?style=flat)](http://android-arsenal.com/details/1/2443)\n\n**VectAlign** (a.k.a. *VectorDrawableAlign*) is a developer's tool which automagically **aligns two `VectorDrawable` \"pathData\" strings (or SVG images) in order to allow morphing animations** between them using an `AnimatedVectorDrawable`. VectAlign can be used from command line or through a simple GUI (which includes *morphing preview* and *export* functionalities).\n\n\n\u003cimg src=\"http://s33.postimg.org/qiaafk7xb/vectalign_0_2_demo.gif\" width=\"530px\"\u003e\n\nHere are some examples of what you can do with the help of VectAlign (take a look at the [sample project] for a live demo):\n\n\u003cimg src=\"http://s4.postimg.org/boxc1zk0p/morph2.gif\" width=\"110px\"\u003e \u003cimg src=\"http://s21.postimg.org/4657b7m0j/morph1.gif\" width=\"110px\"\u003e \u003cimg src=\"http://s28.postimg.org/8mdcxb48t/morph5.gif\" width=\"110px\"\u003e \u003cimg src=\"http://s18.postimg.org/79coo8vid/morph3.gif\" width=\"120px\"\u003e \u003cimg src=\"http://s9.postimg.org/a5tdgfppn/morph4.gif\" width=\"140px\"\u003e\n\n The problem\n--\n\nAs stated in the [official docs] two paths must be *compatible* so that they can be morphed, which means that the **paths must be composed by the same list of SVG commands** (in terms of length and type of commands). \n\nExample of **compatible paths**: \n```a\nM 10,10 L 40,10 L 40,40 L 10,40 Z\nM 25,10 L 40,25 L 25,40 L 10,25 Z\n```\n\nExample of **incompatible paths**: \n```\nM 10,10 L 40,10 L 40,40 L 10,40 Z\nM 30,30 L 10,10 C 14,25 20,30 10,49 L 3,3 L 0,8 Z\n```\n\nCreating an `AnimatedVectorDrawable` containing morphing animations which use *incompatible* paths leads to runtime exceptions like the following:\n\n```\nandroid.view.InflateException: Binary XML file line #3 Can't morph from M 10,10 L 40,10 L 40,40 L 10,40 Z  to  M 30,30 L 10,10 C 14,25 20,30 10,49 L 3,3 L 0,8 Z\n        at android.animation.AnimatorInflater.setupAnimatorForPath(AnimatorInflater.java:337)\n        at android.animation.AnimatorInflater.parseAnimatorFromTypeArray(AnimatorInflater.java:283)\n...\n```\nWhen the morphing involves only simple shapes is averagely simple to fix the paths by manually injecting or duplicating commands here and there; but when the complexity of the shapes grows, this task becomes quite tedious to do by hand (sometimes almost impossible). \n**VectAlign automagically aligns any pair of SVG paths (regardless of their complexity), creating a new pair of morphable paths without altering the original images.**\n\n\n Download\n--\nYou can download the latest version of the pre-compiled jar from **[here]**.\n\n Changelog\n--\n - **v0.2** \n  - added different morphing strategies (BASE, LINEAR, SUB\\_BASE, SUB\\_LINEAR)\n  - added GUI (view, load and edit SVG/pathData, *morphing preview*)\n  - added *export* function (automatically creates all the Android XML resources required)\n \n - **v0.1** \n  - first public release of VectAlign (command line only)\n\n Usage\n--\nRun VectAlign from command line by passing the two paths that you want to use in your morphing animation; you can pass these sequences by typing them directly or by referring a file (a simple txt file or even a standard SVG image); simply pass no params if you want to start the GUI:\n\n**Examples of execution**\n\nRun VectAlign in GUI mode:\n```bash\njava -jar  vectalign.jar \n```\n```bash\njava -jar  vectalign.jar --gui\n```\n\nRun VectAlign in command line mode:\n\n```bash\njava -jar  vectalign.jar   --start \"M 10,20...\"   --end \"M 30,30...\"\n```\n```bash\njava -jar  vectalign.jar   --start image1.svg   --end image2.svg\n```\n\nThe result represents the aligned (and *compatible*) version of the input paths/images: these new paths can be finally morphed using an `AnimatedVectorDrawable` without incurring in the *\"Can't morph from X to Y\"* exceptions:\n\n**Example of output**\n```bash\n--------------------\n  ALIGNMENT RESULT  \n-------------------- \n# new START sequence:  \nM 48.0,54.0 L 31.0,42.0 L 15.0,54.0 L 21.0,35.0 L 6.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 32.0,4.0 L 40.0,23.0 L 58.0,23.0 L 42.0,35.0 L 48.0,54.0 \n\n# new END sequence:  \nM 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 31.0,54.0 L 15.0,54.0 L 10.0,35.0 L 6.0,23.0 L 25.0,10.0 L 32.0,4.0 L 40.0,10.0 L 58.0,23.0 L 54.0,35.0 L 48.0,54.0 \n\n```\n\n**Available options**\n\n```bash\nusage: java -jar vectalign.jar  [-g] [-s \u003c\"string\"|txt_file|svg_file\u003e] [-e \u003c\"string\"|txt_file|svg_file\u003e] [-m \u003cBASE|LINEAR|SUB_BASE|SUB_LINEAR\u003e] [-v] [-h]\n\nAlign two VectorDrawable paths in order to allow morphing animations\nbetween them.\n\n -g,--gui                                      Start VectAlign GUI\n -s,--start \u003c\"string\"|txt_file|svg_file\u003e       Starting VectorDrawable\n                                               path (\"string\", txt file or\n                                               SVG file)\n -e,--end \u003c\"string\"|txt_file|svg_file\u003e         Ending VectorDrawable path\n                                               (\"string\", txt file or SVG\n                                               file)\n -m,--mode \u003cBASE|LINEAR|SUB_BASE|SUB_LINEAR\u003e   Aligning technique (default\n                                               is BASE)\n -v,--version                                  Print the version of the\n                                               application\n -h,--help\n```\n\nHow it works\n--\nVectAlign is based on an adaptation of the [Needleman-Wunsch] algorithm, which is used in bioinformatics to align protein or nucleotide sequences. \n\n\nNotes and known issues\n--\n - This is an experimental tool which faces a complex task. **Result's quality may vary depending on the inputs**; thus, *wow effect* of the resulting animation is not guaranteed.\n - Aligning complex shapes **may create visual artifacts on one or both images**; in this case, try to simplify the original SVG path (e.g. using [InkScape]) and then run VectAlign again (see also the *Tips* section).\n - When referring a SVG file, all the path groups which compose the image will be merged in one single path.\n - If your SVG path is too much complex the system renderer will throw a silent exception: \"*OpenGLRenderer﹕ Path too large to be rendered into a texture*\"; in this case you need to simplify your image further.\n\n\nTips\n--\n - When morphing complex aligned paths, for best result **avoid using the `fillColor` attribute  in your `VectorDrawable` and use the `strokeColor` only**. This because filled surfaces are more likely to be affected by artifacts than the stroke-only ones and usually provide less gorgeous morphing effects.\n - As general rule, *similar* images (in terms of SVG complexity) morph better than very different ones.\n - If you don't like the result of a morphing, try to alter the original images by simplifying the SVG path (e.g. using [InkScape]) and then run VectAlign again.\n - Since *AnimatedVectorDrawable* is API 21+ you can use the [vector-compat] library to extend support down to API 14+.\n\nReferences\n--\n - [DevBytes: Android Vector Graphics]\n - [AnimatedVectorDrawable] \n - [VectorDrawable] \n - [VectorDrawableCompat on support library v7 (partial)]\n - [SVG Paths Specification]\n \n\nLicense\n----\n\n```bash\nCopyright 2015, Stefano Bonetta.\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n[AnimatedVectorDrawable]:http://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html\n[VectorDrawable]:https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html\n[DevBytes: Android Vector Graphics]:https://www.youtube.com/watch?v=wlFVIIstKmA\n[InkScape]:https://inkscape.org/en/\n[vector-compat]:https://github.com/wnafee/vector-compat\n[Needleman-Wunsch]:https://en.wikipedia.org/wiki/Needleman%E2%80%93Wunsch_algorithm\n[official docs]:https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html\n[SVG Paths Specification]:http://www.w3.org/TR/SVG/paths.html\n[VectorDrawableCompat on support library v7 (partial)]:https://android.googlesource.com/platform/frameworks/support/+/master/v7/vectordrawable/src/android/support/v7/graphics/drawable\n[sample project]:https://github.com/bonnyfone/vectalign-samples/\n[here]:https://bintray.com/artifact/download/bonnyfone/maven/vectalign-0.2-jar-with-dependencies.jar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbonnyfone%2Fvectalign","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbonnyfone%2Fvectalign","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbonnyfone%2Fvectalign/lists"}