高仿QQ視訊加點炫酷特效—你這樣玩過嗎

codeGoogle發表於2019-02-27

說起APP呢，每個人都有那麼幾款喜歡的並且經常使用的應用，我呢喜歡的應用有這麼幾個：QQ、酷狗、今日頭條、百度貼吧等等。不僅僅是因為我經常使用它們，更重要的是我作為一名移動開發者認為它們做的很好，裡面的一些效果經常會吸引我，它們會經常創新，使使用者體驗更好~好了，廢話不多說（廣告也不打了，他們老總又不給我錢）。說到QQ，前不久更新了一版其中的登入介面的背景不再是單調的一張圖片了而是一個有很多漂亮妹子的視訊在播放，說實話我看到的時候還挺耳目一新的，因為之前沒見到過這樣的APP，最多也就加個動畫，好吧又扯了一大堆，來看看效果圖吧！

既然都說了那麼多了，不妨在多寫一點，雷軍曾經說過要做米粉心中最酷的公司，我本人呢也是一個忠實的米粉。雖然騰訊不是我心中最酷的公司，但是他們家的應用QQ我還是很喜歡的，因為功能強大優化很好，就拿剛才的登入頁面來說我就覺得很漂亮，（注意：切入正題~）最後我就想如果再在介面上加一些滿天飛的彩色氣泡那不就美炸了，哈哈哈，於是就無聊寫著完了，順便鞏固一下屬性動畫的知識，再來放個效果圖（git圖太大，所以截的比較短）~，這裡加個小的友情提示：下載一個QQ的APK包，把副檔名改成.zip格式然後解壓出來就能找到視訊圖片表情等這些個資原始檔了哦，一般人我不告訴他~

好吧，又扯了這麼多，下面該上點真東西了~照例先放個GitHub傳送門：BalloonRelativeLayout
看到這樣的一個效果，該如何去實現呢？有人就要說了，這TM不就是類似直播間點贊效果的實現嗎？yeah，You are right ! ! ! 我只不過把點贊換成了氣泡（機智如我）

總體思路和原理

1.自定義ViewGroup繼承自RelativeLayout；
2.在自定義ViewGroup裡新增一個個的view（氣泡）；
3.使view（氣泡）沿著貝塞爾曲線的軌跡移動；複製程式碼

好的，總體大致思路就是這麼多吧，更細節的東西繼續往下看：

1.自定義ViewGroup繼承自RelativeLayout：

此次我們主要是實現功能，不考慮太多的擴充套件性，就不自定義屬性啦~

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陣列裡面備用；

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和隨機數Random；

private Interpolator[] interpolators;//插值器陣列
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，氣泡已經做好了，接下來就是要把氣泡塞到我們的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動畫結束後remove掉
                removeView(imageView);
            }
        });
        animator.start();複製程式碼

上面程式碼主要分為三點：1.初始化一個氣泡view；2.新增到ViewGroup；3.獲取一個屬性動畫物件執行動畫，在這個動畫結束後把氣泡從ViewGroup裡removeView掉。

3.使view（氣泡）沿著貝塞爾曲線的軌跡移動；

OK，來到最後一個步驟，這是重點也是難點，其實說難不難說易不易，這特麼又是一句廢話~，先來思考一下我們想要的效果，氣泡從左下角飄出，然後按照曲線的軌跡向螢幕的頂端飄去，有的很快，有的很慢，有的快快慢慢~~~既然如此，我們先來把曲線的路徑的座標獲取到吧，我們使用三階貝塞爾曲線公式：關於貝塞爾曲線呢，它很神祕也很神奇，關於它不僅要學很長時間還要理解很長時間，就不多說了，在這隻放一個公式，然後推薦一篇部落格[Android：貝塞爾曲線原理分析]

好的，來寫我們自定義的插值器吧~

