上一篇文章我们使用属性动画实现了自定义view的动画效果，这篇文章主要是结合属性动画自定义一个文字变色的view。先来看效果图。
1645064533118.gif
这篇文章我就直接先贴代码了，里面都有注释，后面分析属性动画时会再来对本文章进行补充。
自定义属性：
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ColorTrackTextView">
<attr name="originColor" format="color"/>
<attr name="changeColor" format="color"/>
</declare-styleable>
</resources>
自定义view
ColorTrackTextView.java
public class ColorTrackTextView extends androidx.appcompat.widget.AppCompatTextView {
//变色的画笔
private Paint mOriginPaint;
//不变色的画笔
private Paint mChangePaint;
private float mCurrentProcess = 0.0f;
//朝向
private Direction direction=Direction.LEFT_TO_RIGHT;
public enum Direction{
LEFT_TO_RIGHT,RIGHT_TO_Left
}
public ColorTrackTextView(Context context) {
this(context, null);
}
public ColorTrackTextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ColorTrackTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint(context, attrs);
}
private void initPaint(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ColorTrackTextView);
int originColor = array.getColor(R.styleable.ColorTrackTextView_originColor, getTextColors().getDefaultColor());
int changeColor = array.getColor(R.styleable.ColorTrackTextView_changeColor, getTextColors().getDefaultColor());
mOriginPaint = getPointByColor(originColor);
mChangePaint = getPointByColor(changeColor);
array.recycle();
}
private Paint getPointByColor(int color) {
Paint paint = new Paint();
paint.setColor(color);
paint.setAntiAlias(true);//抗锯齿
paint.setDither(true);//防抖动
paint.setTextSize(getTextSize());
return paint;
}
//一个文字两种颜色思路 利用clipRect进行裁剪 用两个画笔来画 左边一个 右边一个 裁剪时不断改变裁剪宽度
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
int middle = (int) (mCurrentProcess * getWidth());
if(direction==Direction.LEFT_TO_RIGHT) {//左到右 黑变红 直到全部变为红
//绘制不变色
drawText(canvas, mChangePaint, 0, middle);
//绘制变色的
drawText(canvas, mOriginPaint, middle, getWidth());
}else{//右到左 黑变红 直到全部变为红
//绘制不变色
drawText(canvas, mChangePaint, getWidth()-middle, getWidth());
//绘制变色的
drawText(canvas, mOriginPaint, 0, getWidth()-middle);
}
}
private void drawText(Canvas canvas,Paint paint,int start,int end){
canvas.save();
canvas.clipRect(start, 0, end, getHeight());//裁剪区域
String text = getText().toString();
//获取字体宽度
Rect bound = new Rect();
paint.getTextBounds(text, 0, text.length(), bound);
int x = getWidth() / 2 - bound.width() / 2;
//获取基线
Paint.FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
int baseLine = getHeight() / 2 + dy;
canvas.drawText(text, x, baseLine, paint);
canvas.restore();
}
//设置字体变色的方向
public void setDirection(Direction direction){
this.direction=direction;
}
//设置当前变色进度
public void setCurrentPress(float currentPress){
this.mCurrentProcess=currentPress;
invalidate();
}
}
MainActivity3.java
private ColorTrackTextView mColorTrackTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
mColorTrackTextView=findViewById(R.id.color_track_textview);
}
public void LeftToRight(View view){
mColorTrackTextView.setDirection(ColorTrackTextView.Direction.LEFT_TO_RIGHT );
ValueAnimator valueAnimator= ObjectAnimator.ofFloat(0,1);
valueAnimator.setDuration(2000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float currentProcess= (float) animation.getAnimatedValue();
mColorTrackTextView.setCurrentPress( currentProcess);
}
});
valueAnimator.start();
}
public void RightToLeft(View view){
mColorTrackTextView.setDirection(ColorTrackTextView.Direction.RIGHT_TO_Left);
ValueAnimator valueAnimator=ObjectAnimator.ofFloat(0,1);
valueAnimator.setDuration(2000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float currentProcess= (float) animation.getAnimatedValue();
mColorTrackTextView.setCurrentPress(currentProcess);
}
});
valueAnimator.start();
}
}
activity_main3/xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity2">
<com.example.kotlindemo.ColorTrackTextView
android:id="@+id/color_track_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Word"
android:textSize="20sp"
app:changeColor="@color/purple_200" />
<Button
android:onClick="LeftToRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="左到右"
tools:ignore="OnClick" />
<Button
android:onClick="RightToLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="右到左"
tools:ignore="OnClick" />
</LinearLayout>
网友评论