Android仿抖音双击点赞动画,Android仿抖音点击效果

原标题：Android仿抖音点击效果

作者丨wish_xy

https://www.jianshu.com/p/1d17c38a3db1

学习自定义view，想找点东西耍一下，刚好看到抖音的点赞效果不错，尝试一下。

抖音效果：

话不多说，先上代码：

publicclassLoveextendsRelativeLayout{

privateContext mContext;

float[] num = {-30, -20, 0, 20, 30};//随机心形图片角度

publicLove(Context context){

super(context);

initView(context);

}

publicLove(Context context, @Nullable AttributeSet attrs){

super(context, attrs);

initView(context);

}

publicLove(Context context, @Nullable AttributeSet attrs, intdefStyleAttr){

super(context, attrs, defStyleAttr);

initView(context);

}

privatevoidinitView(Context context){

mContext = context;

}

@Override

protectedvoiddispatchDraw(Canvas canvas) {

super.dispatchDraw(canvas);

ImageView imageView = newImageView(mContext);

LayoutParams params= newLayoutParams(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(newOnClickListener() {

@Override

publicvoidonClick(View v) {

Toast.makeText(mContext, "这里是点击爱心的动画，待展示", Toast.LENGTH_SHORT).show();

}

});

}

@Override

publicboolean onTouchEvent(MotionEvent event) {

final ImageView imageView = newImageView(mContext);

LayoutParams params= newLayoutParams(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 = newAnimatorSet();

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[newRandom().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(newAnimatorListenerAdapter() {

@Override

publicvoidonAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

removeViewInLayout(imageView);

}

});

returnsuper.onTouchEvent(event);

}

publicstaticObjectAnimator scale(View view, String propertyName, floatfrom, floatto, longtime, longdelayTime){

ObjectAnimator translation = ObjectAnimator.ofFloat(view

, propertyName

, from, to);

translation.setInterpolator(newLinearInterpolator());

translation.setStartDelay(delayTime);

translation.setDuration(time);

returntranslation;

}

publicstaticObjectAnimator translationX(View view, floatfrom, floatto, longtime, longdelayTime){

ObjectAnimator translation = ObjectAnimator.ofFloat(view

, "translationX"

, from, to);

translation.setInterpolator(newLinearInterpolator());

translation.setStartDelay(delayTime);

translation.setDuration(time);

returntranslation;

}

publicstaticObjectAnimator translationY(View view, floatfrom, floatto, longtime, longdelayTime){

ObjectAnimator translation = ObjectAnimator.ofFloat(view

, "translationY"

, from, to);

translation.setInterpolator(newLinearInterpolator());

translation.setStartDelay(delayTime);

translation.setDuration(time);

returntranslation;

}

publicstaticObjectAnimator alpha(View view, floatfrom, floatto, longtime, longdelayTime){

ObjectAnimator translation = ObjectAnimator.ofFloat(view

, "alpha"

, from, to);

translation.setInterpolator(newLinearInterpolator());

translation.setStartDelay(delayTime);

translation.setDuration(time);

returntranslation;

}

publicstaticObjectAnimator rotation(View view, longtime, longdelayTime, float... values){

ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", values);

rotation.setDuration(time);

rotation.setStartDelay(delayTime);

rotation.setInterpolator(newTimeInterpolator() {

@Override

publicfloatgetInterpolation(floatinput) {

returninput;

}

});

returnrotation;

}

}

实现思路

在点击时触发将心形的图片add到整个view中，然后在执行动画。主要的处理逻辑都在onTouchEvent()事件中，下面我们来详细讲解一下思路和代码：

@Override

public boolean onTouchEvent(MotionEvent event) {

finalImageView imageView = newImageView(mContext);

LayoutParams params = newLayoutParams(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 = newAnimatorSet();

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[newRandom().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(newAnimatorListenerAdapter() {

@Override

public voidonAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

removeViewInLayout(imageView);

}

});

returnsuper.onTouchEvent(event);

}

首先，我们需要在触摸事件中做监听，当有触摸时，创建一个展示心形图片的ImageView。

finalImageView imageView = newImageView(mContext);

imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//设置红色心形图片

设置图片展示的位置，是需要在手指触摸的位置上方，即触摸点是心形的下方角的位置。所以我们需要将ImageView设置到手指的位置

LayoutParams params= newLayoutParams(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 = newAnimatorSet();

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[newRandom().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(newAnimatorListenerAdapter() {

@Override

publicvoidonAnimationEnd(Animator animation){

super.onAnimationEnd(animation);

removeViewInLayout(imageView);

}

});

效果如下：

长

按

关

责任编辑：