如何在Android中實現這種水滴動畫

Question

看到這對Dribbble ，這似乎是像一些SVG的東西，它很酷，我喜歡它！ 所以這是我的問題：

如何在Android中以60 FPS制作此動畫？

如果有某個地方，我可以不用IMAGE文件來做到這一點？

謝謝！

Answer 1

您能否嘗試下面的代碼，否則它會起作用。

   public class MyButton extends Button {

            private float mDownX;
            private float mDownY;

            private float mRadius;

            private Paint mPaint;
            private Path mPath = new Path();
            private Path mPath2 = new Path();

            public MyButton(final Context context) {
                super(context);
                init();
            }

            public MyButton(final Context context, final AttributeSet attrs) {
                super(context, attrs);
                init();
            }

            public MyButton(final Context context, final AttributeSet attrs,
                            final int defStyle) {
                super(context, attrs, defStyle);
                init();
            }

            private void init() {
                mPaint = new Paint();
                mPaint.setAlpha(100);
            }

            @Override
            public boolean onTouchEvent(@NonNull final MotionEvent event) {
                if (event.getActionMasked() == MotionEvent.ACTION_UP) {
                    mDownX = event.getX();
                    mDownY = event.getY();

                    ObjectAnimator animator = ObjectAnimator.ofFloat(this,
                            "radius", 0, getWidth() * 3.0f);
                    animator.setInterpolator(new AccelerateInterpolator());
                    animator.setDuration(400);
                    animator.start();
                }
                return super.onTouchEvent(event);
            }

            public void setRadius(final float radius) {
                mRadius = radius;
                if (mRadius > 0) {
                    RadialGradient radialGradient = new RadialGradient(mDownX,
                            mDownY, mRadius * 3, Color.TRANSPARENT, Color.BLACK,
                            Shader.TileMode.MIRROR);
                    mPaint.setShader(radialGradient);
                }
                invalidate();
            }

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

                mPath2.reset();
                mPath2.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW);

                canvas.clipPath(mPath2);

                mPath.reset();
                mPath.addCircle(mDownX, mDownY, mRadius / 3, Path.Direction.CW);

                canvas.clipPath(mPath, Region.Op.DIFFERENCE);

                canvas.drawCircle(mDownX, mDownY, mRadius, mPaint);
            }
        }