前阵子在github上看到一个很不错的动画效果,叫做ShimmerLayout,是一个用于实现内部视图微光效果的布局。

如何实现

通过使用PorterDuff,我们可以制造出微光效果。PorterDuff是canvas绘制图像处理中的一种渲染模式,当我们需要绘制出区域覆盖的图形效果的时候,我们可以使用这种方式来绘制。

这里我们采用的是PorterDuff.MODE.SRC_IN,意思是在绘制的时候,显示上下图层相交的部分,且这部分显示上层图层。

1) 首先我们需要绘制出最上层的微光,这里通过LinearGradient线性渐变渲染器来绘制微光渐变效果,为了使得渐变自然,我们看到,代码里在前后两端都加入了透明色。

private Bitmap getSourceMaskBitmap() {

if (sourceMaskBitmap != null) {

return sourceMaskBitmap;

}

int width = maskRect.width();

int height = getHeight();

/* 通过LinearGradient在遮罩Bitmap上绘制渐变效果 */

final int edgeColor = reduceColorAlphaValueToZero(shimmerColor);

LinearGradient gradient = new LinearGradient(

-maskRect.left, 0,

width + maskRect.left, 0,

/* 透明色 - 微光颜色 - 微光颜色 - 透明色 */

new int[]{edgeColor, shimmerColor, shimmerColor, edgeColor},

new float[]{0.25F, 0.47F, 0.53F, 0.75F},

Shader.TileMode.CLAMP);

Paint paint = new Paint();

paint.setShader(gradient);

sourceMaskBitmap = createBitmap(width, height);

/* 对微光效果的bitmap做一些旋转效果 */

Canvas canvas = new Canvas(sourceMaskBitmap);

canvas.rotate(shimmerAngle, width / 2, height / 2);

canvas.drawRect(-maskRect.left, maskRect.top, width + maskRect.left, maskRect.bottom, paint);

return sourceMaskBitmap;

}

2)、然后,我们需要把微光效果的图层和视图本身的界面混合,使用PorterDuff.MODE.SRC_IN混合效果。首先如何绘制视图本身的界面,这里很简单,直接调用父类的绘制方法super.dispatchDraw(Canvas),紧接着再绘制微光效果的图层。

/* 获取微光效果Bitmap */

localMaskBitmap = getSourceMaskBitmap();

canvas.save();

/* 先绘制GroupView本身的界面 */

super.dispatchDraw(canvas);

/* 再绘制微光效果Bitmap */

canvas.drawBitmap(localMaskBitmap, 0, 0, maskPaint);

canvas.restore();

3) 最后我们发现,微光效果是从左向右移动过去的,如何实现?

通过不断位移localMaskBitmap的位置,这里通过控制偏移值maskOffsetX,实现了微光慢慢位移的效果。

/* 获取微光效果Bitmap */

localMaskBitmap = getSourceMaskBitmap();

canvas.save();

/* canvas 裁剪显示 */

canvas.clipRect(maskOffsetX, 0,

maskOffsetX + localMaskBitmap.getWidth(),

getHeight());

/* 先绘制GroupView本身的界面 */

super.dispatchDraw(canvas);

/* 再绘制微光效果Bitmap */

canvas.drawBitmap(localMaskBitmap, maskOffsetX, 0, maskPaint);

canvas.restore();

这个动画原理本身很简单,不过在内存方面,因为创建了多个bitmap,如果当前界面不包含大图,对内存的消耗还是很低的,适用于为比较轻量级的界面添加效果。

更多细节,看看作者的原文介绍以及GitHub

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

