本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码，供大家参考，具体内容如下
自定义View——抖音飘动红心
效果展示
动画效果
使用自定义view完成红心飘动效果
View实现
动画：属性动画（位移+缩放+透明度+旋转）
+
随机数：（属性动画参数+颜色选取）
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
/** * 飘心效果 * 1.创建ImageView * 2.ImageView执行组合动画 * 3.动画执行完成后销毁View */public class FlyHeartView extends RelativeLayout { private int defoutWidth = 200;//默认控件宽度 private long mDuration = 3000;//默认动画时间 //颜色集合 从中获取颜色 private int[] color = { 0xFFFF34B3, 0xFF9ACD32, 0xFF9400D3, 0xFFEE9A00, 0xFFFFB6C1, 0xFFDA70D6, 0xFF8B008B, 0xFF4B0082, 0xFF483D8B, 0xFF1E90FF, 0xFF00BFFF, 0xFF00FF7F }; public FlyHeartView(Context context) { super(context); initFrameLayout(); } public FlyHeartView(Context context, AttributeSet attrs) { super(context, attrs); initFrameLayout(); } private void initFrameLayout() { ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(defoutWidth, ViewGroup.LayoutParams.WRAP_CONTENT); setLayoutParams(params); } /** * 创建一个心形的view视图 */ private ImageView createHeartView() { ImageView heartIv = new ImageView(getContext()); LayoutParams params = new LayoutParams(defoutWidth / 2, defoutWidth / 2); //控件位置 params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); params.addRule(RelativeLayout.CENTER_HORIZONTAL); heartIv.setLayoutParams(params); heartIv.setImageResource(R.mipmap.ic_heart); //改变颜色 heartIv.setImageTintList(ColorStateList.valueOf(color[(int) (color.length * Math.random())])); return heartIv; } /** * 执行动画 * 在展示调用该方法 */ public void startFly() { final ImageView heartIv = createHeartView(); addView(heartIv); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.play(createTranslationX(heartIv)) .with(createTranslationY(heartIv)) .with(createScale(heartIv)) .with(createRotation(heartIv)) .with(createAlpha(heartIv)); //执行动画 animatorSet.start(); //销毁view animatorSet.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); removeView(heartIv); } }); } /** * 横向正弦位移动画 * * @return */ private Animator createTranslationX(View view) { ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0, (float) (defoutWidth * Math.random() / 4)); animator.setDuration(mDuration); //CycleInterpolator cycles 正弦曲线数 animator.setInterpolator(new CycleInterpolator((float) (3 * Math.random()))); return animator; } /** * 纵向加速位移动画 * * @return */ private Animator createTranslationY(View view) { ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", 0, -1000); animator.setDuration(mDuration); animator.setInterpolator(new AccelerateInterpolator()); return animator; } /** * 加速放大动画 * * @return */ private Animator createScale(View view) { ObjectAnimator animatorX = ObjectAnimator.ofFloat(view, "scaleX", 1, 1.5f); ObjectAnimator animatorY = ObjectAnimator.ofFloat(view, "scaleY", 1, 1.5f); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.setDuration(mDuration); animatorSet.setInterpolator(new AccelerateInterpolator()); animatorSet.play(animatorX).with(animatorY); return animatorSet; } /** * 透明度动画 * * @return */ private Animator createAlpha(View view) { ObjectAnimator animator = ObjectAnimator.ofFloat(view, "alpha", 1, 0.1f); animator.setDuration(mDuration); animator.setInterpolator(new AccelerateInterpolator()); return animator; } /** * 旋转动画 * * @return */ private Animator createRotation(View view) { ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0, (float) (25f * Math.random())); animator.setDuration(mDuration); animator.setInterpolator(new CycleInterpolator((float) (6 * Math.random()))); return animator; }} |
最后在MainActivity中调用FlyHeartView 的startFly()方法就能实现点击飘心效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45697390/article/details/106363786
