2018年抖音、快手、火山等短视频App比较火,最近自己做短视频项目时有个需求,就是类似抖音的点赞特效,单击屏幕时视频暂停,再次点击时视频恢复播放,双击或者连续多次点击时出现点赞特效(飘小心心特效),而且是全屏可以随意点击,都是可以响应双击及多击事件。我们的需求是点赞效果出现的同时请求接口,所以还是遇到很多问题的,这里记录一下.先放上一张抖音的点赞效果截图如下:
:
分析一下效果图:
1.当手指单击屏幕时,视频暂停播放,再次点击屏幕视频恢复播放.
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
}
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.布局文件代码:
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实现,由于时间问题后面会加上视频播放、单击暂停等,慢慢完善例子,并给出源码,写得不好,还望大家见谅,有问题大家可以提出一起探讨解决.
点赞动画源码地址:https://gitee.com/jackning_admin/LoveClick