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

背景

在4月份开发直播时,有一个需求,需要实现一个RecylerView顶部渐变的效果

实际效果

解决思路

图层重叠处理(本质是alpha叠加出来的效果)

实现流程

保存一个图层,然后画渐变,最后再和原来的图层进行合并,达到这个效果。

涉及知识(不知道的请google):

*      主要通过RecyclerView 的 ItemDecoration类进行解决。

*      Paint、Canvas、Shader、Xfermode(图层融合)

*      Gradient(渐变)

详细过程:

图层叠加需要通过Xfermode,Xfermode主要是让不同图层融合,但是有个前提,就是不同图层需要由相同的画笔(Paint)绘制而成。 这里就抛出了几个问题:

1.     如何获取RecyclerView上每个Item的图层?

2.     获取到图层,如何让该图层的画笔和渐变图层的画笔保持一致?

3.     融合方式,参见Xfermode的参数?

解决方案

1.     查找资料之后,可以通过RecyclerView的ItemDecoration抽象类获知,绘制图层前后的事件。 onDraw:绘制Item开始的事件回调,onDrawOver:绘制Item结束的事件回调。可以通过Parent计算获取相应的Item或Canvas面板。

2.     Canvas的saveLayer方法,将当前的Canvas存入Paint中,然后用该Paint绘制渐变图层,就实现两个图层相同画笔这一条件。

3.     融合方式,采用DST_IN, 底部图层是聊天Item,上层是渐变图层,alpha融合之后就是聊天Item带有渐变的效果。(脑部一下)

具体代码:

public void doTopGradualEffect(){
  if(recyclerView == null){
   return ;
  }

  mPaint = new Paint();
  // 融合器
  final Xfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
  mPaint.setXfermode(xfermode);
  // 创造一个颜色渐变,作为聊天区顶部效果
  linearGradient = new LinearGradient(0.0f, 0.0f, 0.0f, 100.0f, new int[]{0, Color.BLACK}, null, Shader.TileMode.CLAMP);

  recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() {
   // 滑动RecyclerView,渲染之后每次都会回调这个方法,就在这里进行融合
   @Override
   public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(canvas, parent, state);

    mPaint.setXfermode(xfermode);
    mPaint.setShader(linearGradient);
    canvas.drawRect(0.0f, 0.0f, parent.getRight(), 200.0f, mPaint);
    mPaint.setXfermode(null);
    canvas.restoreToCount(layerId);
   }

   @Override
   public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDraw(c, parent, state);
    layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);
   }

   @Override
   public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    super.getItemOffsets(outRect, view, parent, state);
   }
  });
 }

Demo已经上传github:https://github.com/HarrisonLin/RecyclerViewEffectGather,有兴趣的可以去下载。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

您可能感兴趣的文章:

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

相关推荐

  • 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实现直播点赞效果的具体代码,供大家参考,具体内容如下 效果展示 原理分析 点赞效果最主要的难点和原理在于贝塞尔曲线动画的生成,我们通过图片主要讲解贝塞尔曲线动画 1.需要找到贝塞尔曲线的四个点 2.通过三级贝塞尔曲线的公式计算,获取贝塞尔曲线的轨迹路径点 3.通过设置点赞图片X,Y坐标,从而形成点赞的效果 实现步骤 1.初始化变量 //1.继承RelativeLayout public class ChristmasView extends RelativeLa

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

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

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

    Android 网络直播弹幕                最近看好多网络电视,播放器及直播都有弹幕功能,自己周末捣鼓下并实现,以下是网上的资料,大家可以看下. 现在网络直播越来越火,网络主播也逐渐成为一种新兴职业,对于网络直播,弹幕功能是必须要有的,如下图: 首先来分析一下,这个弹幕功能是怎么实现的,首先在最下面肯定是一个游戏界面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仿直播特效之点赞飘心效果

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

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

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

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

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

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

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

随机推荐