欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android項目開發(fā) 教你實現(xiàn)Periscope點贊效果

 更新時間：2020年05月29日 09:36:28   投稿：lijiao  
這篇文章主要為大家分享了Android項目開發(fā)，一步一步教你實現(xiàn)Periscope點贊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

現(xiàn)在視頻應用越來越火,Periscope火起來后,國內(nèi)也出現(xiàn)了不少跟風者,界面幾乎跟Periscope一模一樣.Periscope確實不錯,點贊的效果也讓人眼前一亮,很漂亮,于是乎,我就想著自己實現(xiàn)一下.

最終的效果圖如下:

最終效果圖.gif

錄制的效果不太好,手機運行起來還是挺好看的.
不能說一模一樣,但是也差不多了吧!~

慣例:

通過本文你將學習到什么?

  • 自定義view的一些基礎方法以及一些注意點
  • 隨機數(shù)的使用
  • 插補器的使用
  • 屬性動畫的高級用法
  • 貝塞爾曲線在Android中的實現(xiàn)以及應用

OK,如果感興趣,那么跟著我來看看這個效果是如何實現(xiàn)的吧!

仔細看看,這個效果中包含了什么細節(jié)?

1、愛心出現(xiàn)在底部并且水平居中
2、愛心的顏色/類型 隨機
3、愛心進入時候有一個縮放的動畫
4、縮放完畢后,開始變速向上移動,并且伴隨alpha漸變效果
5、愛心移動的軌跡光滑,是個曲線

OK,接下去我們一個一個去實現(xiàn)它

1.第一步,底部,水平居中

這個我相信大家很容易想到使用RelativeLayout,對,沒錯,那么我們先定義一個類姑且叫FavorLayout吧,繼承自RelativeLayout,并且重載構造函數(shù),并定義一些變量.

public class FavorLayout extends RelativeLayout{

private Random random = new Random();//用于實現(xiàn)隨機功能

 private int dHeight;//愛心的高度
 private int dWidth;//愛心的寬度
private int mHeight;//FavorLayout的高度
 private int mWidth;//FavorLayout的寬度
public FavorLayout(Context context) {
 super(context);
 }
public FavorLayout(Context context, AttributeSet attrs) {

 super(context, attrs);
 //為了顯示區(qū)域,我設置了一個背景顏色,隨意
 setBackgroundColor(getResources().getColor(R.color.bg));
//init里做一些初始化變量的操作
 init();
}


//重寫onMeasure 獲取控件寬高
@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 //注意!! 獲取本身的寬高 需要在測量之后才有寬高
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();
 }

}
//定義完畢后我們來實現(xiàn)底部,水平居中:

//定義一個LayoutParams 用它來控制子view的位置
 private LayoutParams lp;

 //底部 并且 水平居中
 lp = new LayoutParams(dWidth, dHeight);
 lp.addRule(CENTER_HORIZONTAL, TRUE); //這里的TRUE 要注意 不是true
 lp.addRule(ALIGN_PARENT_BOTTOM, TRUE);
 //好了,之后只要給子view設置LayoutParams就可以實現(xiàn)了

2.接下來實現(xiàn)第二步,隨機愛心在Android實現(xiàn)隨機數(shù)可以使用Random類,這里我只準備了3種不同的愛心,來看看代碼如何實現(xiàn)吧:

//首先定義 3個代表不同愛心的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;

這樣,下次取值時候只要使用如下代碼,就能隨機獲取到愛心了:

drawables[random.nextInt(3)]//表示0-2的隨機數(shù),注意,3是取不到的,是個開區(qū)間

3.好了隨機的愛心問題搞定,接下去讓我們做縮放動畫吧

