前言
學(xué)習(xí)自定義view，想找點(diǎn)東西耍一下，剛好看到抖音的點(diǎn)贊效果不錯(cuò)橱健，嘗試一下。
抖音效果：
抖音效果
話不多說(shuō)沙廉，先上代碼：
public class Love extends RelativeLayout {
private Context mContext;
float[] num = {-30, -20, 0, 20, 30};//隨機(jī)心形圖片角度
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, "這里是點(diǎn)擊愛心的動(dòng)畫拘荡，待展示", 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;
}
}
實(shí)現(xiàn)思路
在點(diǎn)擊時(shí)觸發(fā)將心形的圖片add到整個(gè)view中，然后在執(zhí)行動(dòng)畫撬陵。主要的處理邏輯都在onTouchEvent()事件中珊皿，下面我們來(lái)詳細(xì)講解一下思路和代碼：
@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);
}
- 首先，我們需要在觸摸事件中做監(jiān)聽巨税，當(dāng)有觸摸時(shí)蟋定，創(chuàng)建一個(gè)展示心形圖片的ImageView。
final ImageView imageView = new ImageView(mContext);
imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//設(shè)置紅色心形圖片
- 設(shè)置圖片展示的位置草添，是需要在手指觸摸的位置上方驶兜，即觸摸點(diǎn)是心形的下方角的位置。所以我們需要將ImageView設(shè)置到手指的位置
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);
- 設(shè)置imageView動(dòng)畫
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scale(imageView, "scaleX", 2f, 0.9f, 100, 0))//縮放動(dòng)畫抄淑，X軸2倍縮小至0.9倍
.with(scale(imageView, "scaleY", 2f, 0.9f, 100, 0))//縮放動(dòng)畫，Y軸2倍縮小至0.9倍
.with(rotation(imageView, 0, 0, num[new Random().nextInt(4)]))//旋轉(zhuǎn)動(dòng)畫驰后，隨機(jī)旋轉(zhuǎn)角度num={-30.-20肆资，0，20灶芝，30}
.with(alpha(imageView, 0, 1, 100, 0))//漸變透明度動(dòng)畫迅耘，透明度從0-1.
.with(scale(imageView, "scaleX", 0.9f, 1, 50, 150))//縮放動(dòng)畫贱枣，X軸0.9倍縮小至1倍
.with(scale(imageView, "scaleY", 0.9f, 1, 50, 150))//縮放動(dòng)畫，Y軸0.9倍縮小至1倍
.with(translationY(imageView, 0, -600, 800, 400))//平移動(dòng)畫颤专，Y軸從0向上移動(dòng)600單位
.with(alpha(imageView, 1, 0, 300, 400))//透明度動(dòng)畫纽哥，從1-0
.with(scale(imageView, "scaleX", 1, 3f, 700, 400))//縮放動(dòng)畫，X軸1倍放大至3倍
.with(scale(imageView, "scaleY", 1, 3f, 700, 400));//縮放動(dòng)畫栖秕，Y軸1倍放大至3倍
animatorSet.start();
- 當(dāng)然春塌，我們不可能無(wú)限制的增加view，在view消失之后簇捍，需要手動(dòng)的移除改ImageView只壳。
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
removeViewInLayout(imageView);
}
});
效果如下：
這里寫圖片描述
右側(cè)愛心點(diǎn)贊的效果容我先搞出來(lái)，下期在上咯暑塑！
有問(wèn)題和想法吼句，歡迎私信或者評(píng)論留言，一起學(xué)習(xí)事格，一起進(jìn)步
