Android仿抖音點擊效果

Linux編程

點擊右側關注，免費入門到精通！

作者丨wish_xy

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

學習自定義view，想找點東西耍一下，剛好看到抖音的點讚效果不錯，嘗試一下。

抖音效果：

話不多說，先上代碼：

publicclassLoveextendsRelativeLayout{privateContextmContext;float[]num={-30,-20,0,20,30};//隨機心形圖片角度publicLove(Contextcontext){super(context);initView(context);}publicLove(Contextcontext,@NullableAttributeSetattrs){super(context,attrs);initView(context);}publicLove(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);initView(context);}privatevoidinitView(Contextcontext){mContext=context;}@OverrideprotectedvoiddispatchDraw(Canvascanvas){super.dispatchDraw(canvas);ImageViewimageView=newImageView(mContext);LayoutParamsparams=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(){@OverridepublicvoidonClick(Viewv){Toast.makeText(mContext,"這里是點擊愛心的動畫，待展示",Toast.LENGTH_SHORT).show();}});}@OverridepublicbooleanonTouchEvent(MotionEventevent){finalImageViewimageView=newImageView(mContext);LayoutParamsparams=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);AnimatorSetanimatorSet=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(){@OverridepublicvoidonAnimationEnd(Animatoranimation){super.onAnimationEnd(animation);removeViewInLayout(imageView);}});returnsuper.onTouchEvent(event);}publicstaticObjectAnimatorscale(Viewview,StringpropertyName,floatfrom,floatto,longtime,longdelayTime){ObjectAnimatortranslation=ObjectAnimator.ofFloat(view,propertyName,from,to);translation.setInterpolator(newLinearInterpolator());translation.setStartDelay(delayTime);translation.setDuration(time);returntranslation;}publicstaticObjectAnimatortranslationX(Viewview,floatfrom,floatto,longtime,longdelayTime){ObjectAnimatortranslation=ObjectAnimator.ofFloat(view,"translationX",from,to);translation.setInterpolator(newLinearInterpolator());translation.setStartDelay(delayTime);translation.setDuration(time);returntranslation;}publicstaticObjectAnimatortranslationY(Viewview,floatfrom,floatto,longtime,longdelayTime){ObjectAnimatortranslation=ObjectAnimator.ofFloat(view,"translationY",from,to);translation.setInterpolator(newLinearInterpolator());translation.setStartDelay(delayTime);translation.setDuration(time);returntranslation;}publicstaticObjectAnimatoralpha(Viewview,floatfrom,floatto,longtime,longdelayTime){ObjectAnimatortranslation=ObjectAnimator.ofFloat(view,"alpha",from,to);translation.setInterpolator(newLinearInterpolator());translation.setStartDelay(delayTime);translation.setDuration(time);returntranslation;}publicstaticObjectAnimatorrotation(Viewview,longtime,longdelayTime,float...values){ObjectAnimatorrotation=ObjectAnimator.ofFloat(view,"rotation",values);rotation.setDuration(time);rotation.setStartDelay(delayTime);rotation.setInterpolator(newTimeInterpolator(){@OverridepublicfloatgetInterpolation(floatinput){returninput;}});returnrotation;}}

做到思路

在點擊時觸發將心形的圖片add到整個view中，然後在執行動畫。主要的處理邏輯都在onTouchEvent()事件中，下面我們來詳細講解一下思路和代碼：

finalImageViewimageView=newImageView(mContext);imageView.setImageDrawable(getResources().getDrawable(R.drawable.heart_red));//設置紅色心形圖片

設置圖片展示的位置，是需要在手指觸摸的位置上方，即觸摸點是心形的下方角的位置。所以我們需要將ImageView設置到手指的位置

LayoutParamsparams=newLayoutParams(300,300);params.leftMargin=(int)event.getX()-150;params.topMargin=(int)event.getY()-300;imageView.setLayoutParams(params);

給imageView add到父view中。

設置imageView動畫

AnimatorSetanimatorSet=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(){@OverridepublicvoidonAnimationEnd(Animatoranimation){super.onAnimationEnd(animation);removeViewInLayout(imageView);}});

效果如下：

推薦↓↓↓

長

按

關

註

?【16個技術公眾號】都在這里！

涵蓋：工程師大咖、源碼共讀、工程師共讀、數據結構與算法、黑客技術和網路安全、大數據科技、編程前端、Java、Python、Web編程開發、Android、iOS開發、Linux、數據庫研發、幽默工程師等。