Android双击飞小心心-仿抖音点赞

Posted 2023-03-07

参考技术A 具体的需求就是双击视频任意位置可以冒出向上飞的小心心.之前写的太模糊,回来详细编辑一次,末尾附上源码好了.

自定义一个RelativeLayout,点击其内部任意一位置,将其坐标传入自定义布局,然后add一个💗的view,并给这个💗加上动画.

public class Love extends RelativeLayout

private Context context;

    private LayoutParams params;

    private Drawable[]icons =new Drawable[4];

    private Interpolator[]interpolators =new Interpolator[4];

    private int mWidth;

    private int mHeight;

    public Love(Context context, AttributeSet attrs)

super(context, attrs);

        this.context =context;

        initView();

   

private void initView()

// 图片资源

        icons[0] = getResources().getDrawable(R.drawable.heart_red);

        icons[1] = getResources().getDrawable(R.drawable.heart_red);

        icons[2] = getResources().getDrawable(R.drawable.heart_red);

        icons[3] = getResources().getDrawable(R.drawable.heart_red);

        // 插值器

        interpolators[0] =new AccelerateDecelerateInterpolator(); // 在动画开始与结束的地方速率改变比较慢，在中间的时候加速

        interpolators[1] =new AccelerateInterpolator();  // 在动画开始的地方速率改变比较慢，然后开始加速

        interpolators[2] =new DecelerateInterpolator(); // 在动画开始的地方快然后慢

        interpolators[3] =new LinearInterpolator();  // 以常量速率改变

   

public void addLoveView(float x, float y)

if (x <100)

x =101;

       

if (y <100)

y =101;

       

mWidth = (int) (x -100);

        mHeight = (int) (y -100);

        final ImageView iv =new ImageView(context);

        params =new LayoutParams(200, 200);

        iv.setLayoutParams(params);

        iv.setImageDrawable(icons[new Random().nextInt(4)]);

        addView(iv);

        // 开启动画，并且用完销毁

        AnimatorSet set = getAnimatorSet(iv);

        set.start();

        set.addListener(new AnimatorListenerAdapter()

@Override

            public void onAnimationEnd(Animator animation)

// TODO Auto-generated method stub

                super.onAnimationEnd(animation);

                removeView(iv);

           

);

   

/**

    * 获取动画集合

    *

    * @param iv

    */

    private AnimatorSet getAnimatorSet(ImageView iv)

// 1.alpha动画

        ObjectAnimator alpha =ObjectAnimator.ofFloat(iv, "alpha", 0.3f, 1f);

        // 2.缩放动画

        ObjectAnimator scaleX =ObjectAnimator.ofFloat(iv, "scaleX", 0.2f, 1f);

        ObjectAnimator scaleY =ObjectAnimator.ofFloat(iv, "scaleY", 0.2f, 1f);

        // 动画集合

        AnimatorSet set =new AnimatorSet();

        set.playTogether(alpha, scaleX, scaleY);

        set.setDuration(2000);

        // 贝塞尔曲线动画

        ValueAnimator bzier = getBzierAnimator(iv);

        AnimatorSet set2 =new AnimatorSet();

        set2.playTogether(set, bzier);

        set2.setTarget(iv);

        return set2;

   

/**

    * 贝塞尔动画

    */

    private ValueAnimator getBzierAnimator(final ImageView iv)

// TODO Auto-generated method stub

        PointF[]PointFs = getPointFs(iv); // 4个点的坐标

        BasEvaluator evaluator =new BasEvaluator(PointFs[1], PointFs[2]);

        ValueAnimator valueAnim =ValueAnimator.ofObject(evaluator, PointFs[0], PointFs[3]);

        valueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()

@Override

            public void onAnimationUpdate(ValueAnimator animation)

// TODO Auto-generated method stub

                PointF p = (PointF)animation.getAnimatedValue();

                iv.setX(p.x);

                iv.setY(p.y);

                iv.setAlpha(1 -animation.getAnimatedFraction()); // 透明度

           

);

        valueAnim.setTarget(iv);

        valueAnim.setDuration(2000);

        valueAnim.setInterpolator(interpolators[new Random().nextInt(4)]);

        return valueAnim;

   

private PointF[]getPointFs(ImageView iv)

// TODO Auto-generated method stub

        PointF[]PointFs =new PointF[4];

        PointFs[0] =new PointF(); // p0

        PointFs[0].x = ((int)mWidth);

        PointFs[0].y =mHeight;

        PointFs[1] =new PointF(); // p1

        PointFs[1].x =new Random().nextInt(mWidth);

        PointFs[1].y =new Random().nextInt(mHeight /2) +mHeight /2 +params.height;

        PointFs[2] =new PointF(); // p2

        PointFs[2].x =new Random().nextInt(mWidth);

        PointFs[2].y =new Random().nextInt(mHeight /2);

        PointFs[3] =new PointF(); // p3

        PointFs[3].x =new Random().nextInt(mWidth);

        PointFs[3].y =0;

        return PointFs;

   



<?xml version="1.0" encoding="utf-8"?>

<com.example.technology.lovedemo.Love xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/lovelayout"

    android:layout_width="match_parent"

    android:background="#d2aab7"

    android:layout_height="match_parent">

        android:id="@+id/iamge"

        android:layout_width="300dp"

        android:layout_height="300dp"

        android:layout_centerInParent="true"

        android:background="@drawable/ceshi" />

public class MainActivity extends AppCompatActivity

private GestureDetector myGestureDetector;

    private Love ll_love;

    @Override

    protected void onCreate(Bundle savedInstanceState)

super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        ll_love = (Love) findViewById(R.id.lovelayout);

        ImageView iamge = findViewById(R.id.iamge);

        //实例化GestureDetector

        myGestureDetector =new GestureDetector(this, new myOnGestureListener());

        //增加监听事件

        iamge.setOnTouchListener(new View.OnTouchListener()

@Override//可以捕获触摸屏幕发生的Event事件

            public boolean onTouch(View v, MotionEvent event)

//使用GestureDetector转发MotionEvent对象给OnGestureListener

                myGestureDetector.onTouchEvent(event);

                return true;

           

);

   

class myOnGestureListener extends GestureDetector.SimpleOnGestureListener

@Override

        public boolean onDoubleTap(MotionEvent e)

ll_love.addLoveView(e.getRawX(),e.getRawY());

            return super.onDoubleTap(e);

       





https://github.com/liumaomao0209/LoveDemo