Как нарисовать несколько линий с постоянной скоростью на холсте на Android? - PullRequest
Новая
       27

Как нарисовать несколько линий с постоянной скоростью на холсте на Android?

0 голосов
/ 04 июня 2018

Мне нужно захватить метку, чтобы нарисовать фигуру на холсте в Android, и эффект, подобный следующему gif:

enter image description here

Ну, какпока что я могу нарисовать сторону с постоянной скоростью с помощью ValueAnimator .Однако я могу рисовать только одну сторону за раз, потому что не могу сохранить последнюю сторону при рисовании следующей.Итак, есть ли хороший способ решить проблему?

Код для медленного рисования линии с помощью ValueAnimator:

GraphicsView.java 

public class GraphicsView extends View {
    private int stepX, stepY = 0;
    private int startX, startY, stopX, stopY = 0;
    private Paint paint = null;

    public GraphicsView(Context context) {
        super(context);

        // Paint
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);

        startX = 40;
        startY = 397;
        stopX  = 1040; 
        stopY  = 397;

        Init();
    }

    public void Init(){
        ValueAnimator animatorX = ValueAnimator.ofFloat(startX, stopX);
        ValueAnimator animatorY = ValueAnimator.ofFloat(startY, stopY);

        animatorX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                stepX = Math.round((Float)valueAnimator.getAnimatedValue()); invalidate();
            }
        });
        animatorY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                stepY = Math.round((Float)valueAnimator.getAnimatedValue()); invalidate();
            }
        });

        AnimatorSet set = new AnimatorSet();
        LinearInterpolator l = new LinearInterpolator();
        set.setInterpolator(l);
        set.setDuration(3000);
        set.playTogether(animatorX, animatorY);
        set.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(startX, startY, stepX, stepY, paint);
    }
}

MainActivity.java 

public class MainActivity extends AppCompatActivity {   
    private Display display         = null;  
    private GraphicsView view       = null;  
    private ConstraintLayout layout = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        display = getWindowManager().getDefaultDisplay();
        layout = (ConstraintLayout)findViewById(R.id.main_layout);

        view = new GraphicsView(this);
        view.setMinimumWidth(display.getWidth());
        view.setMinimumHeight(display.getHeight());   
        layout.addView(view);
    }
}

1 Ответ

0 голосов
/ 03 июля 2018

вы можете использовать класс ObjectAnimator для обратного вызова одного из ваших методов класса каждый раз, когда вы хотите нарисовать немного больше пути. 

import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.view.View;
import android.util.Log;

public class PathView extends View
{
    Path path;
    Paint paint;
    float length;

    public PathView(Context context)
    {
        super(context);
    }

    public PathView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public PathView(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
    }

    public void init()
    {
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);

        path = new Path();
        path.moveTo(50, 50);
        path.lineTo(50, 500);
        path.lineTo(200, 500);
        path.lineTo(200, 300);
        path.lineTo(350, 300);

        // Measure the path
        PathMeasure measure = new PathMeasure(path, false);
        length = measure.getLength();

        float[] intervals = new float[]{length, length};

        ObjectAnimator animator = ObjectAnimator.ofFloat(PathView.this, "phase", 1.0f, 0.0f);
        animator.setDuration(3000);
        animator.start();
    }

    //is called by animtor object
    public void setPhase(float phase)
    {
        Log.d("pathview","setPhase called with:" + String.valueOf(phase));
        paint.setPathEffect(createPathEffect(length, phase, 0.0f));
        invalidate();//will calll onDraw
    }

    private static PathEffect createPathEffect(float pathLength, float phase, float offset)
    {
        return new DashPathEffect(new float[] { pathLength, pathLength },
            Math.max(phase * pathLength, offset));
    }

    @Override
    public void onDraw(Canvas c)
    {
        super.onDraw(c);
        c.drawPath(path, paint);
    }
}

Затем просто вызовите init (), чтобы начатьанимация, подобная этой (или если вы хотите, чтобы она запускалась, как только представление будет раздуто, поместите вызов init () внутри конструкторов): 

PathView path_view = (PathView) root_view.findViewById(R.id.path);
path_view.init();

Также см. этот вопрос здесь и

Пример использования аниматора значений

Ссылка 1

Ссылка 2

Ссылка 3

...