自定义View--操作动画

不念不忘少年蓝@ 2022-08-05 00:49 136阅读 0赞

## ![这里写图片描述][20150527114846906] ##

### 计算 ###

![这里写图片描述][20150527134301659]

![这里写图片描述][20150527134158033]

/*
     * Created by Hanks
     * Copyright (c) 2015 Nashangban. All rights reserved
     *
     */
    package app.hanks.com.customanimateview.OpAnimateView;
    
    import android.animation.ValueAnimator;
    import android.annotation.TargetApi;
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.PointF;
    import android.os.Build;
    import android.util.AttributeSet;
    import android.view.View;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import app.hanks.com.customanimateview.R;
    
    /**
     * Created by Hanks on 2015/5/27.
     */
    public class OpAnimationView extends View {
        
    
        private Paint paint;
        private Paint paintShadow;
    
        private int width;
        private int height;
        private int c;
    
        private boolean isAnimating  = false;    //is isAnimating?
        private boolean isRgihtShape = false;    //is in right_shap?
    
        private float progress;        //animation‘s progress
        private int DURATION = 300;      // animation DURATION
        private int r;        //randius
        private int shadowWidth;        //shadow randius
        private int defaultShapeWidth;
        private int shapeWidth;
    
        public OpAnimationView(Context context) {
            this(context, null);
        }
    
        public OpAnimationView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public OpAnimationView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(context, attrs, defStyleAttr);
        }
    
        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        public OpAnimationView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }
    
        /**
         * init paint
         *
         * @param context
         * @param attrs
         * @param defStyleAttr
         */
        private void init(Context context, AttributeSet attrs, int defStyleAttr) {
    
            defaultShapeWidth = dp2px(4);
    
            paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    
            paintShadow = new Paint(Paint.ANTI_ALIAS_FLAG);
            setLayerType(LAYER_TYPE_SOFTWARE, paintShadow);
    
            shadowWidth = dp2px(4);
            paintShadow.setShadowLayer(shadowWidth, 0.0f, dp2px(2), Color.parseColor("#66000000"));
    
    
            // load the styled attributes and set their properties
            TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.OpAnimationView, defStyleAttr, 0);
    
            setBackgroundColor(attributes.getColor(R.styleable.OpAnimationView_backgroundColor, Color.parseColor("#FF4081")));
            setShapeColor(attributes.getColor(R.styleable.OpAnimationView_shapeColor, Color.parseColor("#ffffff")));
            shapeWidth = attributes.getDimensionPixelOffset(R.styleable.OpAnimationView_shapeWidth, defaultShapeWidth);
            setShapeWidth(shapeWidth);
    
            // We no longer need our attributes TypedArray, give it back to cache
            attributes.recycle();
    
        }
    
    
        private List<PointF> points = new ArrayList<>();
    
        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            width = w;
            height = h;
            r = Math.min(w, h) / 2 - shadowWidth;
            float g2 = (float) Math.sqrt(2);
            c = (int) (r / g2);
            float dis = r - c + dp2px(4);
    
            points.clear();
            points.add(new PointF(c + dis, c / 3f + dis));
            points.add(new PointF(c + dis, c * 5f / 3f + dis));
            points.add(new PointF(c / 3f + dis, c + dis));
            points.add(new PointF(c * 5f / 3f + dis, c + dis));
            points.add(new PointF(c * (1 + 3 * g2) / 3f + dis, c * (3 - g2) / 3f + dis));
            points.add(new PointF(c * (1 + g2) / 3f + shapeWidth / g2 / 2 + dis, c * (3 + g2) / 3f + shapeWidth / g2 / 2 + dis));
            points.add(new PointF(c * (1 + g2) / 3f - shapeWidth / g2 / 2 + dis, c * (3 + g2) / 3f + shapeWidth / g2 / 2 + dis));
        }
    
        //set background circle color
        public void setBackgroundColor(int color) {
            paintShadow.setColor(color);
        }
    
        //set center shape color
        public void setShapeColor(int color) {
            paint.setColor(color);
        }
    
        public void setShapeWidth(int width) {
            paint.setStrokeWidth(width);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
    
            canvas.drawCircle(width / 2, height / 2, r, paintShadow);
    
            if (isRgihtShape) { // right --> add
                float x0 = (points.get(0).x - points.get(4).x) * progress + points.get(4).x;
                float y0 = (points.get(0).y - points.get(4).y) * progress + points.get(4).y;
                float x1 = (points.get(1).x - points.get(6).x) * progress + points.get(6).x;
                float y1 = (points.get(1).y - points.get(6).y) * progress + points.get(6).y;
    
                float x2 = points.get(2).x;
                float y2 = points.get(2).y;
                float x3 = (points.get(3).x - points.get(5).x) * progress + points.get(5).x;
                float y3 = (points.get(3).y - points.get(5).y) * progress + points.get(5).y;
                canvas.drawLine(x0, y0, x1, y1, paint);
                canvas.drawLine(x2, y2, x3, y3, paint);
    
            } else { //add --> right
    
                float x0 = (points.get(4).x - points.get(0).x) * progress + points.get(0).x;
                float y0 = (points.get(4).y - points.get(0).y) * progress + points.get(0).y;
                float x1 = (points.get(6).x - points.get(1).x) * progress + points.get(1).x;
                float y1 = (points.get(6).y - points.get(1).y) * progress + points.get(1).y;
    
                float x2 = points.get(2).x;
                float y2 = points.get(2).y;
                float x3 = (points.get(5).x - points.get(3).x) * progress + points.get(3).x;
                float y3 = (points.get(5).y - points.get(3).y) * progress + points.get(3).y;
                canvas.drawLine(x0, y0, x1, y1, paint);
                canvas.drawLine(x2, y2, x3, y3, paint);
            }
        }
    
        public boolean isRightShape() {
            return isRgihtShape;
        }
    
        /**
         * add_shape to right_shape
         */
        public void add2right() {
            if (isAnimating) {
                return;
            }
            progress = 0f;
            isAnimating = true;
            ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
            valueAnimator.setDuration(DURATION);
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    progress = (float) animation.getAnimatedValue();
                    if (progress >= 1) {
                        isRgihtShape = true;
                        isAnimating = false;
                    } else {
                        invalidate();
                    }
                }
            });
            valueAnimator.start();
        }
    
    
        /**
         * right_shape  to add_shape
         */
        public void right2add() {
            if (isAnimating) {
                return;
            }
            progress = 0f;
            isAnimating = true;
            ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
            valueAnimator.setDuration(DURATION);
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    progress = (float) animation.getAnimatedValue();
                    if (progress >= 1) {
                        isRgihtShape = false;
                        isAnimating = false;
                    } else {
                        invalidate();
                    }
                }
            });
            valueAnimator.start();
        }
    
        /**
         * dp×ª px.
         *
         * @param value the value
         * @return the int
         */
        public int dp2px(float value) {
            final float scale = getResources().getDisplayMetrics().densityDpi;
            return (int) (value * (scale / 160) + 0.5f);
        }
    }

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="OpAnimationView">
            <attr name="backgroundColor" format="color"></attr>
            <attr name="shapeColor" format="color"></attr>
            <attr name="shapeWidth" format="dimension"></attr>
        </declare-styleable>
    </resources>

**[源码][Link 1]**

[20150527114846906]: /images/20220805/ff97425cb00c4461a10742e9550cafb5.png
[20150527134301659]: /images/20220805/654461035cd34184a4da18ae87d6ce44.png
[20150527134158033]: /images/20220805/ff399577d0d6438b846e635360f4e3e8.png
[Link 1]: https://github.com/hanks-zyh/OpAnimateView