Android贝塞尔曲线实现直播点赞效果

本文实例为大家分享了Android实现直播点赞效果的具体代码,供大家参考,具体内容如下

效果展示

原理分析

点赞效果最主要的难点和原理在于贝塞尔曲线动画的生成,我们通过图片主要讲解贝塞尔曲线动画

1、需要找到贝塞尔曲线的四个点
2、通过三级贝塞尔曲线的公式计算,获取贝塞尔曲线的轨迹路径点
3、通过设置点赞图片X,Y坐标,从而形成点赞的效果

实现步骤

1、初始化变量

//1、继承RelativeLayout
public class ChristmasView extends RelativeLayout implements View.OnClickListener {

 private Context context;
 //2、准备几张点赞图片
 private int[] christmas_drawable = {R.drawable.christmas01, R.drawable.christmas02, R.drawable.christmas03
  , R.drawable.christmas04, R.drawable.christmas05, R.drawable.christmas06};
 //随机数种子
 private Random random = new Random();
 //View的宽高
 private int width, height;
 //图片的宽高
 private int drawableWidth, drawableHeight;

 public ChristmasView(Context context) {
 this(context, null);
 }

 public ChristmasView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public ChristmasView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);

 this.context = context;
 //3、设置点击事件
 setOnClickListener(this);
 //4、获取点赞图片的宽高
 Drawable drawable = ContextCompat.getDrawable(context, R.drawable.christmas01);
 drawableWidth = drawable.getIntrinsicWidth();
 drawableHeight = drawable.getIntrinsicHeight();
 }
}

@Override
public void onClick(View v) {
 //5、点击增加点赞图片
 addChristmas(context);
}

2、点赞效果的实现

private void addChristmas(Context context) {
 /**
 * 1、点击一次增加一张图片在底部
 */
 final ImageView imageView = new ImageView(context);
 imageView.setBackgroundResource(christmas_drawable[random.nextInt(christmas_drawable.length - 1)]);
 RelativeLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
  ViewGroup.LayoutParams.WRAP_CONTENT);
 params.addRule(ALIGN_PARENT_BOTTOM);
 params.addRule(CENTER_HORIZONTAL);
 imageView.setLayoutParams(params);
 addView(imageView);

 //2、开始执行点赞效果
 AnimatorSet animatorSet = getAnimatorSet(imageView);
 animatorSet.addListener(new AnimatorListenerAdapter() {
 @Override
 public void onAnimationEnd(Animator animation) {
  //3、动画执行后移除View
  removeView(imageView);
 }
 });
 animatorSet.start();
}

3、动画实现

private AnimatorSet getAnimatorSet(ImageView imageView) {
 AnimatorSet enter = new AnimatorSet();

 //1、缩放动画
 AnimatorSet scaleAnimator = new AnimatorSet();
 ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 0.3f, 1f);
 ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 0.3f, 1f);
 ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0.3f, 1f);
 scaleAnimator.setDuration(300);
 scaleAnimator.playTogether(alpha, scaleX, scaleY);

 //2、贝塞尔动画
 ValueAnimator bezierAnimator = getBezierAnimator(imageView);

 //3、两个动画按顺序播放
 enter.playSequentially(scaleAnimator, bezierAnimator);
 return enter;
}

4、贝塞尔曲线动画

它需要一个估值器,不断的计算它的运行轨迹,从起始点到终点开始计算,当中也需要中间另外的两个点进行辅助计算,这些都是由贝塞尔曲线的公式所决定的

/**
 * 贝塞尔曲线估值器:计算动画的执行轨迹
 *
 * @params 传入贝塞尔曲线需要的四个点
 * @return 通过计算返回贝塞尔曲线的坐标
 */
public class BezierEvaluator implements TypeEvaluator<PointF> {

 private PointF point1;
 private PointF point2;

 public BezierEvaluator(PointF point1, PointF point2) {
 this.point1 = point1;
 this.point2 = point2;
 }

