Custom view - click bubble effect

One 、 The goal is ：

Achieve click “ like ” The button has an upward flowing bubble effect . As shown in the figure ：

Two 、 Core law analysis ：

The floating effect is similar to sin The activity law of function , But it's more natural to float , Random variables need to be introduced . So I decided to put w Set up 180, Plus random fluctuations 180; The phase is [0, 90] Random values in the range ; The amplitude is [0, mWidth / 2] The random value （mWidth Is the width of the control ）. And create ValueAnimator,duration Set to [2100, 2800] Internal random fluctuation .

Finally, you can get random y Random changes from small to large x The floating law is ：

among ,curVal / 100f Used to express the percentage of the current time in the set animation duration .

double x = (Math.sin(Math.toRadians(mW * (1 - curVal / 100f) + mOffset))) * mAmplitude; 

3、 ... and 、 Implementation code ：

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.FrameLayout;

import androidx.annotation.Nullable;

import com.tencent.edu.R;
import com.tencent.edu.common.utils.PixelUtil;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class BubbleViewLike extends FrameLayout {
    private int mWidth;
    private int mHeight;
    private List<Integer> mBubbleIcons = new ArrayList<>();

    public BubbleViewLike(Context context) {
        super(context);
        init();
    }

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

    }

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


    private void init() {
        mBubbleIcons.add(R.drawable.bubble_awesome);
        mBubbleIcons.add(R.drawable.bubble_champ_cup);
        mBubbleIcons.add(R.drawable.bubble_cow);
        mBubbleIcons.add(R.drawable.bubble_gift);
        mBubbleIcons.add(R.drawable.bubble_hear);
        mBubbleIcons.add(R.drawable.bubble_love);
        mBubbleIcons.add(R.drawable.bubble_red_pack);
        mBubbleIcons.add(R.drawable.bubble_rocket);
    }

    public void click() {
        AnimatorBean b = new AnimatorBean();
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 100f);
        valueAnimator.addUpdateListener(b);
        valueAnimator.addListener(b);

        valueAnimator.setDuration((int) (2100 + Math.random() * 700));
        valueAnimator.start();
    }

    private class AnimatorBean implements ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {
        private View mBubbleView;
        private double mAmplitude;
        private double mOffset;
        private double mW;

        @Override
        public void onAnimationStart(Animator animation, boolean isReverse) {
            // Amplitude of half space width  ×  Random scaling factor 
            mAmplitude = Math.random() * mWidth / 2;
            // random phase 
            mOffset = Math.random() * 90;
            // Random frequency 
            mW = 180f + Math.random() * 180f;
            // Create small bubbles 
            mBubbleView = new Button(getContext());
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(PixelUtil.dp2px(30), PixelUtil.dp2px(30));
            mBubbleView.setLayoutParams(params);
            mBubbleView.setX(mWidth / 2);
            mBubbleView.setY(mHeight);
            mBubbleView.setBackgroundResource(mBubbleIcons.get(new Random().nextInt(mBubbleIcons.size())));
            addView(mBubbleView);
        }

        @Override
        public void onAnimationEnd(Animator animation, boolean isReverse) {
            // Vanished , It can be destroyed 
            removeView(mBubbleView);
        }

        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {

        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            if (mBubbleView != null) {
                float curVal = (float) animation.getAnimatedValue();
                float scale = (50f - Math.abs(50f - curVal)) / 50f;
                float y = ((1 - curVal / 100f) * mHeight);
                double x = (Math.sin(Math.toRadians(mW * (1 - curVal / 100f) + mOffset))) * mAmplitude; // adopt sin Function combines random parameters and progress values , Produce with y The value increases to produce different waves x value 

                mBubbleView.setX((float) x + mWidth / 2);
                mBubbleView.setY(y);

                mBubbleView.setScaleX(scale * 1.6f);
                mBubbleView.setScaleY(scale * 1.6f);
                mBubbleView.setAlpha(scale);
            }
        }
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int w = MeasureSpec.getSize(widthMeasureSpec);
        int h = MeasureSpec.getSize(heightMeasureSpec);
        if (w != mWidth || h != mHeight) { // already onMeasuer once , Do not reinitialize unless the interface size changes view
            mWidth = w;
            mHeight = h;
        }
    }
}

Final effect ：