Android項(xiàng)目開(kāi)發(fā) 教你實(shí)現(xiàn)Periscope點(diǎn)贊效果
現(xiàn)在視頻應(yīng)用越來(lái)越火,Periscope火起來(lái)后,國(guó)內(nèi)也出現(xiàn)了不少跟風(fēng)者,界面幾乎跟Periscope一模一樣.Periscope確實(shí)不錯(cuò),點(diǎn)贊的效果也讓人眼前一亮,很漂亮,于是乎,我就想著自己實(shí)現(xiàn)一下.
最終的效果圖如下:
最終效果圖.gif
錄制的效果不太好,手機(jī)運(yùn)行起來(lái)還是挺好看的.
不能說(shuō)一模一樣,但是也差不多了吧!~
慣例:
通過(guò)本文你將學(xué)習(xí)到什么?
- 自定義view的一些基礎(chǔ)方法以及一些注意點(diǎn)
- 隨機(jī)數(shù)的使用
- 插補(bǔ)器的使用
- 屬性動(dòng)畫(huà)的高級(jí)用法
- 貝塞爾曲線在Android中的實(shí)現(xiàn)以及應(yīng)用
OK,如果感興趣,那么跟著我來(lái)看看這個(gè)效果是如何實(shí)現(xiàn)的吧!
仔細(xì)看看,這個(gè)效果中包含了什么細(xì)節(jié)?
1、愛(ài)心出現(xiàn)在底部并且水平居中
2、愛(ài)心的顏色/類型 隨機(jī)
3、愛(ài)心進(jìn)入時(shí)候有一個(gè)縮放的動(dòng)畫(huà)
4、縮放完畢后,開(kāi)始變速向上移動(dòng),并且伴隨alpha漸變效果
5、愛(ài)心移動(dòng)的軌跡光滑,是個(gè)曲線
OK,接下去我們一個(gè)一個(gè)去實(shí)現(xiàn)它
1.第一步,底部,水平居中
這個(gè)我相信大家很容易想到使用RelativeLayout,對(duì),沒(méi)錯(cuò),那么我們先定義一個(gè)類姑且叫FavorLayout吧,繼承自RelativeLayout,并且重載構(gòu)造函數(shù),并定義一些變量.
public class FavorLayout extends RelativeLayout{ private Random random = new Random();//用于實(shí)現(xiàn)隨機(jī)功能 private int dHeight;//愛(ài)心的高度 private int dWidth;//愛(ài)心的寬度 private int mHeight;//FavorLayout的高度 private int mWidth;//FavorLayout的寬度 public FavorLayout(Context context) { super(context); } public FavorLayout(Context context, AttributeSet attrs) { super(context, attrs); //為了顯示區(qū)域,我設(shè)置了一個(gè)背景顏色,隨意 setBackgroundColor(getResources().getColor(R.color.bg)); //init里做一些初始化變量的操作 init(); } //重寫(xiě)onMeasure 獲取控件寬高 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //注意!! 獲取本身的寬高 需要在測(cè)量之后才有寬高 mWidth = getMeasuredWidth(); mHeight = getMeasuredHeight(); } } //定義完畢后我們來(lái)實(shí)現(xiàn)底部,水平居中: //定義一個(gè)LayoutParams 用它來(lái)控制子view的位置 private LayoutParams lp; //底部 并且 水平居中 lp = new LayoutParams(dWidth, dHeight); lp.addRule(CENTER_HORIZONTAL, TRUE); //這里的TRUE 要注意 不是true lp.addRule(ALIGN_PARENT_BOTTOM, TRUE); //好了,之后只要給子view設(shè)置LayoutParams就可以實(shí)現(xiàn)了
2.接下來(lái)實(shí)現(xiàn)第二步,隨機(jī)愛(ài)心在Android實(shí)現(xiàn)隨機(jī)數(shù)可以使用Random類,這里我只準(zhǔn)備了3種不同的愛(ài)心,來(lái)看看代碼如何實(shí)現(xiàn)吧:
//首先定義 3個(gè)代表不同愛(ài)心的drawable,以及他們的和drawables private Drawable red ; private Drawable yellow ; private Drawable blue ; private Drawable[] drawables ; //接下去我們初始化: //初始化顯示的圖片 drawables = new Drawable[3]; red = getResources().getDrawable(R.mipmap.red); yellow = getResources().getDrawable(R.mipmap.yellow); blue = getResources().getDrawable(R.mipmap.blue); //賦值給drawables drawables[0]=red; drawables[1]=yellow; drawables[2]=blue;
這樣,下次取值時(shí)候只要使用如下代碼,就能隨機(jī)獲取到愛(ài)心了:
drawables[random.nextInt(3)]//表示0-2的隨機(jī)數(shù),注意,3是取不到的,是個(gè)開(kāi)區(qū)間
3.好了隨機(jī)的愛(ài)心問(wèn)題搞定,接下去讓我們做縮放動(dòng)畫(huà)吧
說(shuō)到Android動(dòng)畫(huà),我們以前常用Animation,它通常情況下能滿足我們的需求,但是它的功能比較弱,并不是很好用.好在3.0后,強(qiáng)大的屬性動(dòng)畫(huà)的出現(xiàn),讓動(dòng)畫(huà)在Android中實(shí)現(xiàn)起來(lái)變得非常容易.如果你還不知道屬性動(dòng)畫(huà)怎么使用,趕緊去了解一下吧!
(以前在eoe上發(fā)過(guò)一篇帖子,很基礎(chǔ),ObjectAnimator的運(yùn)用,有興趣可以看下,提前說(shuō)下,那是很久以前寫(xiě)的!)
廢話不說(shuō)了,那么具體怎么做呢,來(lái)看代碼吧:
//我封裝了一個(gè)方法 利用ObjectAnimator AnimatorSet來(lái)實(shí)現(xiàn) alpha以及x,y軸的縮放功能 //target就是愛(ài)心 private AnimatorSet getEnterAnimtor(final View target) { ObjectAnimator alpha = ObjectAnimator.ofFloat(target,View.ALPHA, 0.2f, 1f); ObjectAnimator scaleX = ObjectAnimator.ofFloat(target,View.SCALE_X, 0.2f, 1f); ObjectAnimator scaleY = ObjectAnimator.ofFloat(target,View.SCALE_Y, 0.2f, 1f); AnimatorSet enter = new AnimatorSet(); enter.setDuration(500); enter.setInterpolator(new LinearInterpolator()); enter.playTogether(alpha,scaleX, scaleY); enter.setTarget(target); return enter; }
OK,縮放功能已經(jīng)加了,第一個(gè)階段也算是完成了,我們來(lái)看看效果吧:
偶,忘記說(shuō)了,我們給外面的按鈕設(shè)置點(diǎn)擊事件,并且提供外部一個(gè)方法調(diào)用:
mBtnStartAnim.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mFavorLayout.addFavor(); } }); public void addFavor() { ImageView imageView = new ImageView(getContext()); //隨機(jī)選一個(gè) imageView.setImageDrawable(drawables[random.nextInt(3)]); // 設(shè)置底部 水平居中 imageView.setLayoutParams(lp); addView(imageView); Log.v(TAG, "add后子view數(shù):"+getChildCount()); Animator set = getEnterAnimtor(imageView); set.start(); }
好了這下可以運(yùn)行看看效果啦,可以看到,愛(ài)心的顏色是隨機(jī)的,并且也有了縮放動(dòng)畫(huà).
到此,簡(jiǎn)單的功能我們已經(jīng)完成了,那么接下去就是大頭了.
4.實(shí)現(xiàn)貝塞爾曲線效果
我們?cè)趺醋寪?ài)心按照曲線移動(dòng)?而且還有隨機(jī)呢?
OK,接下去就是本文的主角貝塞爾曲線登場(chǎng)的時(shí)刻啦,這也是我實(shí)現(xiàn)這個(gè)效果學(xué)到的最重要的知識(shí).
我是看這篇文章學(xué)習(xí)了解貝塞爾曲線的,推薦一下.
簡(jiǎn)單來(lái)說(shuō),就是給定幾個(gè)點(diǎn),計(jì)算出一個(gè)曲線.(其實(shí)復(fù)雜得我看不懂)
簡(jiǎn)單了解貝塞爾曲線后,發(fā)現(xiàn)三次方貝塞爾曲線 符合我們的要求
公式:
公式.png
拿到了公式,先不要著急,我們先思考一下,明確一下它的參數(shù)是干什么的:
公式中需要四個(gè)P,P0,是我們的起點(diǎn),P3是終點(diǎn),P1,P2是途徑的兩個(gè)點(diǎn)
而t則是我們的一個(gè)因子,取值范圍是0-1,熟悉動(dòng)畫(huà)的同學(xué)應(yīng)該就明白,0-1,對(duì)動(dòng)畫(huà)的作用有多么重大!!!所以看到這個(gè),真是笑了~~
因?yàn)樾枰约簩?shí)現(xiàn)貝塞爾,所以我想到了屬性動(dòng)畫(huà)中的TypeEvaluator,它就是我們需要的.
好了,接下來(lái),我們來(lái)實(shí)現(xiàn)吧~
//我們自定義一個(gè)BezierEvaluator 實(shí)現(xiàn) TypeEvaluator //由于我們view的移動(dòng)需要控制x y 所以就傳入PointF 作為參數(shù),是不是感覺(jué)完全契合?? public class BezierEvaluator implements TypeEvaluator<PointF> { private PointF pointF1;//途徑的兩個(gè)點(diǎn) private PointF pointF2; public BezierEvaluator(PointF pointF1,PointF pointF2){ this.pointF1 = pointF1; this.pointF2 = pointF2; } @Override public PointF evaluate(float time, PointF startValue, PointF endValue) { float timeLeft = 1.0f - time; PointF point = new PointF();//結(jié)果 PointF point0 = (PointF)startValue;//起點(diǎn) PointF point3 = (PointF)endValue;//終點(diǎn) //代入公式 point.x = timeLeft * timeLeft * timeLeft * (point0.x) + 3 * timeLeft * timeLeft * time * (pointF1.x) + 3 * timeLeft * time * time * (pointF2.x) + time * time * time * (point3.x); point.y = timeLeft * timeLeft * timeLeft * (point0.y) + 3 * timeLeft * timeLeft * time * (pointF1.y) + 3 * timeLeft * time * time * (pointF2.y) + time * time * time * (point3.y); return point; } }
到這一步,只要我們傳入兩個(gè)PonitF就能得到一個(gè)貝塞爾曲線了.接下來(lái)我們?cè)贔avorLayout中定義獲取一個(gè)貝塞爾動(dòng)畫(huà)的方法:
private ValueAnimator getBezierValueAnimator(View target) { //初始化一個(gè)BezierEvaluator BezierEvaluator evaluator = new BezierEvaluator(getPointF(2),getPointF(1)); //這里最好畫(huà)個(gè)圖 理解一下 傳入了起點(diǎn) 和 終點(diǎn) ValueAnimator animator = ValueAnimator.ofObject(evaluator,new PointF((mWidth-dWidth)/2,mHeight-dHeight),new PointF(random.nextInt(getWidth()),0));//隨機(jī) animator.addUpdateListener(new BezierListenr(target)); animator.setTarget(target); animator.setDuration(3000); return animator; } //這里涉及到另外一個(gè)方法:getPointF(),這個(gè)是我用來(lái)獲取途徑的兩個(gè)點(diǎn) // 這里的取值可以隨意調(diào)整,調(diào)整到你希望的樣子就好 /** * 獲取中間的兩個(gè) 點(diǎn) * @param scale */ private PointF getPointF(int scale) { PointF pointF = new PointF(); pointF.x = random.nextInt((mWidth - 100));//減去100 是為了控制 x軸活動(dòng)范圍,看效果 隨意~~ //再Y軸上 為了確保第二個(gè)點(diǎn) 在第一個(gè)點(diǎn)之上,我把Y分成了上下兩半 這樣動(dòng)畫(huà)效果好一些 也可以用其他方法 pointF.y = random.nextInt((mHeight - 100))/scale; return pointF; }
眼尖的你一定發(fā)現(xiàn)了我給動(dòng)畫(huà)加了一個(gè)監(jiān)聽(tīng),只有在回調(diào)里使用了計(jì)算的值,才能真正做到曲線運(yùn)動(dòng),否則沒(méi)有效果哦:
private class BezierListenr implements ValueAnimator.AnimatorUpdateListener { private View target; public BezierListenr(View target) { this.target = target; } @Override public void onAnimationUpdate(ValueAnimator animation) { //這里獲取到貝塞爾曲線計(jì)算出來(lái)的的x y值 賦值給view 這樣就能讓愛(ài)心隨著曲線走啦 PointF pointF = (PointF) animation.getAnimatedValue(); target.setX(pointF.x); target.setY(pointF.y); // 這里偷個(gè)懶,順便做一個(gè)alpha動(dòng)畫(huà),這樣alpha漸變也完成啦 target.setAlpha(1-animation.getAnimatedFraction()); } }
好了這個(gè)方法寫(xiě)完,讓我們來(lái)測(cè)試一下效果如何吧!
對(duì)了,需要修改一下addFavor方法
public void addFavor() { ImageView imageView = new ImageView(getContext()); //隨機(jī)選一個(gè) imageView.setImageDrawable(drawables[random.nextInt(3)]); imageView.setLayoutParams(lp); addView(imageView); Log.v(TAG, "add后子view數(shù):"+getChildCount()); getBezierValueAnimator(imageView).start(); }
好了,點(diǎn)擊一下,看看效果吧!!!
Bezier效果圖.gif
怎么樣?還不錯(cuò)吧???
縮放的效果我們做了,曲線效果也有了
那么接下去把他們連起來(lái)即可!!~
5.收尾,最終效果
5.1 實(shí)現(xiàn)變速
// 我為了實(shí)現(xiàn) 變速效果 挑選了幾種插補(bǔ)器 private Interpolator line = new LinearInterpolator();//線性 private Interpolator acc = new AccelerateInterpolator();//加速 private Interpolator dce = new DecelerateInterpolator();//減速 private Interpolator accdec = new AccelerateDecelerateInterpolator();//先加速后減速 // 在init中初始化 private Interpolator[] interpolators ; // 最終 init方法長(zhǎng)這樣: private void init() { //初始化顯示的圖片 drawables = new Drawable[3]; red = getResources().getDrawable(R.mipmap.red); yellow = getResources().getDrawable(R.mipmap.yellow); blue = getResources().getDrawable(R.mipmap.blue); drawables[0]=red; drawables[1]=yellow; drawables[2]=blue; //獲取圖的寬高 用于后面的計(jì)算 //注意 我這里3張圖片的大小都是一樣的,所以我只取了一個(gè) dHeight = red.getIntrinsicHeight(); dWidth = red.getIntrinsicWidth(); //底部 并且 水平居中 lp = new LayoutParams(dWidth, dHeight); lp.addRule(CENTER_HORIZONTAL, TRUE);//這里的TRUE 要注意 不是true lp.addRule(ALIGN_PARENT_BOTTOM, TRUE); // 初始化插補(bǔ)器 interpolators = new Interpolator[4]; interpolators[0] = line; interpolators[1] = acc; interpolators[2] = dce; interpolators[3] = accdec; }
5.2 合并前倆種動(dòng)畫(huà),做成最終動(dòng)畫(huà)
private Animator getAnimator(View target){ AnimatorSet set = getEnterAnimtor(target); ValueAnimator bezierValueAnimator = getBezierValueAnimator(target); AnimatorSet finalSet = new AnimatorSet(); finalSet.playSequentially(set); finalSet.playSequentially(set, bezierValueAnimator); finalSet.setInterpolator(interpolators[random.nextInt(4)]);//實(shí)現(xiàn)隨機(jī)變速 finalSet.setTarget(target); return finalSet; }
5.3 最后修改addFavor方法:
public void addFavor() { ImageView imageView = new ImageView(getContext()); //隨機(jī)選一個(gè) imageView.setImageDrawable(drawables[random.nextInt(3)]); imageView.setLayoutParams(lp); addView(imageView); Log.v(TAG, "add后子view數(shù):"+getChildCount()); Animator set = getAnimator(imageView); set.addListener(new AnimEndListener(imageView)); set.start(); }
在修改addFavor方法的同時(shí)我增加了一個(gè)監(jiān)聽(tīng),目的是為了在動(dòng)畫(huà)結(jié)束后,把愛(ài)心移除,不然,子view只增不減!!!!
private class AnimEndListener extends AnimatorListenerAdapter { private View target; public AnimEndListener(View target) { this.target = target; } @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); //因?yàn)椴煌5腶dd 導(dǎo)致子view數(shù)量只增不減,所以在view動(dòng)畫(huà)結(jié)束后remove掉 removeView((target)); Log.v(TAG, "removeView后子view數(shù):"+getChildCount()); } }
以上就是實(shí)現(xiàn)Periscope點(diǎn)贊效果的全部過(guò)程,很詳細(xì),希望對(duì)大家的學(xué)習(xí)有所幫助,大家可以動(dòng)手操作一下,應(yīng)用到自己的項(xiàng)目中。
- Android 仿微信朋友圈點(diǎn)贊和評(píng)論彈出框功能
- 簡(jiǎn)單實(shí)用的Android UI微博動(dòng)態(tài)點(diǎn)贊效果
- Android高級(jí)UI特效仿直播點(diǎn)贊動(dòng)畫(huà)效果
- Android自定義view實(shí)現(xiàn)仿抖音點(diǎn)贊效果
- Android中Listview點(diǎn)贊功能的實(shí)現(xiàn)
- Android仿微信朋友圈點(diǎn)贊和評(píng)論功能
- Android中使用PopupWindow 仿微信點(diǎn)贊和評(píng)論彈出
- Android自定義ViewGroup實(shí)現(xiàn)堆疊頭像的點(diǎn)贊Layout
- Android控件實(shí)現(xiàn)直播App點(diǎn)贊飄心動(dòng)畫(huà)
- 使用AccessibilityService實(shí)現(xiàn)自動(dòng)遍歷點(diǎn)贊功能
相關(guān)文章
Android程序開(kāi)發(fā)之UIScrollerView里有兩個(gè)tableView
這篇文章主要介紹了UIScrollerView里有兩個(gè)tableView 的相關(guān)資料,需要的朋友可以參考下2016-04-04android自動(dòng)化測(cè)試知識(shí)點(diǎn)總結(jié)
在本文里小編給大家分享了關(guān)于android自動(dòng)化測(cè)試入門(mén)的相關(guān)知識(shí)點(diǎn),需要的朋友們跟著參考下吧。2019-06-06Android實(shí)現(xiàn)自動(dòng)輪詢的RecycleView
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)自動(dòng)輪詢的RecycleView,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Android10填坑適配指南(實(shí)際經(jīng)驗(yàn)代碼)
這篇文章主要介紹了Android10填坑適配指南(實(shí)際經(jīng)驗(yàn)代碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Android實(shí)現(xiàn)聲音采集回聲與回聲消除
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)聲音采集回聲與回聲消除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Android藍(lán)牙服務(wù)查找附近設(shè)備分析探索
這篇文章主要介紹了Android藍(lán)牙服務(wù)實(shí)現(xiàn)查找附近設(shè)備,了解內(nèi)部原理是為了幫助我們做擴(kuò)展,同時(shí)也是驗(yàn)證了一個(gè)人的學(xué)習(xí)能力,如果你想讓自己的職業(yè)道路更上一層樓,這些底層的東西你是必須要會(huì)的2023-01-01Android 自動(dòng)化測(cè)試經(jīng)驗(yàn)分享 UiObejct.getFromParent()的使用方法
本篇文章對(duì)Android中UiObejct.getFromParent()的使用進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05Android XML數(shù)據(jù)解析簡(jiǎn)單示例
這篇文章主要介紹了Android XML數(shù)據(jù)解析簡(jiǎn)單示例,本文直接給出了實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-10-10刷新Activity中的scrollview示例(局部ui刷新)
代碼很簡(jiǎn)單,但是很實(shí)用,適合在一個(gè)Activity中要刷新局部的UI,比如在掃描一維碼的時(shí)候,要把每次掃描的結(jié)果都顯示在界面上2014-01-01