 @Override
 public PointF evaluate(float t, PointF point0, PointF point3) {
 PointF point = new PointF();
 //t 取值为 [0,1]

 /**
  * 三阶贝塞尔公式
  *
  * B(t)=(1 - t)^3 P0
  * + 3 t (1 - t)^2 P1
  * + 3 t^2 (1 - t) P2
  * + t^3 P3
  */
 point.x = point0.x * (1 - t) * (1 - t) * (1 - t)
  + 3 * point1.x * t * (1 - t) * (1 - t)
  + 3 * point2.x * t * t * (1 - t)
  + point3.x * t * t * t;

 /**
  * 三阶贝塞尔公式
  *
  * B(t)=(1 - t)^3 P0
  * + 3 t (1 - t)^2 P1
  * + 3 t^2 (1 - t) P2
  * + t^3 P3
  */
 point.y = point0.y * (1 - t) * (1 - t) * (1 - t)
  + 3 * point1.y * t * (1 - t) * (1 - t)
  + 3 * point2.y * t * t * (1 - t)
  + point3.y * t * t * t;

 return point;
 }
}

在不断的计算过程中,我们就可以一直获取它的轨迹点,从而执行我们的属性动画,实现贝塞尔曲线动画

/**
 * 贝塞尔动画
 *
 * @return
 */
private ValueAnimator getBezierAnimator(final ImageView imageView) {
 //1、构建贝塞尔曲线的四个点
 PointF point0 = new PointF((width - drawableWidth) / 2, height - drawableHeight);
 PointF point1 = new PointF(random.nextInt(width), random.nextInt(height / 2));
 PointF point2 = new PointF(random.nextInt(width), random.nextInt(height / 2) + height / 2);
 PointF point3 = new PointF(random.nextInt(width - drawableWidth), 0);

 //2、创建贝塞尔属性动画
 BezierEvaluator evaluator = new BezierEvaluator(point1, point2);
 final ValueAnimator valueAnimator = ObjectAnimator.ofObject(evaluator, point0, point3);
 valueAnimator.setInterpolator(new LinearInterpolator());
 valueAnimator.setDuration(3000);
 //3、监听贝塞尔曲线估值器返回值
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
  //4、获取BezierEvaluator中evaluate()返回的运行轨迹坐标点,设置点赞图片路线
  PointF pointF = (PointF) animation.getAnimatedValue();
  imageView.setX(pointF.x);
  imageView.setY(pointF.y);
  //6、获取BezierEvaluator中evaluate()返回的参数t,设置消失动画
  float t = animation.getAnimatedFraction();
  imageView.setAlpha(1 - t + 0.2f);
 }
 });
 return valueAnimator;
}

5、View的使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <com.handsome.boke2.CustomView.ChristmasView
 android:layout_width="100dp"
 android:layout_height="200dp"
 android:layout_alignParentBottom="true"
 android:layout_alignParentRight="true" />
</RelativeLayout>

6、源码下载

Android贝塞尔曲线实现直播点赞效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android直播app送礼物连击动画效果(实例代码)
  • Android 实现仿网络直播弹幕功能详解及实例
  • Android实现炫酷的网络直播弹幕功能
  • Android仿斗鱼直播的弹幕效果
  • Android自定义View模仿虎扑直播界面的打赏按钮功能
  • Android高级UI特效仿直播点赞动画效果
  • android实现直播点赞飘心动画效果
  • Android仿直播特效之点赞飘心效果
  • Android控件实现直播App特效之点赞飘心动画
  • Android实现直播聊天区域中顶部的渐变效果
(0)

