1. A brief introduction
The principle of custom view animation is to define a value that changes as the animation progresses. In onDraw(), draw with one or more of the parameters *value/100(assuming the maximum animation progress is set to 100); When the animation object is then set, postInvalidate() is called to notify the view to redraw each time the value changes, and onDraw()…… is called again So loop, thereby rendering animation.
2. Use
Actual effect:
2.1 Code Interpretation
2.1.1 Animation control
private int animProgress = 0;// Define a value that follows the progress of the animation
private ValueAnimator mAnimtor ;
public void startAnim(a){
if (mAnimtor == null){
mAnimtor = ValueAnimator.ofInt(0.100);
mAnimtor.setDuration(800);// Animation duration
mAnimtor.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
animProgress = (int) valueAnimator.getAnimatedValue(); postInvalidate(); }}); } mAnimtor.start(); }Copy the code2.1.2 Initializing drawing
private Paint mPaint;
private Path mPath;
public DiyViewAnim(Context context) {
super(context);
mPaint = new Paint();
mPath = new Path();
}
public DiyViewAnim(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPath = new Path();
}
Copy the code2.1.3 Dynamic drawing based on the value
For the numerical meaning of the bar chart, refer to custom View (4): Self-drawing
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.reset();
mPath.reset();
//1. Draw the axes
mPaint.setColor(Color.parseColor("# 404040"));
mPaint.setStyle(Paint.Style.STROKE);
mPath.moveTo(120.120);//y axis vertex (120,120)
mPath.rLineTo(0.600);/ / y direction
mPath.rLineTo(800.0);/ / the x axis
canvas.drawPath(mPath, mPaint);/ / to draw
//2. Draw the X-axis label
mPaint.reset();
mPaint.setColor(Color.parseColor("# 404040"));
mPaint.setTextSize(18);//px
mPaint.setStyle(Paint.Style.FILL);
/ / false data
canvas.drawText("January".120 + 20.120 + 600 + 28, mPaint);
canvas.drawText("February".120 + 20 * 2 + 60 * (2 - 1), 600 + 120 + 28, mPaint);
canvas.drawText("March".120 + 20 * 3 + 60 * (3 - 1), 600 + 120 + 28, mPaint);
//3. Draw a bar chart
float[] lines = {
120 + 20 * (1) + 60 * ((1) - 1 + 0.5 f),
600 + 120.120 + 20 * (1) + 60 * ((1) - 1 + 0.5 f),
600 + 120 - 180*animProgress/100.120 + 20 * (2) + 60 * ((2) - 1 + 0.5 f),
600 + 120.120 + 20 * (2) + 60 * ((2) - 1 + 0.5 f),
600 + 120 - 420*animProgress/100.120 + 20 * (3) + 60 * ((3) - 1 + 0.5 f),
600 + 120.120 + 20 * (3) + 60 * ((3) - 1 + 0.5 f),
600 + 120 - 140*animProgress/100
};
mPaint.reset();
mPaint.setColor(Color.parseColor("#6ce4d8"));
mPaint.setStrokeWidth(60);
canvas.drawLines(lines, mPaint);
}
Copy the codeXML 2.2 using
<com.cupster.base_super_resource.DiyViewAnim
android:id="@+id/diy_chart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Copy the code DiyViewAnim diyChart = findViewById(R.id.diy_chart);
diyChart.startAnim();
Copy the code3. Complete View code
package com.cupster.base_super_resource;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import androidx.annotation.Nullable;
public class DiyViewAnim extends View {
public DiyViewAnim(Context context) {
super(context);
mPaint = new Paint();
mPath = new Path();
}
public DiyViewAnim(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPath = new Path();
}
public DiyViewAnim(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPath = new Path();
}
public DiyViewAnim(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
mPaint = new Paint();
mPath = new Path();
}
private Paint mPaint;
private Path mPath;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.reset();
mPath.reset();
//1. Draw the axes
mPaint.setColor(Color.parseColor("# 404040"));
mPaint.setStyle(Paint.Style.STROKE);
mPath.moveTo(120.120);//y axis vertex (120,120)
mPath.rLineTo(0.600);/ / y direction
mPath.rLineTo(800.0);/ / the x axis
canvas.drawPath(mPath, mPaint);/ / to draw
//2. Draw the X-axis label
mPaint.reset();
mPaint.setColor(Color.parseColor("# 404040"));
mPaint.setTextSize(18);//px
mPaint.setStyle(Paint.Style.FILL);
/ / false data
canvas.drawText("January".120 + 20.120 + 600 + 28, mPaint);
canvas.drawText("February".120 + 20 * 2 + 60 * (2 - 1), 600 + 120 + 28, mPaint);
canvas.drawText("March".120 + 20 * 3 + 60 * (3 - 1), 600 + 120 + 28, mPaint);
//3. Draw a bar chart
float[] lines = {
120 + 20 * (1) + 60 * ((1) - 1 + 0.5 f),
600 + 120.120 + 20 * (1) + 60 * ((1) - 1 + 0.5 f),
600 + 120 - 180*animProgress/100.120 + 20 * (2) + 60 * ((2) - 1 + 0.5 f),
600 + 120.120 + 20 * (2) + 60 * ((2) - 1 + 0.5 f),
600 + 120 - 420*animProgress/100.120 + 20 * (3) + 60 * ((3) - 1 + 0.5 f),
600 + 120.120 + 20 * (3) + 60 * ((3) - 1 + 0.5 f),
600 + 120 - 140*animProgress/100
};
mPaint.reset();
mPaint.setColor(Color.parseColor("#6ce4d8"));
mPaint.setStrokeWidth(60);
canvas.drawLines(lines, mPaint);
}
private int animProgress = 0;
private ValueAnimator mAnimtor ;
public void startAnim(a){
if (mAnimtor == null){
mAnimtor = ValueAnimator.ofInt(0.100);
mAnimtor.setDuration(800);
mAnimtor.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
animProgress = (int) valueAnimator.getAnimatedValue(); postInvalidate(); }}); } mAnimtor.start(); }}Copy the code