這篇文章給大家介紹怎么在Android中自定義view實(shí)現(xiàn)抖音點(diǎn)贊效果,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
網(wǎng)站建設(shè)哪家好,找創(chuàng)新互聯(lián)公司!專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了昌黎免費(fèi)建站歡迎大家使用!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)擊愛(ài)心的動(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)聽(tīng),當(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); } });
關(guān)于怎么在Android中自定義view實(shí)現(xiàn)抖音點(diǎn)贊效果就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
標(biāo)題名稱:怎么在Android中自定義view實(shí)現(xiàn)抖音點(diǎn)贊效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://redsoil1982.com.cn/article42/diojec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、標(biāo)簽優(yōu)化、用戶體驗(yàn)、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容