高仿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上酷炫的人？看！Android仿QQ 傳送圖片時載入效果
2020-03-06
Android
前端炫酷特效合集
2022-12-18
前端特效
用echart玩點好玩的--酷炫熱力圖
2019-03-19
你知道微視背後的視訊特效技術是怎樣做出來的嗎？
2018-08-27
特效
高仿京東到家APP引導頁炫酷動畫效果
2021-03-29
APP動畫
收藏吃灰，12 個炫酷背景特效庫
2022-03-04
特效
遊戲特效，只管炫酷炸裂就完事了！？？
2021-01-08
遊戲特效
高手 Linux 程式碼炫酷秀（含演示視訊）
2019-01-11
Linux
2.24 炫酷支配點對
2024-03-26
短視訊運營經驗分享，掌握這6點，你也可以玩轉短視訊
2021-12-22
一波Flutter酷炫特效來襲，持續更新
2019-04-18
Flutter特效
視覺化大屏炫酷高檔，結合智慧樓宇，會變成什麼樣？
2021-04-09
視覺化
古馳高仿包包怎麼樣gucci高仿包看得出嗎
2021-03-02
FmsCms仿六間房秀場主播視訊直播系統購買加QQ42037803
2019-05-11
字串可以這樣加索引，你知嗎？《死磕MySQL系列七》
2021-11-08
字串索引MySql
canvas實現炫酷的黑客帝國數字雨特效
2019-03-01
Canvas黑客特效
領導嫌棄視覺化太醜？學會這10個高階炫酷圖表，勝過一切技巧
2021-01-13
視覺化
CSS 炫酷文字過渡動畫
2022-05-24
CSS動畫
開眼視訊 vue 高仿版
2020-02-13
Vue
8個酷炫的GitHub技巧，讓你看起來像大佬一樣！
2022-06-01
Github
嘿，你玩過《光·遇》嗎？
2020-09-11
你玩過凌晨三點的《英雄聯盟》手遊嗎？
2020-11-05
js炫酷訊息通知外掛
2024-11-26
JS
jQuery實現高仿QQ音樂
2020-02-12
jQuery
怎樣製作出美觀酷炫的視覺化大屏報表？
2020-06-17
視覺化
React Native 仿抖音點贊特效
2018-07-19
React Native特效
特效材質還可以這樣玩！？3D畫素教程
2020-08-07
特效3D
學會這2招，不用設計師，一樣能做出精美炫酷的視覺化大屏模板
2021-06-25
視覺化
高仿QQ 傳送圖片高亮HaloProgressView
2019-01-08
View
請收下這72個炫酷的CSS技巧
2019-12-25
CSS
如何讓你的Cadence Library看起來酷炫
2020-10-08
炫酷動圖讓你從CABasicAnimation看到CATransition
2018-03-27
Android 高仿騰訊新聞視訊切換效果
2019-04-30
Android
B站上的互動視訊，這屆年輕人會玩嗎？
2019-07-15
那些炫酷高階的視覺化大屏，是如何開發出來的？
2020-12-11
視覺化
你有玩過Docker嗎？你知道它有哪些運用場景嗎？
2024-11-26
Docker
win10 QQ熱點資訊怎樣刪除_win10刪除QQ熱點資訊教程
2020-06-25
Win10