android 微票效果,Android ShimmerLayout实现微光效果解析相关推荐

  1. android 微票效果,再谈电影详情页-微票儿(每日一品v36)

    一.产品体验 1.  产品介绍 产品名称 微票儿  android v6.2.1 产品定位 基于移动社交的移动智慧票务平台,业务覆盖电影.演出.体育三大领域.其实定位和之前分析的2个类似. 2. 结构 ...

  2. 基于HTML5的移动Web应用——Bootstrap 样式案例:制作微票儿首页

    制作微票儿首页 成品效果 阶段1:制作微票儿首页响应导航 需求说明 网页导航在浏览器中居中显示 使用bootstrap响应式导航布局微票儿导航,在大于768px的微票儿导航 使用媒体查询和bootst ...

  3. android 第三方社区,从友盟微社区看Android第三方SDK架构实践

    原标题:从友盟微社区看Android第三方SDK架构实践 开发Android第三方SDK说难不难,但说简单也不简单,要开发一个给很多人使用的第三方SDK,如何在保证稳定性的同时,增强SDK的灵活性,让 ...

  4. android滑屏效果,Android使用ViewFlipper和GestrueDetector共同实现滑屏效果实例

    本文实例讲述了Android使用ViewFlipper和GestrueDetector共同实现滑屏效果.分享给大家供大家参考,具体如下: 关于GestureDetector的相关知识,前面已经介绍过了 ...

  5. android 图文弹幕重叠,Android双重SurfaceView实现弹幕效果

    本文实例为大家分享了Android双重SurfaceView实现弹幕效果的具体代码,供大家参考,具体内容如下 页面布局 首先是XML的layout布局,这里的总的父布局是一个FrameLayout用于 ...

  6. android 新闻功能列表,android listview实现新闻列表展示效果

    本文实例为大家分享了android listview列表展示效果的具体代码,供大家参考,具体内容如下 1.封装一些新闻数据 2.使用listview展示出来 3.设置条目点击事件,点击后跳转浏览器查看 ...

  7. Android订票系统订票功能实现(特效点击按钮实现票数自动加减1)

    要实现的效果是点击加按钮就购买分数自动加一,同时计算合计的总计 先共享一份colors.xml的数据,比较全面,可以根据需要添加 <?xml version="1.0" en ...

  8. Android实现仿360手机卫士悬浮窗效果

    大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我说几句不相干的废话. 不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多 ...

  9. android动态波浪效果图,【炫酷】Android 波浪式扭曲侧边栏,窗帘(Curtain Menu)效果...

    原标题:[炫酷]Android 波浪式扭曲侧边栏,窗帘(Curtain Menu)效果 来自:Android技术杂货铺(微信号:Tech-Android) 排版整编 作者:Android500 原文: ...

最新文章

  1. 「人工智能视觉」一直被消费者忽视的工业领域应用
  2. LinearPolar函数
  3. Linux 的文件权限与目录配置
  4. 三维立体图_原来三维立体图片是这样制作的,学会以后自己也可以设计
  5. MAC IOS ssh 连接下修改环境变量
  6. Pytorch中CNN入门思想及实现
  7. MaciOS之多线程(转)
  8. matlab自带图片下载,数字图像处理中Matlab的应用.pdf
  9. ZetCode Python 教程
  10. python sorted .sort()
  11. DSP与单片机的区别
  12. Python 进阶 —— 迭代器与生成器
  13. win2003服务器安全设置
  14. SpringMVC框架学习上篇
  15. Ae效果控件快速参考:3D 通道
  16. JS打印三角形,菱形,平行四边形.
  17. CentOS 6 Yum源更新
  18. 真是太有用了——整理央视《家有妙招》不看别后悔幺
  19. VVC学习之四:VTM中的数据结构——CodingUnit、PredictionUnit、TransformUnit
  20. 元素在锚点定位后始终在页面居中显示的方法

热门文章

  1. 按系列罗列Linux的发行版,并描述不同发行版之间的联系与区别。
  2. 华中科大微型计算机接口技术课后答案,2018考研华中科技大学811微机原理及接口技术考试大纲...
  3. 程永强 - Yongqiang Cheng
  4. 在Blog上加上图书秀
  5. 复制帧数据到内存空间
  6. 985学计算机的博士生好找工作吗,985博士去“专科”当老师,月薪6000挤破门槛,本科生该何去何从...
  7. STM32F103系列驱动MH-Z14A 二氧化碳(CO2)传感器详解,使用串口输出读取(后附免费免积分程序下载链接)
  8. PSP播放ATRAC3 Plus格式的方法
  9. qemu对acpi的模拟
  10. 乐之邦07mp或08mp固件下载及说明书