Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tarek360/RichPath

💪 Rich Android Path. 🤡 Draw as you want. 🎉 Animate much as you can.
https://github.com/tarek360/RichPath

android animation icons path path-animation svg vector vector-drawable

Last synced: 19 days ago
JSON representation

💪 Rich Android Path. 🤡 Draw as you want. 🎉 Animate much as you can.

Lists

README 

        
## *** Library maintenance is paused until further notice! ***








[![CircleCI](https://circleci.com/gh/tarek360/RichPath.svg?style=svg)](https://circleci.com/gh/tarek360/RichPath)

[![Release](https://jitpack.io/v/tarek360/RichPath.svg)](https://jitpack.io/#tarek360/RichPath) ![API](https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat) [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=https://github.com/tarek360/RichPath)



💪 Rich Android Path.     🤡 Draw as you want.    🎉 Animate much as you can.



### Download sample app:








### Features



- **Full Animation Control on Paths and VectorDrawables:**

Animate any attribute in a specific path in the VectorDrawable



`fillColor`, `strokeColor`, `strokeAlpha`, `fillAlpha`, `size`, `width`, `height`, `scale`, `scaleX`, `scaleY`, `rotation`, `translationX`, `translationY`, `trimPathStart`, `trimPathEnd`, `trimPathOffset`.



- **Path morphing:**






```Java

RichPathAnimator.animate(richPath)

       .pathData(pathData1, pathData2, ...)

       .start();

```



## Just 3 Steps to Animate any path.



#### 1. In your layout.

```xml

    

```



#### 2. Find your richPath.

 ```java

 // by path name

RichPath richPath = richPathView.findRichPathByName("path_name");

// or if it contains one path

RichPath richPath = richPathView.findFirstRichPath();

// or by index

RichPath richPath = richPathView.findRichPathByIndex(0);

```



#### 3. Use the RichPathAnimator to animate your richPath.

 ```java

RichPathAnimator.animate(richPath)

        .trimPathEnd(value1, value2, ...)

        .fillColor(value1, value2, ...)

        .start();

```



## Example



#### notification icon vector drawable




```xml



    

        



        

    



```



#### XML

```xml

    

```



#### Java




```java

RichPath top = notificationsRichPathView.findRichPathByName("top");

RichPath bottom = notificationsRichPathView.findRichPathByName("bottom");



RichPathAnimator.animate(top)

        .interpolator(new DecelerateInterpolator())

        .rotation(0, 20, -20, 10, -10, 5, -5, 2, -2, 0)

        .duration(4000)

        .andAnimate(bottom)

        .interpolator(new DecelerateInterpolator())

        .rotation(0, 10, -10, 5, -5, 2, -2, 0)

        .startDelay(50)

        .duration(4000)

        .start();

```



### Installation



Add the following dependency to your module `build.gradle` file:

```gradle

dependencies {

	...

	implementation 'com.github.tarek360.RichPath:animator:0.1.1'

}

```



Add this to your root `build.gradle` file (**not** your module `build.gradle` file) :

```gradle

allprojects {

	repositories {

		...

		maven { url "https://jitpack.io" }

	}

}

```



### More Control by the RichPathAnimator



 - **Animate multiple paths sequentially or at the same time**

 ```java

RichPathAnimator

        .animate(richPath1, richPath2)

        .rotation(value1, value2, ...)



        //Animate the same path or another with different animated attributes.

        .andAnimate(richPath3)

        .scale(value1, value2, ...)



        //Animate after the end of the last animation.

        .thenAnimate(richPath4)

        .strokeColor(value1, value2, ...)



        // start your animation 🎉

        .start();

```



 - **Which one of the paths is clicked?**

 ```java

richPathView.setOnPathClickListener(new RichPath.OnPathClickListener() {

     @Override

     public void onClick(RichPath richPath) {

	    if (richPath.getName().equals("path_name")) {

	        //TODO do an action when a specific path is clicked.

	    }

     }

 });

```



## TODO



- ~Clickable path~ (Done)

- Support clip-path

- Path animation (animate a RichPath on a path)

- Reverse animation

- ...



If you have any suggestion please open an issue for it.



## Credits



- [florent37](https://github.com/florent37) He is the creator of [ViewAnimator](https://github.com/florent37/ViewAnimator) which gave me the idea of this project. Some core concepts and ideas were reused, but everything is written from scratch.

- [Android](https://android.com/) Some code is reused form the android source code and the VectorDrawableCompat support library.

- [Alex Lockwood](https://github.com/alexjlockwood) The paths of the morphing sample is extracted from the [Shape Shifter](https://github.com/alexjlockwood/ShapeShifter) demo.



## Developed By



* Ahmed Tarek

 * [tarek360.github.io](http://tarek360.github.io/)

 * [Twitter](https://twitter.com/a_tarek360)



## License



>Copyright 2017 Tarek360



>Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at



>   http://www.apache.org/licenses/LICENSE-2.0



>Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.