/**
 * 自定義插值器
 */
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;//插值器陣列
    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();//初始化隨機數類
    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動畫結束後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自帶方法實現定時器
            try {
                mHandler.postDelayed(this, TIME);
                mBalloonRelativeLayout.addBalloon();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //取消狀態列
        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));
        //設定相關的監聽
        mVideoView.setOnPreparedListener(this);
        mVideoView.setOnCompletionListener(this);
    }

    //播放準備
    @Override
    public void onPrepared(MediaPlayer mp) {
        //開始播放
        mVideoView.start();
        mHandler.postDelayed(runnable, TIME);
    }

    //播放結束
    @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);
    }
}複製程式碼

demo地址：

github.com/SuperKotlin…

如果你覺得此文對您有所幫助，歡迎入群 QQ交流群： 232203809
微信公眾號：終端研發部

那些炫酷的特效–QQ空間+VUE
2019-03-02
特效Vue
那些炫酷的特效--QQ空間+VUE
2017-09-26
特效Vue
自定義View：實現炫酷的點贊特效（仿即刻）
2017-10-23
View特效
前端炫酷特效合集
2022-12-18
前端特效
怎樣做QQ上酷炫的人？看！Android仿QQ 傳送圖片時載入效果
2020-03-06
Android
高階UI特效仿直播點贊效果—一個優美炫酷的點贊動畫
2017-09-18
UI特效動畫
高仿京東到家APP引導頁炫酷動畫效果
2021-03-29
APP動畫
高階UI特效之酷炫搶紅包金幣下落動畫
2017-08-01
UI特效動畫
Android高仿QQ小紅點
2017-12-15
Android
你知道微視背後的視訊特效技術是怎樣做出來的嗎？
2018-08-27
特效
你不曾見過的酷炫地圖視覺化作品（一）
2017-11-05
地圖視覺化
遊戲特效，只管炫酷炸裂就完事了！？？
2021-01-08
遊戲特效
通過Ansi Escape Codes酷炫玩轉命令列！
2017-11-25
命令列
高仿QQ小程式，我趟過的坑
2016-10-10
這樣玩演算法才夠酷
2017-12-24
演算法
收藏吃灰，12 個炫酷背景特效庫
2022-03-04
特效
短視訊運營經驗分享，掌握這6點，你也可以玩轉短視訊
2021-12-22
「拼房」你敢嗎？這款App這樣玩「陌生人社交」
2015-12-16
APP
2.24 炫酷支配點對
2024-03-26
7款炫酷的HTML5 Canvas動畫特效
2015-01-13
HTMLCanvas動畫特效
高手 Linux 程式碼炫酷秀（含演示視訊）
2019-01-11
Linux
高仿微信搶紅包動畫特效
2016-07-22
動畫特效
開眼視訊 vue 高仿版
2020-02-13
Vue
視覺化大屏炫酷高檔，結合智慧樓宇，會變成什麼樣？
2021-04-09
視覺化
如何繪製酷炫折線圖? 視訊教程 + 原始碼
2017-12-12
原始碼
一波Flutter酷炫特效來襲，持續更新
2019-04-18
Flutter特效
CSS 炫酷文字過渡動畫
2022-05-24
CSS動畫
仿手機iPhone QQ訊息小紅點動畫1
2015-05-18
iPhone動畫
高階UI特效之炫酷漂浮動畫—一個能讓View執行漂浮的庫
2017-08-29
UI特效動畫View
領導嫌棄視覺化太醜？學會這10個高階炫酷圖表，勝過一切技巧
2021-01-13
視覺化
如何實現：錄製視訊聊天的全過程？【低調贈送：QQ高仿版GG 4.3 最新原始碼】
2015-06-17
原始碼
canvas實現炫酷的黑客帝國數字雨特效
2019-03-01
Canvas黑客特效
jQuery實現高仿QQ音樂
2020-02-12
jQuery
FmsCms仿六間房秀場主播視訊直播系統購買加QQ42037803
2019-05-11
8個酷炫的GitHub技巧，讓你看起來像大佬一樣！
2022-06-01
Github
React Native 仿抖音點贊特效
2018-07-19
React Native特效
特效材質還可以這樣玩！？3D畫素教程
2020-08-07
特效3D
怎樣製作出美觀酷炫的視覺化大屏報表？
2020-06-17
視覺化