Android自定义view之实现仿抖音双击点赞单击暂停特效

2018年抖音、快手、火山等短视频App比较火，最近自己做短视频项目时有个需求，就是类似抖音的点赞特效，单击屏幕时视频暂停，再次点击时视频恢复播放，双击或者连续多次点击时出现点赞特效(飘小心心特效)，而且是全屏可以随意点击，都是可以响应双击及多击事件。我们的需求点赞效果出现的同时请求接口，所以还是遇到很多问题的，这里记录一下.先放上一张抖音的点赞效果截图如下:

分析一下效果图:

1.当手指单击屏幕时，视频暂停播放.

2.当连续点击屏幕时，响应双击事件出现小心心特效，而且点击次数可以大于2次.

3.单击暂停视频时同时可以响应双击事件互不冲突.

4.点击整个屏幕都可以响应单击和双击事件.

5.多次点击时间间隔要设置在短时间内不响应，要不会出现多次响应，重复点赞(我们的需求是双击或者多击时请求点赞接口).

实现过程如下:

1.自定义点赞view

/**

* 作者： njb

* 时间： 2018/9/20 0020-上午 11:44

* 描述：双击点赞心形动画

* 来源：

public class Like extends RelativeLayout {

private Context mContext;
float[] num = {-30, -20, 0, 20, 30};//随机心形图片角度
//记录上一次的点击时间
private long  lastClickTime = 0;
//点击的时间间隔
private long INTERVAL = 200;
private MyClickListener.MyClickCallBack onClickListener;

public Like(Context context) {
    super(context);
    initView(context);
}

public Like(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initView(context);
}

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

private void initView(Context context) {
    mContext = context;
}

@Override
protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);
}

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
            //获取点击时间
            long currTime = System.currentTimeMillis();
            //判断点击之间的时间差
            long  interval = currTime - lastClickTime;
            lastClickTime = currTime;
            if(interval <INTERVAL ){//小于1秒，拦截事件，并做处理
                final ImageView imageView = new ImageView(mContext);
                //设置展示的位置，需要在手指触摸的位置上方，即触摸点是心形的右下角的位置
                LayoutParams params = new LayoutParams(300, 300);
                params.leftMargin = (int) event.getX() - 150;
                params.topMargin = (int) event.getY() - 300;
                //设置图片资源
                imageView.setImageDrawable(getResources().getDrawable(R.mipmap.sp_dianzanhou_da));
                imageView.setLayoutParams(params);
                //把IV添加到父布局当中
                addView(imageView);

                //设置控件的动画
                AnimatorSet animatorSet = new AnimatorSet();
                //缩放动画，X轴2倍缩小至0.9倍
                animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
                        //缩放动画，Y轴2倍缩放至0.9倍
                        .with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
                        //旋转动画，随机旋转角
                        .with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
                        //渐变透明动画，透明度从0-1
                        .with(alpha(imageView, 0, 1, 100, 0))
                        //缩放动画，X轴0.9倍缩小至
                        .with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
                        //缩放动画，Y轴0.9倍缩放至
                        .with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
                        //位移动画，Y轴从0上移至600
                        .with(translationY(imageView, 0, -600, 800, 400))
                        //透明动画，从1-0
                        .with(alpha(imageView, 1, 0, 300, 400))
                        //缩放动画，X轴1至3倍
                        .with(scale(imageView, "scaleX", 1, 3f, 700, 400))
                        //缩放动画，Y轴1至3倍
                        .with(scale(imageView, "scaleY", 1, 3f, 700, 400));
                //开始动画
                animatorSet.start();
                //设置动画结束监听
                animatorSet.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        //当动画结束以后，需要把控件从父布局移除
                        removeViewInLayout(imageView);
                    }
                });
            }
            break;
    }
    return super.dispatchTouchEvent(event);
}

/**
 * 缩放动画
 * @param view
 * @param propertyName
 * @param from
 * @param to
 * @param time
 * @param delayTime
 * @return
 */
public static ObjectAnimator scale(View view, String propertyName, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
            , propertyName
            , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
}

/**
 * 位移动画
 * @param view
 * @param from
 * @param to
 * @param time
 * @param delayTime
 * @return
 */
public static ObjectAnimator translationX(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
            , "translationX"
            , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
}

public static ObjectAnimator translationY(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
            , "translationY"
            , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
}

/**
 * 透明度动画
 * @param view
 * @param from
 * @param to
 * @param time
 * @param delayTime
 * @return
 */
public static ObjectAnimator alpha(View view, float from, float to, long time, long delayTime) {
    ObjectAnimator translation = ObjectAnimator.ofFloat(view
            , "alpha"
            , from, to);
    translation.setInterpolator(new LinearInterpolator());
    translation.setStartDelay(delayTime);
    translation.setDuration(time);
    return translation;
}

public static ObjectAnimator rotation(View view, long time, long delayTime, float... values) {
    ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", values);
    rotation.setDuration(time);
    rotation.setStartDelay(delayTime);
    rotation.setInterpolator(new TimeInterpolator() {
        @Override
        public float getInterpolation(float input) {
            return input;
        }
    });
    return rotation;
}

public void setOnClickListener(MyClickListener.MyClickCallBack onClickListener) {
    this.onClickListener = onClickListener;
}

public MyClickListener.MyClickCallBack getOnClickListener() {
    return onClickListener;
}

}

2.事件监听类MyClickListener

/**

* 作者： njb

* 时间： 2018/11/30 18:18

* 描述：单击和多次点击事件监听回调

* 来源：

public class MyClickListener implements View.OnTouchListener {
    private static int timeout=400;//双击间四百毫秒延时
    private int clickCount = 0;//记录连续点击次数
    private Handler handler;
    private MyClickCallBack myClickCallBack;

    public interface MyClickCallBack{
        void oneClick();//点击一次的回调
        void doubleClick();//双击及连续多次点击的回调
    }


    public MyClickListener(MyClickCallBack myClickCallBack) {
        this.myClickCallBack = myClickCallBack;
        handler = new Handler();
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            clickCount++;
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (clickCount == 1) {
                        myClickCallBack.oneClick();
                    }else if(clickCount>=2){
                        myClickCallBack.doubleClick();
                    }
                    handler.removeCallbacksAndMessages(null);
                    //清空handler延时，并防内存泄漏
                    clickCount = 0;//计数清零
                }
            },timeout);//延时timeout后执行run方法中的代码
        }
        return false;//让点击事件继续传播，方便再给View添加其他事件监听
    }
}

3.布局文件代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/banner">
    <com.example.administrator.timertask.view.Like
        android:id="@+id/like"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.example.administrator.timertask.view.Like>
</android.support.constraint.ConstraintLayout>

4.Activity代码:

/**
 * 作者： njb
 * 时间： 2018/12/13 14:55
 * 描述：
 * 来源：
 */
public class LikeActivity extends AppCompatActivity {
    private Like like;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_like);
        initView();
    }

    private void initView() {
        like = findViewById(R.id.like);
        like.setOnClickListener(new MyClickListener.MyClickCallBack() {
            @Override
            public void oneClick() {
                Toast.makeText(LikeActivity.this,"单击事件",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void doubleClick() {
                Toast.makeText(LikeActivity.this,"双击或多击事件",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

5.以上就是单击击和双击及多击事件监听和点赞动画自定义view实现，由于时间问题后面会加上视频播放、单击暂停等,慢慢完善例子,并给出源码，写得不好，还望大家见谅，有问题大家可以提出一起探讨解决.

Android自定义view之实现仿抖音双击点赞单击暂停特效

猜你喜欢