# TextPathView
![](https://img.shields.io/badge/JCenter-0.2.1-brightgreen.svg)
## Introduction
TextPathView is a view with text path animation!
## Get started
### Gradle
```
compile 'com.yanzhikai:TextPathView:0.2.1'
```
> minSdkVersion 16
> Hardware acceleration may cause some problems when using version 0.1.2.
### 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.
Here is a demo:
In the xml:
```
```
In the java:
```
atpv1 = findViewById(R.id.atpv_1);
stpv_2017 = findViewById(R.id.stpv_2017);
//从无到显示
atpv1.startAnimation(0,1);
//从显示到消失
stpv_2017.startAnimation(1,0);
```
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);
```
![](https://github.com/totond/MyTUKU/blob/master/textdemo2.gif?raw=true)
### 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|
||~~textStrokeWidth~~ strokeWidth |the stroke width of path | dimension| 5px|
|~~textStrokeColor~~ pathStrokeColor | 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
```
//设置画笔特效
public void setPainter(SyncPathPainter listener);
//设置画笔特效
public void setPainter(AsyncPathPainter listener);
```
There are types of PathPainter:
```
public interface SyncPathPainter extends PathPainter {
//开始动画的时候执行
void onStartAnimation();
/**
* 绘画画笔特效时候执行
* @param x 当前绘画点x坐标
* @param y 当前绘画点y坐标
* @param paintPath 画笔Path对象,在这里画出想要的画笔特效
*/
@Override
void onDrawPaintPath(float x, float y, Path paintPath);
}
public interface AsyncPathPainter extends PathPainter {
/**
* 绘画画笔特效时候执行
* @param x 当前绘画点x坐标
* @param y 当前绘画点y坐标
* @param paintPath 画笔Path对象,在这里画出想要的画笔特效
*/
@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);
}
});
```
![](https://github.com/totond/MyTUKU/blob/master/textdemo3.gif?raw=true)
#### AnimatorListener
```
//设置自定义动画监听
public void setAnimatorListener(PathAnimatorListener animatorListener);
```
PathAnimatorListener implements AnimatorListener and we can use to listen the text path animation.
#### Getting the Paint
```
//获取绘画文字的画笔:get the paint of path
public Paint getDrawPaint() {
return mDrawPaint;
}
//获取绘画画笔特效的画笔:get the paint of paint effect
public Paint getPaint() {
return mPaint;
}
```
#### Drawing Contorl
```
/**
* 开始绘制文字路径动画
* @param start 路径比例,范围0-1
* @param end 路径比例,范围0-1
*/
public void startAnimation(float start, float end);
/**
* 绘画文字路径的方法
* @param 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
```
//直接显示填充好颜色了的全部文字: fill the text path with storke color
public void showFillColorText();
```
Usually, you can use `showFillColorText()` when the animation(0-1) end:
```
//设置动画播放完后填充颜色
stpv_fortune.setAnimatorListener(new PathAnimatorListener(stpv_fortune){
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
stpv_fortune.showFillColorText();
}
});
stpv_wish.setCanShowPainter(true);
```
![](https://github.com/totond/MyTUKU/blob/master/textdemo4.gif?raw=true)
#### 取值计算器
TextPathView add PathCalculator from v0.2.+. We can use `setCalculator(PathCalculator calculator)`to set it. PathCalculator can control the value of the start and end attributes of the path corresponding to different progress. There is some subclass of PathCalculator :
- **MidCalculator**
![MidCalculator](https://github.com/totond/MyTUKU/blob/master/text4.gif?raw=true)
- **AroundCalculator**
![AroundCalculator](https://github.com/totond/MyTUKU/blob/master/text5.gif?raw=true)
- **BlinkCalculator**
![BlinkCalculator](https://github.com/totond/MyTUKU/blob/master/text2.gif?raw=true)
- **Custom PathCalculator:**We can make a custom PathCalculator with `setStart(float start)` and`setEnd(float end)`.
#### Else
```
//设置文字内容
public void setText(String text);
//设置路径,必须先设置好路径在startAnimation(),不然会报错!
//It must be used before startAnimation().
public void setPath(Path path) ;
//设置字体样式
public void setTypeface(Typeface typeface);
//清除画面
public void clear();
//设置动画时能否显示画笔效果:Here to set whether the Painter Effects can show while animating.
public void setShowPainter(boolean showPainter);
//设置所有时候是否显示画笔效果,由于动画绘画完毕应该将画笔特效消失,所以每次执行完动画都会自动设置为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);
//设置动画持续时间
public void setDuration(int duration);
//设置重复方式
public void setRepeatStyle(int repeatStyle);
```
## Update
- 2018/03/08 **version 0.0.5**:
- add `showFillColorText()`
- 把PathAnimatorListener从PathView的内部类里面解放出来,之前使用太麻烦了。
- add `showPainterActually` to control whether the Painter Effects can show while drawing.It will be set to false when the animator finish.
- 2018/03/08 **version 0.0.6**:
- add `stop(), pause(), resume()`,API version >= 19.
- add `repeat`,API version >= 19.
- Thanks for [toanvc](https://github.com/toanvc)'s contribution!
- 2018/03/18 **version 0.1.0**:
- Made a reconstruction,add Class :SyncPathView and AsyncPathView,and their superclass PathView.
- Add `setDuration()`、`setRepeatStyle()`
- Changed names:
|Old Name|New Name|
|---|---|
|TextPathPainter|PathPainter|
|SyncTextPainter|SyncPathPainter|
|AsyncTextPainter|AsyncPathPainter|
|TextAnimatorListener|PathAnimatorListener|
- 2018/03/21 **version 0.1.2**:
- Fixed: It will not completely display when warp_content.
- TextPathView can use `setTypeface()` now.
- Suppurted word wrap.
![](https://github.com/totond/MyTUKU/blob/master/textdemo5.gif?raw=true)
- 2018/09/09 **version 0.1.3**:
- Turn off the hardware acceleration by default
- Avoided memory leaks
![TextPathView v0.2.+](https://raw.githubusercontent.com/totond/MyTUKU/master/textpathnew1.png)
### To do:
- More pianter effects, more types of animation!
- Make it smoother and more efficient.
- Word wrap support.
## Code contribution
If it's a feature that you think would need to be discussed please open an issue first, otherwise, you can:
- Create a feature branch (git checkout -b my_branch)
- If you want to fix a problem. Your code must contain test for reproducing problem. Your tests must be passed with help of your fix.
- If you want to add a new feature. Please create a new activity, such as SecondActivity, to show the new feature.
## LICENSE
TextPathView follows MIT license.
## About
> id:Yanzhikai
> Email:yanzhikai_yjk@qq.com
> CSDN:http://blog.csdn.net/totond