高仿QQ视频加点炫酷特效—你这样玩过吗

钱焕

2023-12-01

说起APP呢，每个人都有那么几款喜欢的并且经常使用的应用，我呢喜欢的应用有这么几个：QQ、酷狗、今日头条、百度贴吧等等。不仅仅是因为我经常使用它们，更重要的是我作为一名移动开发者认为它们做的很好，里面的一些效果经常会吸引我，它们会经常创新，使用户体验更好~好了，废话不多说（广告也不打了，他们老总又不给我钱）。说到QQ，前不久更新了一版其中的登录界面的背景不再是单调的一张图片了而是一个有很多漂亮妹子的视频在播放，说实话我看到的时候还挺耳目一新的，因为之前没见到过这样的APP，最多也就加个动画，好吧又扯了一大堆，来看看效果图吧！

Paste_Image.png

既然都说了那么多了，不妨在多写一点，雷军曾经说过要做米粉心中最酷的公司，我本人呢也是一个忠实的米粉。虽然腾讯不是我心中最酷的公司，但是他们家的应用QQ我还是很喜欢的，因为功能强大优化很好，就拿刚才的登录页面来说我就觉得很漂亮，（注意：切入正题~）最后我就想如果再在界面上加一些满天飞的彩色气泡那不就美炸了，哈哈哈，于是就无聊写着完了，顺便巩固一下属性动画的知识，再来放个效果图（git图太大，所以截的比较短）~，这里加个小的友情提示：下载一个QQ的APK包，把扩展名改成.zip格式然后解压出来就能找到视频图片表情等这些个资源文件了哦，一般人我不告诉他~

Paste_Image.png

好吧，又扯了这么多，下面该上点真东西了~照例先放个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：贝塞尔曲线原理分析]

Paste_Image.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;//插值器数组
    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视频加点炫酷特效—你这样玩过吗

总体思路和原理

1.自定义ViewGroup继承自RelativeLayout：

2.在自定义ViewGroup里添加一个个的view（气泡）；

3.使view（气泡）沿着贝塞尔曲线的轨迹移动；

BalloonRelativeLayout.java

activity_main.xml

MainActivity.java

CustomVideoView.java

相关阅读

相关文章

相关问答

相关文档