前言
学习自定义view，想找点东西耍一下，刚好看到抖音的点赞效果不错，尝试一下。
抖音效果：
话不多说，先上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
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()事件中，下面我们来详细讲解一下思路和代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
@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。
|
1
2
|
final ImageView imageView = new ImageView(mContext); imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//设置红色心形图片 |
•设置图片展示的位置，是需要在手指触摸的位置上方，即触摸点是心形的下方角的位置。所以我们需要将ImageView设置到手指的位置
|
1
2
3
4
|
LayoutParams params = new LayoutParams(300, 300);params.leftMargin = (int) event.getX() - 150;params.topMargin = (int) event.getY() - 300;imageView.setLayoutParams(params); |
•给imageView add到父view中。
|
1
|
addView(imageView); |
•设置imageView动画
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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。
|
1
2
3
4
5
6
7
|
animatorSet.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); removeViewInLayout(imageView); } }); |
效果如下：
总结
以上所述是小编给大家介绍的Android自定义view实现仿抖音点赞效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
原文链接：https://blog.csdn.net/ibelieveyouwxy/article/details/80417979
