Text Path Animation is to enter text, then set some animation properties, and brush effects, and finally start on the line. You can also control the progress of your own painting. TextPathView is a Android library in which view with text path animation!
Implementation of Text Path Animation Library
Demo
TextPathView is a custom control that converts text into path animations and then presents them. The effect is shown above.
See this : Add Touch Functionality in ImageView
Gradle
compile 'com.yanzhikai:TextPathView:0.1.2'
- minSdkVersion 16
- Hardware acceleration may cause some problems when using version 0.1.2.
or Download this project from here :
Usage
TextPathView
There are tow types of TextPathView:
- SyncTextPathView, draw the text paths one by one.
- AsyncTextPathView, draw the each text path in the same time.
Recommended Article : Add Long Shadow in ImageView
In the xml:
<yanzhikai.textpath.SyncTextPathView android:id="@+id/stpv_2017" android:layout_width="match_parent" android:layout_height="wrap_content" app:duration="12000" app:showPainter="true" app:text="2017" app:textInCenter="true" app:textSize="60sp" android:layout_weight="1" /> <yanzhikai.textpath.AsyncTextPathView android:id="@+id/atpv_1" android:layout_width="wrap_content" android:layout_height="wrap_content" app:duration="12000" app:showPainter="true" app:text="Inflammation" app:textStrokeColor="@android:color/holo_orange_light" app:textInCenter="true" app:textSize="62sp" android:layout_gravity="center_horizontal" />
In the java:
Atpv1 = findViewById(R.id.atpv_1); Stpv_2017 = findViewById(R.id.stpv_2017); //From nothing to show atpv1.startAnimation(0,1); //From display to disappear stpv_2017.startAnimation(1,0);
See this : How to Add Multicolor TextView in Android?
Also you can use SeekBar to control the progess of TextPathView:
sb_progress.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { atpv1.drawPath(progress / 1000f); stpv_2017.drawPath(progress / 1000f); } }
PathView
PathView is a new class after version 0.1.1. It has three subclass:TextPathView, SyncPathView, AsyncPathView.The latter are used to play to animation of path.
public class TestPath extends Path { public TestPath(){ init(); } private void init() { addCircle(350,300,150,Direction.CCW); addCircle(350,300,100,Direction.CW); addCircle(350,300,50,Direction.CCW); moveTo(350,300); lineTo(550,500); } }
You must use setPath()
before startAnimation()
:
aspv.setPath(new TestPath()); aspv.startAnimation(0,1);
Useful for you : Add Android Rotating Text Animation
Attributes
Attribute Name | Description | Type | Default |
---|---|---|---|
textSize | text size | integer | 108 |
text | text content | String | Test |
autoStart | start animation from 0 to 1 at the beginning | boolean | false |
showInStart | show the text path at the beginning | boolean | false |
textInCenter | make the text in the center | boolean | false |
duration | duration of animation(ms) | integer | 10000 |
showPainter | whether the Painter Effects can show while animating | boolean | false |
showPainterActually | whether the Painter Effects can show while drawing.It will be set to false when the animator finish. | boolean | false |
the stroke width of path | dimension | ||
the stroke color of path | color | Color.black | |
paintStrokeWidth | width of paint effect stroke | dimension | 3px |
paintStrokeColor | color of paint effect stroke | color | Color.black |
repeat | repeat type of animation | enum | NONE |
repeat | Description |
---|---|
NONE | no repeat |
RESTART | restart to play |
REVERSE | reverse to play |
Methods
Painter Effects
//Set brush effects Public void setPainter(SyncPathPainter listener); //Set brush effects Public void setPainter(AsyncPathPainter listener);
There are types of PathPainter:
Public interface SyncPathPainter extends PathPainter { // Execute when starting animation Void onStartAnimation(); /** * Paint brush effects when executed * @param x The current drawing point x coordinate * @param y current drawing point y coordinates * @param paintPath brush Path object, draw the desired brush effect here */ @Override Void onDrawPaintPath(float x, float y, Path paintPath); } Public interface AsyncPathPainter extends PathPainter { /** * Paint brush effects when executed * @param x The current drawing point x coordinate * @param y current drawing point y coordinates * @param paintPath brush Path object, draw the desired brush effect here */ @Override Void onDrawPaintPath(float x, float y, Path paintPath); }
You can extend one of these PathPainter to draw your custom paint effects. There are three paint effects in TextPathView’s code:
//an arrow point ahead public class ArrowPainter implements SyncPathPainter { //a simple shape of pen public class PenPainter implements SyncPathPainter,AsyncPathPainter { //a firework effec public class FireworksPainter implements SyncPathPainter {
Custom Effects
Making custom effect is very easy. You can override onDrawPaintPath(float x, float y, Path paintPath):
atpv2.setPathPainter(new AsyncPathPainter() { @Override public void onDrawPaintPath(float x, float y, Path paintPath) { paintPath.addCircle(x,y,6, Path.Direction.CCW); } });
AnimatorListener
// Set a custom animation listener Public void setAnimatorListener(PathAnimatorListener animatorListener);
PathAnimatorListener implements AnimatorListener and we can use to listen the text path animation.
Getting the Paint
//Get the paint brush: get the paint of path Public Paint getDrawPaint() { Return mDrawPaint; } // Get a paint brush effect: get the paint of paint effect Public Paint getPaint() { Return mPaint; }
Drawing Control
/** * Start to draw text path animation * @param start path ratio, range 0-1 * @param end path ratio, range 0-1 */ Public void startAnimation(float start, float end); /** * How to draw the text path * @param progress painting progress, 0-1 */ Public void drawPath(float progress); /** * Stop animation */ Public void stopAnimation(); /** * Pause animation */ @RequiresApi(api = Build.VERSION_CODES.KITKAT) Public void pauseAnimation(); /** * Resume animation */ @RequiresApi(api = Build.VERSION_CODES.KITKAT) Public void resumeAnimation();
Filling Color
//Show all text filled with color directly: fill the text path with storke color Public void showFillColorText();
Usually, you can use showFillColorText()
when the animation(0-1) end:
// Set the animation fill color after playing stpv_fortune.setAnimatorListener (new PathAnimatorListener (stpv_fortune) { @Override public void onAnimationEnd (Animator animation) { super.onAnimationEnd (animation); stpv_fortune.showFillColorText (); } }); stpv_wish.setCanShowPainter (true);
Else
//Set text content Public void setText(String text); / / Set the path, you must first set the path to startAnimation (), or will report an error! //It must be used before startAnimation(). Public void setPath(Path path) ; // Set the font style Public void setTypeface(Typeface typeface); // clear the screen Public void clear(); // Whether to show the brush effect when setting animation: Here to set whether the Painter Effects can show while animating. Public void setShowPainter(boolean showPainter); / / Set whether to display the brush effect at all times, because the animation drawing should disappear after the brush effects, so each execution of the animation will automatically be set to false: Here to set whether the Painter Effects can show while drawing.It will be set to false When the animator finish. Public void setCanShowPainter(boolean canShowPainter); // Set the animation duration Public void setDuration(int duration); //Set repeat mode Public void setRepeatStyle(int repeatStyle);
That’s it !! Hope you enjoy this library article. If you faced any issues then comment me below and please share this useful tutorial with your friends.
Share your thoughts