Text Path Animation for Android

0
600

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

1Demo

Demo of Text Path Animation Library
Demo of Text Path Animation Library

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

2Gradle

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 :

3Usage

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);
PathView : Demo of Text Path Animation Library
PathView : Demo of Text Path Animation Library

Useful for you : Add Android Rotating Text Animation

4Attributes

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
textStrokeWidth strokeWidth the stroke width of path dimension
textStrokeColorpaintStrokeColor 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

5Methods

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);
            }
        });
Custom Effect : Demo of Text Path Animation Library
Custom Effect : Demo of Text Path Animation Library

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);
Filling color Effect : Demo of Text Path Animation Library
Filling color Effect : Demo of Text Path Animation Library

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

Loading Facebook Comments ...
Loading Disqus Comments ...