仿WPS三色转圈圈动画

偶然看到wps的加载动画有点意思，试着写一个。

实现原理：

把动画拆分成三个颜色的部分，每个部分都是有两个点，一个快一个慢。

算出fast和slow的路程函数（假设时间t1 = 1000）

S1 = -V0 / t1 * t*t + V0 *t;

S2 = V0*t*t / 2t1

 

p.s.我这里用了线性的递减和递增（后续在使用Interpolator的时候再用 慢--快--慢 ）。其实也可以模拟速度的时候就用先用 慢--快--慢，再用积分求路程。

 

WPSCircleView.java

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class WPSCircleView extends View implements ValueAnimator.AnimatorListener, ValueAnimator.AnimatorUpdateListener, View.OnClickListener {



    //跑得快的初始速度，慢的初始速度为0
    private static final float v0 = 4;
    //总时长
    private static final int ANIMATION_TIME = 1000;
    //每个颜色跑的角度
    private static final int TOTAL_ANGLE = 600;
    private static final int COLOR_1 = Color.parseColor("#ff478a");
    private static final int COLOR_2 = Color.parseColor("#447dee");
    private static final int COLOR_3 = Color.parseColor("#ea831a");
    private static final int[] COLOR_ARRAY = {COLOR_1,COLOR_2,COLOR_3};
    int progressF = 0;
    int progressS = 0;
    int mColorIndex;
    float mStartAngle = -90f;
    ValueAnimator valueAnimator;
    
    public WPSCircleView(Context context) {
        super(context);
        init();
    }

    public WPSCircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public WPSCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        valueAnimator = ValueAnimator.ofInt(ANIMATION_TIME);
        valueAnimator.addUpdateListener(this);
        valueAnimator.addListener(this);
        valueAnimator.setInterpolator(new MyInterpolator());
        valueAnimator.setDuration(1000);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(COLOR_ARRAY[mColorIndex]);
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        setOnClickListener(this);
    }



    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        valueAnimator.cancel();
    }


    Paint mPaint;
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        int t = (int) animation.getAnimatedValue();
        progressF = (int)(v0/-2000f * Math.pow(t,2) + v0 * t);
        progressS = (int)(v0*Math.pow(t,2)/2000);

        invalidate();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawArc(new RectF(3,3,200,200),
                mStartAngle + progressS*TOTAL_ANGLE/v0/ANIMATION_TIME*2,(progressF-progressS)*560/v0/ANIMATION_TIME*2,false,mPaint);
    }

    @Override
    public void onClick(View v) {
        valueAnimator.start();
    }

    @Override
    public void onAnimationStart(Animator animation) {

    }

    @Override
    public void onAnimationEnd(Animator animation) {

    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        mStartAngle = (mStartAngle + TOTAL_ANGLE) % 360;
        mPaint.setColor(COLOR_ARRAY[++mColorIndex % COLOR_ARRAY.length]);

    }
}

 

MyInterpolator.java

package com.example.myapplication;


import android.view.animation.LinearInterpolator;

public class MyInterpolator extends LinearInterpolator {

    @Override
    public float getInterpolation(float input) {
        return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
    }
}