android-pathview
You want to animate svg or normal Paths?<br> Change the color, pathWidth or add svg.<br> Animate the "procentage" property to make the animation.
There are two types of paths :
1. From Svg
<com.eftimoff.androipathview.PathView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/pathView"
android:layout_width="150dp"
android:layout_height="150dp"
app:pathColor="@android:color/white"
app:svg="@raw/settings"
app:pathWidth="5dp"/>
Result
2. From Path
<com.eftimoff.androipathview.PathView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/pathView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:pathColor="@android:color/white"
app:pathWidth="3dp"/>
In Code
final Path path = new Path();
path.moveTo(0.0f, 0.0f);
path.lineTo(length / 4f, 0.0f);
path.lineTo(length, height / 2.0f);
path.lineTo(length / 4f, height);
path.lineTo(0.0f, height);
path.lineTo(length * 3f / 4f, height / 2f);
path.lineTo(0.0f, 0.0f);
path.close();
pathView.setPath(path);
Result
Use the animator for parallel animation
pathView.getPathAnimator()
.delay(100)
.duration(500)
.listenerStart(new AnimationListenerStart())
.listenerEnd(new AnimationListenerEnd())
.interpolator(new AccelerateDecelerateInterpolator())
.start();
Use the animator for sequential animation
pathView.getSequentialPathAnimator()
.delay(100)
.duration(500)
.listenerStart(new AnimationListenerStart())
.listenerEnd(new AnimationListenerEnd())
.interpolator(new AccelerateDecelerateInterpolator())
.start();
If you want to use the svg colors.
pathView.useNaturalColors();
If you want to draw the real SVG after the path animation.
It is in still in development.
pathView.setFillAfter(true);
TODO
- Make persistent "percentage" field on orientation change.
Limitations
When working with SVGs you can not WRAP_CONTENT your views.
Used in apps
Message me if you want to be included in this list.
Thanks to
- https://github.com/romainguy/road-trip
- http://www.curious-creature.com/2013/12/21/android-recipe-4-path-tracing/
- https://github.com/matthewrkula/AnimatedPathView
Contributors
I want to update this library and make it better. So any help will be appreciated. Make and pull - request and we can discuss it.
Download
dependencies {
compile 'com.eftimoff:android-pathview:1.0.8@aar'
}
Changelog
1.0.8
[Fix] Removed not properly used android:allowBackup.
1.0.7
[Feature] Sequential path animation.
[Fix] Use dimensions instead of float for pathWidth.
Licence
Copyright 2016 Georgi Eftimov
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.
Like the one shown above ,When I use the code below, it happens.
1.5k Dec 29, 2022
551 Dec 22, 2022
2k Dec 12, 2022
37 Aug 8, 2022
170 Feb 20, 2021
287 Nov 18, 2022
1.8k Dec 27, 2022
2.6k Jan 5, 2023
1.2k Dec 30, 2022
339 Dec 14, 2022
3k Nov 28, 2022
1.8k Dec 29, 2022
1.1k Nov 10, 2022
1.5k Dec 30, 2022
744 Dec 25, 2022
777 Dec 30, 2022
561 Nov 20, 2022
614 Dec 4, 2022
641 Dec 24, 2022