仿Android的呼吸动画

前言

简单模仿了下Android的呼吸动画，实现比较简单，很多细节还可以调整，另外如果动画更复杂，建议直接通过lottie实现。

实现

继承FramLayout 创建一个动画类，代码如下

public class AvatarFrame extends FrameLayout {

    private float cx;

    private float cy;

    private float mStartRadius;

    private float outsideRadius;

    private float middleRadius;

    private float insideRadius;

    private Paint outsidePaint;

    private Paint middlePaint;

    private Paint insidePaint;

    private Paint strokePaint;

    private float layerWidth;

    private float strokeWidth;

    private float extraWidth;

    public AvatarFrame(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        init();

    }

    public AvatarFrame(@NonNull Context context, @Nullable AttributeSet attrs) {

        this(context, attrs,0);

    }

    public AvatarFrame(@NonNull Context context) {

        this(context,null);

    }

    private void init(){

        setWillNotDraw(false);

        strokeWidth = convertDpToPx(3);

        strokePaint = new Paint();

        strokePaint.setAntiAlias(true);

        strokePaint.setStrokeWidth(convertDpToPx(3));

        strokePaint.setStyle(Paint.Style.STROKE);

        strokePaint.setColor(Color.BLUE);

        outsidePaint = new Paint();

        outsidePaint.setAntiAlias(true);

        outsidePaint.setColor(Color.parseColor("#FF5B26"));

        outsidePaint.setAlpha(76);

        middlePaint = new Paint();

        middlePaint.setAntiAlias(true);

        middlePaint.setColor(Color.RED);

        middlePaint.setAlpha(140);

        insidePaint = new Paint();

        insidePaint.setAntiAlias(true);

        insidePaint.setColor(Color.parseColor("#FF5B26"));

        insidePaint.setAlpha(76);

    }

    @Override

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

        super.onLayout(changed, left, top, right, bottom);

        cx = (float) getWidth()/2;

        cy = (float)getHeight()/2;

        extraWidth = getPaddingLeft() - strokeWidth;

        layerWidth = extraWidth / 3;

        mStartRadius =  (float) getWidth()/2 - extraWidth;

    }

    @Override

    protected void onDraw(Canvas canvas) {

        if(!isClear){

            canvas.drawCircle(cx,cy,insideRadius,insidePaint);

            canvas.drawCircle(cx,cy,middleRadius,middlePaint);

            canvas.drawCircle(cx,cy,outsideRadius,outsidePaint);

            canvas.drawCircle(cx,cy,mStartRadius - strokeWidth ,strokePaint);

        }

        super.onDraw(canvas);

    }

    private void update(float percent){

        isClear = false;

        outsideRadius = mStartRadius + (extraWidth * percent);

        middleRadius = mStartRadius  + ((extraWidth - layerWidth) * percent);

        insideRadius = mStartRadius + ((extraWidth - layerWidth * 2) * percent);

        invalidate();

    }

    boolean isClear;

    private void clear(){

        isClear = true;

        invalidate();

    }

    public void stopAnim(){

        if(animator != null && animator.isRunning()){

            animator.cancel();

        }

        clear();

    }

    private ValueAnimator animator;

    public void startAnim(){

        animator = ValueAnimator.ofFloat(0,1f);

        animator.setDuration(500);

        animator.setRepeatMode(ValueAnimator.REVERSE);

        animator.setRepeatCount(-1);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

                float percent = (float) animation.getAnimatedValue();

                update(percent);

            }

        });

        animator.start();

    }

    public float  convertDpToPx(float dp){

        return (getDefaultDisplayMetrics().density * dp );

    }

    public  DisplayMetrics getDefaultDisplayMetrics(){

        return getResources().getDisplayMetrics();

    }

使用

<?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"

    android:gravity="center_horizontal"

    tools:context=".MainActivity">

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="50dp"

        android:text="play"

        android:id="@+id/btnPlay"/>

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="50dp"

        android:text="Stop"

        android:id="@+id/btnStop"/>

    <com.gg.AvatarFrame

        android:layout_gravity="center"

        android:layout_marginTop="50dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="12dp"

        android:id="@+id/fm_avatar">

        <ImageView

            android:layout_width="120dp"

            android:layout_height="120dp"

            android:background="@drawable/bg_frame"

            android:id="@+id/ivImage"

            />

    </com.gqs.androidtest.AvatarFrame>

</LinearLayout>

mAvatarFrame = findViewById(R.id.fm_avatar);

        Button button = findViewById(R.id.btnPlay);

        Button btnStop = findViewById(R.id.btnStop);

        btnStop.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                mAvatarFrame.stopAnim();

            }

        });

        button.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                mAvatarFrame.startAnim();

            }

        });

基本就是这样，代码很简单，就不过多介绍了