相关推荐

  • Android实现炫酷的网络直播弹幕功能

    现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上有弹幕View,弹幕的View必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘制到弹幕的View上面就可以了,下方肯定还有有操作界面View,可以让用户来发弹幕和送礼物的功能,原理示意图如下所示: 参照原理图,下面一步一步来实现这个功能.

  • Android高级UI特效仿直播点赞动画效果

    本文给大家分享高级UI特效仿直播点赞效果-一个优美炫酷的点赞动画,具体实现代码大家参考本文. 效果图如下: 攻克难点: 心形图片的路径等走向 心形图片的控制范围 部分代码如下: 通过AbstractPathAnimator定义飘心动画控制器 @Override public void start(final View child, final ViewGroup parent) { parent.addView(child, new ViewGroup.LayoutParams(mConfig.

  • android实现直播点赞飘心动画效果

    前段时间在写直播的时候,需要观众在看直播的时候点赞的效果,在此参照了腾讯大神写的点赞(飘心动画效果).下面是效果图: 1.自定义飘心动画的属性 在attrs.xml 中增加自定义的属性 <!-- 飘心动画自定义的属性 --> <declare-styleable name="HeartLayout"> <attr name="initX" format="dimension"/> <attr name=&

  • Android 实现仿网络直播弹幕功能详解及实例

    Android 网络直播弹幕                最近看好多网络电视,播放器及直播都有弹幕功能,自己周末捣鼓下并实现,以下是网上的资料,大家可以看下. 现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面View,然后游戏界面上有弹幕View,弹幕的View必须要做成完全透明的,这样即使覆盖在游戏界面的上方也不会影响到游戏的正常观看,只有当有人发弹幕消息时,再将消息绘

  • Android控件实现直播App特效之点赞飘心动画

    现在市面上直播类的应用可以说是一抓一大把,随随便便就以什么主题来开发个直播App,说白了就想在这领域分杯羹.在使用这些应用过程中其实不难发现,在所有的直播界面,少不了的就是各种打赏.各种点赞.今天自己就针对点赞功能敲了一下,代码不多,主要是涉及到动画运动轨迹运算,这里需借助 贝塞尔曲线 相关知识,我使用三阶贝塞尔曲线来实现轨迹动画. 运行效果 一.具体实现流程 仔细分析整个点赞过程可以发现,首先是"爱心"的出现动画,然后是"爱心"以类似气泡的形式向上运动. &quo

  • Android自定义View模仿虎扑直播界面的打赏按钮功能

    前言 作为一个资深篮球爱好者,我经常会用虎扑app看比赛直播,后来注意到文字直播界面右下角加了两个按钮,可以在直播过程中送虎扑币,为自己支持的球队加油. 具体的效果如下图所示: 我个人觉得挺好玩的,所以决定自己实现下这个按钮,废话不多说,先看实现的效果吧: 这个效果看起来和popupwindow差不多,但我是采用自定义view的方式来实现,下面说说过程. 实现过程 首先从虎扑的效果可以看到,它这两个按钮时浮在整个界面之上的,所以它需要和FrameLayout结合使用,因此我让它的宽度跟随屏幕大小

  • Android直播app送礼物连击动画效果(实例代码)

    最近在做公司的直播项目,需要实现一个观看端连击送礼物的控件: 直接上代码: /** * @author yangyinglong on 2017/7/11 16:52. * @Description: todo(这里用一句话描述这个类的作用) * @Copyright Copyright (c) 2017 Tuandai Inc. All Rights Reserved. */ public class CustomGiftView extends LinearLayout { private

  • Android仿斗鱼直播的弹幕效果

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最为重要的一个功能之一,那么今天,我就带着大家一起来实现一个简单的Android端弹幕效果. 分析 首先我们来看一下斗鱼上的弹幕效果,如下图所示: 这是一个Dota2游戏直播的界面,我们可以看到,在游戏界面的上方有很多的弹幕,看直播的观众们就是在这里进行讨论的. 那么这样的一个界面该如何实现呢?其实并

  • Android仿直播特效之点赞飘心效果

    本文实例为大家分享了Android实现点赞飘心效果的具体代码,供大家参考,具体内容如下 一.概述 老规矩先上图 好了,基本就是这个样子,录完的视频用格式工厂转换完就这个样子了,将就看吧 二.定义我们自己的Layout /** * @author 刘洋巴金 * @date 2017-4-27 * * 定义我们自己的布局 * */ public class LoveLayout extends RelativeLayout{ private Context context; private Layo

  • Android实现直播聊天区域中顶部的渐变效果

    背景 在4月份开发直播时,有一个需求,需要实现一个RecylerView顶部渐变的效果 实际效果 解决思路 图层重叠处理(本质是alpha叠加出来的效果) 实现流程 保存一个图层,然后画渐变,最后再和原来的图层进行合并,达到这个效果. 涉及知识(不知道的请google): *      主要通过RecyclerView 的 ItemDecoration类进行解决. *      Paint.Canvas.Shader.Xfermode(图层融合) *      Gradient(渐变) 详细过程

随机推荐