說到Android動畫,我們以前常用Animation,它通常情況下能滿足我們的需求,但是它的功能比較弱,并不是很好用.好在3.0后,強大的屬性動畫的出現(xiàn),讓動畫在Android中實現(xiàn)起來變得非常容易.如果你還不知道屬性動畫怎么使用,趕緊去了解一下吧!
(以前在eoe上發(fā)過一篇帖子,很基礎,ObjectAnimator的運用,有興趣可以看下,提前說下,那是很久以前寫的!)

廢話不說了,那么具體怎么做呢,來看代碼吧:

//我封裝了一個方法 利用ObjectAnimator AnimatorSet來實現(xiàn) alpha以及x,y軸的縮放功能
//target就是愛心
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)加了,第一個階段也算是完成了,我們來看看效果吧:

偶,忘記說了,我們給外面的按鈕設置點擊事件,并且提供外部一個方法調(diào)用:

mBtnStartAnim.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 mFavorLayout.addFavor();
 }
 });

public void addFavor() {

 ImageView imageView = new ImageView(getContext());
 //隨機選一個
 imageView.setImageDrawable(drawables[random.nextInt(3)]);
 // 設置底部 水平居中
 imageView.setLayoutParams(lp);

 addView(imageView);
 Log.v(TAG, "add后子view數(shù):"+getChildCount());

 Animator set = getEnterAnimtor(imageView);
 set.start();

}

好了這下可以運行看看效果啦,可以看到,愛心的顏色是隨機的,并且也有了縮放動畫.

到此,簡單的功能我們已經(jīng)完成了,那么接下去就是大頭了.

4.實現(xiàn)貝塞爾曲線效果

我們怎么讓愛心按照曲線移動?而且還有隨機呢?

OK,接下去就是本文的主角貝塞爾曲線登場的時刻啦,這也是我實現(xiàn)這個效果學到的最重要的知識.

我是看這篇文章學習了解貝塞爾曲線的,推薦一下.

簡單來說,就是給定幾個點,計算出一個曲線.(其實復雜得我看不懂)

簡單了解貝塞爾曲線后,發(fā)現(xiàn)三次方貝塞爾曲線 符合我們的要求

公式:

公式.png

拿到了公式,先不要著急,我們先思考一下,明確一下它的參數(shù)是干什么的:

公式中需要四個P,P0,是我們的起點,P3是終點,P1,P2是途徑的兩個點
而t則是我們的一個因子,取值范圍是0-1,熟悉動畫的同學應該就明白,0-1,對動畫的作用有多么重大!!!所以看到這個,真是笑了~~

因為需要自己實現(xiàn)貝塞爾,所以我想到了屬性動畫中的TypeEvaluator,它就是我們需要的.

好了,接下來,我們來實現(xiàn)吧~

//我們自定義一個BezierEvaluator 實現(xiàn) TypeEvaluator
//由于我們view的移動需要控制x y 所以就傳入PointF 作為參數(shù),是不是感覺完全契合??
public class BezierEvaluator implements TypeEvaluator<PointF> {


 private PointF pointF1;//途徑的兩個點 
 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();//結果

 PointF point0 = (PointF)startValue;//起點

 PointF point3 = (PointF)endValue;//終點
 //代入公式 
 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;
 }
}

到這一步,只要我們傳入兩個PonitF就能得到一個貝塞爾曲線了.接下來我們在FavorLayout中定義獲取一個貝塞爾動畫的方法:

private ValueAnimator getBezierValueAnimator(View target) {

 //初始化一個BezierEvaluator
 BezierEvaluator evaluator = new BezierEvaluator(getPointF(2),getPointF(1));

 //這里最好畫個圖 理解一下 傳入了起點 和 終點
 ValueAnimator animator = ValueAnimator.ofObject(evaluator,new PointF((mWidth-dWidth)/2,mHeight-dHeight),new PointF(random.nextInt(getWidth()),0));//隨機
 animator.addUpdateListener(new BezierListenr(target));
 animator.setTarget(target);
 animator.setDuration(3000);
 return animator;
 }

