說起APP呢府怯，每個人都有那么幾款喜歡的并且經(jīng)常使用的應用刻诊，我呢喜歡的應用有這么幾個：QQ、酷狗牺丙、今日頭條则涯、百度貼吧等等。不僅僅是因為我經(jīng)常使用它們冲簿，更重要的是我作為一名移動開發(fā)者認為它們做的很好粟判，里面的一些效果經(jīng)常會吸引我，它們會經(jīng)常創(chuàng)新峦剔，使用戶體驗更好~好了档礁，廢話不多說（廣告也不打了，他們老總又不給我錢）羊异。說到QQ事秀，前不久更新了一版其中的登錄界面的背景不再是單調(diào)的一張圖片了而是一個有很多漂亮妹子的視頻在播放彤断，說實話我看到的時候還挺耳目一新的，因為之前沒見到過這樣的APP易迹。
既然都說了那么多了宰衙，不妨在多寫一點，雷軍曾經(jīng)說過要做米粉心中最酷的公司睹欲，我本人呢也是一個忠實的米粉供炼。雖然騰訊不是我心中最酷的公司，但是他們家的應用QQ我還是很喜歡的窘疮，因為功能強大優(yōu)化很好袋哼，就拿剛才的登錄頁面來說我就覺得很漂亮，（注意：切入正題）最后我就想如果再在界面上加一些滿天飛的彩色氣泡那不就美炸了闸衫，哈哈哈涛贯，于是就無聊寫著完了，順便鞏固一下屬性動畫的知識蔚出，再來放個效果圖（git圖太大弟翘，所以截的比較短），這里加個小的友情提示：下載一個QQ的APK包骄酗，把擴展名改成.zip格式然后解壓出來就能找到視頻圖片表情等這些個資源文件了哦稀余，一般人我不告訴他~
my_qq_login.gif
好吧，又扯了這么多趋翻，下面該上點真東西了~照例先放個GitHub傳送門：BalloonRelativeLayout
看到這樣的一個效果睛琳，該如何去實現(xiàn)呢？有人就要說了踏烙，這TM不就是類似直播間點贊效果的實現(xiàn)嗎师骗？yeah，You are right ! ! ! 我只不過把點贊換成了氣泡（機智如我）
總體思路和原理
1.自定義ViewGroup繼承自RelativeLayout讨惩；
2.在自定義ViewGroup里添加一個個的view（氣泡）丧凤；
3.使view（氣泡）沿著貝塞爾曲線的軌跡移動；
好的步脓，總體大致思路就是這么多吧愿待，更細節(jié)的東西繼續(xù)往下看：
1.自定義ViewGroup繼承自RelativeLayout：
此次我們主要是實現(xiàn)功能，不考慮太多的擴展性靴患，就不自定義屬性啦~
public class BalloonRelativeLayout extends RelativeLayout {
public BalloonRelativeLayout(Context context) {
this(context, null);
}
public BalloonRelativeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BalloonRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
init();
}
//重寫測量方法仍侥，獲取寬高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
}
接下來把目光指向我們的氣泡君~
[1].先來加工一下我們的氣泡view：這里我選擇了三張不同的圖片獲取Drawable對象然后放到drawables數(shù)組里面?zhèn)溆茫?/p>
private Drawable[] drawables;
//初始化顯示的圖片
drawables = new Drawable[3];
Drawable mBalloon = ContextCompat.getDrawable(mContext, R.mipmap.balloon_pink);
Drawable mBalloon2 = ContextCompat.getDrawable(mContext, R.mipmap.balloon_purple);
Drawable mBalloon3 = ContextCompat.getDrawable(mContext, R.mipmap.balloon_blue);
drawables[0] = mBalloon;
drawables[1] = mBalloon2;
drawables[2] = mBalloon3;
[2].既然有氣泡了，那么就得對氣泡進行一些處理
private int mViewHeight = dip2px(getContext(), 50);//默認50dp
private LayoutParams layoutParams;
//設置view寬高相等鸳君，默認都是50dp
layoutParams = new LayoutParams(mViewHeight, mViewHeight);
layoutParams.addRule(ALIGN_PARENT_BOTTOM, TRUE);
[3].為了讓氣泡的動畫顯得更自然和隨機性农渊，那么我們還需要兩個東西，屬性動畫中的插值器Interpolator和隨機數(shù)Random或颊；
private Interpolator[] interpolators;//插值器數(shù)組
private Interpolator linearInterpolator = new LinearInterpolator();// 以常量速率改變
private Interpolator accelerateInterpolator = new AccelerateInterpolator();//加速
private Interpolator decelerateInterpolator = new DecelerateInterpolator();//減速
private Interpolator accelerateDecelerateInterpolator = new AccelerateDecelerateInterpolator();//先加速后減速
// 初始化插值器
interpolators = new Interpolator[4];
interpolators[0] = linearInterpolator;
interpolators[1] = accelerateInterpolator;
interpolators[2] = decelerateInterpolator;
interpolators[3] = accelerateDecelerateInterpolator;
2.在自定義ViewGroup里添加一個個的view（氣泡）砸紊；
OK传于，氣泡已經(jīng)做好了，接下來就是要把氣泡塞到我們的ViewGroup里了醉顽。
final ImageView imageView = new ImageView(getContext());
//隨機選一個
imageView.setImageDrawable(drawables[random.nextInt(3)]);
imageView.setLayoutParams(layoutParams);
addView(imageView);//放進ViewGroup
Animator animator = getAnimator(imageView);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//view動畫結(jié)束后remove掉
removeView(imageView);
}
});
animator.start();
上面代碼主要分為三點：1.初始化一個氣泡view沼溜；2.添加到ViewGroup；3.獲取一個屬性動畫對象執(zhí)行動畫游添，在這個動畫結(jié)束后把氣泡從ViewGroup里removeView掉系草。
3.使view（氣泡）沿著貝塞爾曲線的軌跡移動；
OK唆涝，來到最后一個步驟，這是重點也是難點廊酣，其實說難不難說易不易，這特么又是一句廢話亡驰，先來思考一下我們想要的效果，氣泡從左下角飄出隐解，然后按照曲線的軌跡向屏幕的頂端飄去诫睬，有的很快，有的很慢摄凡，有的快快慢慢~~
既然如此，我們先來把曲線的路徑的坐標獲取到吧钦扭，我們使用三階貝塞爾曲線公式：關(guān)于貝塞爾曲線呢，它很神秘也很神奇客情，關(guān)于它不僅要學很長時間還要理解很長時間，就不多說了膀斋，在這只放一個公式体斩，然后推薦一篇博客Android：貝塞爾曲線原理分析大家自己去看吧~
三階貝塞爾曲線公式.png
好的言询，來寫我們自定義的插值器吧~
/**
* 自定義插值器
*/
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 timeOn = 1.0f - time;
PointF point = new PointF();
//這么復雜的公式讓我計算真心頭疼辙浑，但是計算機很easy
point.x = timeOn * timeOn * timeOn * (startValue.x)
+ 3 * timeOn * timeOn * time * (pointF1.x)
+ 3 * timeOn * time * time * (pointF2.x)
+ time * time * time * (endValue.x);
point.y = timeOn * timeOn * timeOn * (startValue.y)
+ 3 * timeOn * timeOn * time * (pointF1.y)
+ 3 * timeOn * time * time * (pointF2.y)
+ time * time * time * (endValue.y);
//這里返回的是曲線上每一個點的坐標值
return point;
}
}
下面就來使用這個插值器吧走敌，開始寫我們的屬性動畫~
//初始化一個自定義的貝塞爾曲線插值器急波，并且傳入控制點
BezierEvaluator evaluator = new BezierEvaluator(getPointF(), getPointF());
//傳入了曲線起點（左下角）和終點（頂部隨機）
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(0, getHeight())
, new PointF(random.nextInt(getWidth()), -mViewHeight));
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//獲取到貝塞爾曲線軌跡上的x和y值 賦值給view
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
}
});
animator.setTarget(target);
animator.setDuration(5000);
這里面牽涉了一個控制點的獲取，我們是采用隨機性的原則來獲取ViewGroup上的任何一點的坐標來作為曲線的控制點~
/**
* 自定義曲線的兩個控制點扶平，隨機在ViewGroup上的任何一個位置
*/
private PointF getPointF() {
PointF pointF = new PointF();
pointF.x = random.nextInt(mWidth);
pointF.y = random.nextInt(mHeight);
return pointF;
}
最后再來初始化一個AnimatorSet把剛才寫好的貝塞爾曲線的屬性動畫放進去即可盏触，最后把這個AnimatorSet賦給最開始時候的animator就大功告成了。
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(bezierValueAnimator);
animatorSet.setInterpolator(interpolators[random.nextInt(4)]);
animatorSet.setTarget(target);
最后在Activity中獲取該ViewGroup贮尉，隨便寫一個定時器源源不斷的往ViewGroup中添加氣泡即可拌滋。
按照慣例，把全家福放上來~
BalloonRelativeLayout.java
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import java.util.Random;
/**
* Created by zhuyong on 2017/7/19.
*/
public class BalloonRelativeLayout extends RelativeLayout {
private Context mContext;
private Interpolator[] interpolators;//插值器數(shù)組
private Interpolator linearInterpolator = new LinearInterpolator();// 以常量速率改變
private Interpolator accelerateInterpolator = new AccelerateInterpolator();//加速
private Interpolator decelerateInterpolator = new DecelerateInterpolator();//減速
private Interpolator accelerateDecelerateInterpolator = new AccelerateDecelerateInterpolator();//先加速后減速
private LayoutParams layoutParams;
private int mHeight;
private int mWidth;
private Random random = new Random();//初始化隨機數(shù)類
private int mViewHeight = dip2px(getContext(), 50);//默認50dp
private Drawable[] drawables;
public BalloonRelativeLayout(Context context) {
this(context, null);
}
public BalloonRelativeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BalloonRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
init();
}
private void init() {
//初始化顯示的圖片
drawables = new Drawable[3];
Drawable mBalloon = ContextCompat.getDrawable(mContext, R.mipmap.balloon_pink);
Drawable mBalloon2 = ContextCompat.getDrawable(mContext, R.mipmap.balloon_purple);
Drawable mBalloon3 = ContextCompat.getDrawable(mContext, R.mipmap.balloon_blue);
drawables[0] = mBalloon;
drawables[1] = mBalloon2;
drawables[2] = mBalloon3;
//設置view寬高相等绘盟，默認都是50dp
layoutParams = new LayoutParams(mViewHeight, mViewHeight);
layoutParams.addRule(ALIGN_PARENT_BOTTOM, TRUE);
// 初始化插值器
interpolators = new Interpolator[4];
interpolators[0] = linearInterpolator;
interpolators[1] = accelerateInterpolator;
interpolators[2] = decelerateInterpolator;
interpolators[3] = accelerateDecelerateInterpolator;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getMeasuredWidth();
mHeight = getMeasuredHeight();
}
public void addBalloon() {
final ImageView imageView = new ImageView(getContext());
//隨機選一個
imageView.setImageDrawable(drawables[random.nextInt(3)]);
imageView.setLayoutParams(layoutParams);
addView(imageView);
Animator animator = getAnimator(imageView);
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//view動畫結(jié)束后remove掉
removeView(imageView);
}
});
animator.start();
}
private Animator getAnimator(View target) {
ValueAnimator bezierValueAnimator = getBezierValueAnimator(target);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(bezierValueAnimator);
animatorSet.setInterpolator(interpolators[random.nextInt(4)]);
animatorSet.setTarget(target);
return animatorSet;
}
private ValueAnimator getBezierValueAnimator(final View target) {
//初始化一個自定義的貝塞爾曲線插值器鸠真，并且傳入控制點
BezierEvaluator evaluator = new BezierEvaluator(getPointF(), getPointF());
//傳入了曲線起點（左下角）和終點（頂部隨機）
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(0, getHeight())
, new PointF(random.nextInt(getWidth()), -mViewHeight));
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//獲取到貝塞爾曲線軌跡上的x和y值 賦值給view
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
}
});
animator.setTarget(target);
animator.setDuration(5000);
return animator;
}
/**
* 自定義曲線的兩個控制點，隨機在ViewGroup上的任何一個位置
*/
private PointF getPointF() {
PointF pointF = new PointF();
pointF.x = random.nextInt(mWidth);
pointF.y = random.nextInt(mHeight);
return pointF;
}
/**
* 自定義插值器
*/
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 timeOn = 1.0f - time;
PointF point = new PointF();
//這么復雜的公式讓我計算真心頭疼龄毡，但是計算機很easy
point.x = timeOn * timeOn * timeOn * (startValue.x)
+ 3 * timeOn * timeOn * time * (pointF1.x)
+ 3 * timeOn * time * time * (pointF2.x)
+ time * time * time * (endValue.x);
point.y = timeOn * timeOn * timeOn * (startValue.y)
+ 3 * timeOn * timeOn * time * (pointF1.y)
+ 3 * timeOn * time * time * (pointF2.y)
+ time * time * time * (endValue.y);
return point;
}
}
/**
* Dip into pixels
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<com.zhuyong.balloonrelativelayout.BalloonRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/balloonRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<!--播放視頻-->
<com.zhuyong.balloonrelativelayout.CustomVideoView
android:id="@+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false" />
</com.zhuyong.balloonrelativelayout.BalloonRelativeLayout>
MainActivity.java
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.WindowManager;
import android.widget.VideoView;
public class MainActivity extends AppCompatActivity implements MediaPlayer.OnPreparedListener, MediaPlayer.OnCompletionListener {
private BalloonRelativeLayout mBalloonRelativeLayout;
private VideoView mVideoView;
private int TIME = 100;//這里默認每隔100毫秒添加一個氣泡
Handler mHandler = new Handler();
Runnable runnable = new Runnable() {
@Override
public void run() {
// handler自帶方法實現(xiàn)定時器
try {
mHandler.postDelayed(this, TIME);
mBalloonRelativeLayout.addBalloon();
} catch (Exception e) {
e.printStackTrace();
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//取消狀態(tài)欄
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
mVideoView = (VideoView) findViewById(R.id.videoView);
mBalloonRelativeLayout = (BalloonRelativeLayout) findViewById(R.id.balloonRelativeLayout);
initVideoView();
}
private void initVideoView() {
//設置屏幕常亮
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
mVideoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.mqr));
//設置相關(guān)的監(jiān)聽
mVideoView.setOnPreparedListener(this);
mVideoView.setOnCompletionListener(this);
}
//播放準備
@Override
public void onPrepared(MediaPlayer mp) {
//開始播放
mVideoView.start();
mHandler.postDelayed(runnable, TIME);
}
//播放結(jié)束
@Override
public void onCompletion(MediaPlayer mp) {
//開始播放
mVideoView.start();
}
}
既然說了是全家福了吠卷，就把自定義VideoView也放進來把主要是解決不能全屏顯示的問題
CustomVideoView.java
import android.content.Context;
import android.util.AttributeSet;
import android.widget.VideoView;
/**
* Created by zhuyong on 2017/7/20.
* 自定義VideoView解決全屏問題
*/
public class CustomVideoView extends VideoView {
public CustomVideoView(Context context) {
this(context, null);
}
public CustomVideoView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomVideoView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getDefaultSize(0, widthMeasureSpec);
int height = getDefaultSize(0, heightMeasureSpec);
setMeasuredDimension(width, height);
}
}
GitHub傳送門：源碼
