Android自定义view实现仿抖音点赞效果
更新时间：2018年05月23日 11:55:05 作者：wish-xy
这篇文章主要介绍了Android自定义view实现仿抖音点赞效果，代码简单易懂非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
前言
学习自定义view，想找点东西耍一下，刚好看到抖音的点赞效果不错，尝试一下。
抖音效果：
话不多说，先上代码：
public class Love extends RelativeLayout {
private Context mContext;
float[] num = {-30, -20, 0, 20, 30};//随机心形图片角度
public Love(Context context) {
super(context);
initView(context);
}
public Love(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initView(context);
}
public Love(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);
ImageView imageView = new ImageView(mContext);
LayoutParams params = new LayoutParams(100, 100);
params.leftMargin = getWidth() - 200;
params.topMargin = getHeight() / 2 - 300;
imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));
imageView.setLayoutParams(params);
addView(imageView);
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, "这里是点击爱心的动画，待展示", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
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.drawable.heart_red));
imageView.setLayoutParams(params);
addView(imageView);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
.with(alpha(imageView, 0, 1, 100, 0))
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
.with(translationY(imageView, 0, -600, 800, 400))
.with(alpha(imageView, 1, 0, 300, 400))
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))
.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);
}
});
return super.onTouchEvent(event);
}
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;
}
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;
}
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;
}
}
实现思路
在点击时触发将心形的图片add到整个view中，然后在执行动画。主要的处理逻辑都在onTouchEvent()事件中，下面我们来详细讲解一下思路和代码：
@Override
public boolean onTouchEvent(MotionEvent event) {
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.drawable.heart_red));
imageView.setLayoutParams(params);
addView(imageView);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))
.with(alpha(imageView, 0, 1, 100, 0))
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))
.with(translationY(imageView, 0, -600, 800, 400))
.with(alpha(imageView, 1, 0, 300, 400))
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))
.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);
}
});
return super.onTouchEvent(event);
}
•首先，我们需要在触摸事件中做监听，当有触摸时，创建一个展示心形图片的ImageView。
final ImageView imageView = new ImageView(mContext); imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//设置红色心形图片
•设置图片展示的位置，是需要在手指触摸的位置上方，即触摸点是心形的下方角的位置。所以我们需要将ImageView设置到手指的位置
LayoutParams params = new LayoutParams(300, 300); params.leftMargin = (int) event.getX() - 150; params.topMargin = (int) event.getY() - 300; imageView.setLayoutParams(params);
•给imageView add到父view中。
addView(imageView);
•设置imageView动画
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))//缩放动画，X轴2倍缩小至0.9倍
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))//缩放动画，Y轴2倍缩小至0.9倍
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))//旋转动画，随机旋转角度num={-30.-20，0，20，30}
.with(alpha(imageView, 0, 1, 100, 0))//渐变透明度动画，透明度从0-1.
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))//缩放动画，X轴0.9倍缩小至1倍
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))//缩放动画，Y轴0.9倍缩小至1倍
.with(translationY(imageView, 0, -600, 800, 400))//平移动画，Y轴从0向上移动600单位
.with(alpha(imageView, 1, 0, 300, 400))//透明度动画，从1-0
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))//缩放动画，X轴1倍放大至3倍
.with(scale(imageView, "scaleY", 1, 3f, 700, 400));//缩放动画，Y轴1倍放大至3倍
animatorSet.start();
•当然，我们不可能无限制的增加view，在view消失之后，需要手动的移除改ImageView。
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeViewInLayout(imageView);
}
});
效果如下：
总结
以上所述是小编给大家介绍的Android自定义view实现仿抖音点赞效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要给大家介绍了关于Android中最简单的状态切换布局的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-10-10
这篇文章主要为大家详细介绍了Android实现轮播图无限循环效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
本文主要介绍在Ubuntu 上Android的源码,想深入学习Android的朋友肯定都有学习Android的源代码，这里就帮大家介绍下载，安装，编译源码的详细步骤2016-08-08
这篇文章主要介绍了Android 7.0 运行时权限弹窗问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Android中使用socket通信实现消息推送的方法,文中举了一个消息发送端和一个消息接收端以及服务器端的例子来说明原理并且展示了客户端的实现,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了Android自定义Dialog内部透明、外部遮罩效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了Android桌面组件App Widget用法,较为深入浅出的分析了Android桌面组件App Widget的功能、定义及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了Android实现手机壁纸改变的方法,以完整实例形式分析了Android手机壁纸改变的方法,包括页面布局及属性设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了Android 中ThreadLocal的深入理解的相关资料,希望通过本文能帮助到大家，让大家理解应用ThreadLocal,需要的朋友可以参考下2017-09-09
Android自定义view实现有header和footer作为layout使用的滚动控件
这篇文章主要介绍了Android自定义view实现有header和footer的滚动控件，可以在XML中当Layout使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
最新评论