//這里涉及到另外一個方法:getPointF(),這個是我用來獲取途徑的兩個點
// 這里的取值可以隨意調(diào)整,調(diào)整到你希望的樣子就好
/**
 * 獲取中間的兩個 點
 * @param scale
 */
 private PointF getPointF(int scale) {

 PointF pointF = new PointF();
 pointF.x = random.nextInt((mWidth - 100));//減去100 是為了控制 x軸活動范圍,看效果 隨意~~
 //再Y軸上 為了確保第二個點 在第一個點之上,我把Y分成了上下兩半 這樣動畫效果好一些 也可以用其他方法
 pointF.y = random.nextInt((mHeight - 100))/scale;
 return pointF;
 }

眼尖的你一定發(fā)現(xiàn)了我給動畫加了一個監(jiān)聽,只有在回調(diào)里使用了計算的值,才能真正做到曲線運動,否則沒有效果哦:

private class BezierListenr implements ValueAnimator.AnimatorUpdateListener {

 private View target;

 public BezierListenr(View target) {
 this.target = target;
 }
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
 //這里獲取到貝塞爾曲線計算出來的的x y值 賦值給view 這樣就能讓愛心隨著曲線走啦
 PointF pointF = (PointF) animation.getAnimatedValue();
 target.setX(pointF.x);
 target.setY(pointF.y);
 // 這里偷個懶,順便做一個alpha動畫,這樣alpha漸變也完成啦
 target.setAlpha(1-animation.getAnimatedFraction());
 }
 }

好了這個方法寫完,讓我們來測試一下效果如何吧!
對了,需要修改一下addFavor方法

public void addFavor() {

 ImageView imageView = new ImageView(getContext());
 //隨機選一個
 imageView.setImageDrawable(drawables[random.nextInt(3)]);
 imageView.setLayoutParams(lp);
 addView(imageView);
 Log.v(TAG, "add后子view數(shù):"+getChildCount());
 getBezierValueAnimator(imageView).start();
 }

好了,點擊一下,看看效果吧!!!

Bezier效果圖.gif

怎么樣?還不錯吧???

縮放的效果我們做了,曲線效果也有了
那么接下去把他們連起來即可!!~

5.收尾,最終效果

5.1 實現(xiàn)變速

// 我為了實現(xiàn) 變速效果 挑選了幾種插補器
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方法長這樣:
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;
 //獲取圖的寬高 用于后面的計算
 //注意 我這里3張圖片的大小都是一樣的,所以我只取了一個
 dHeight = red.getIntrinsicHeight();
 dWidth = red.getIntrinsicWidth();

 //底部 并且 水平居中
 lp = new LayoutParams(dWidth, dHeight);
 lp.addRule(CENTER_HORIZONTAL, TRUE);//這里的TRUE 要注意 不是true
 lp.addRule(ALIGN_PARENT_BOTTOM, TRUE);

 // 初始化插補器
 interpolators = new Interpolator[4];
 interpolators[0] = line;
 interpolators[1] = acc;
 interpolators[2] = dce;
 interpolators[3] = accdec;

 }

5.2 合并前倆種動畫,做成最終動畫

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)]);//實現(xiàn)隨機變速
 finalSet.setTarget(target);
 return finalSet;
 }

5.3 最后修改addFavor方法:

public void addFavor() {

 ImageView imageView = new ImageView(getContext());
 //隨機選一個
 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方法的同時我增加了一個監(jiān)聽,目的是為了在動畫結束后,把愛心移除,不然,子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);
 //因為不停的add 導致子view數(shù)量只增不減,所以在view動畫結束后remove掉
 removeView((target));
 Log.v(TAG, "removeView后子view數(shù):"+getChildCount());
 }
 }

以上就是實現(xiàn)Periscope點贊效果的全部過程，很詳細，希望對大家的學習有所幫助，大家可以動手操作一下，應用到自己的項目中。

相關文章

最新評論