Android实现流光和光影移动效果代码
作者:红尘、困住我年少 时间:2023-09-24 23:57:55
概述:
开发过程中,看到有些界面用到一道光线在屏幕中掠过的效果,觉得挺炫的。所以查找相关资料自己实现了一遍。
先上个预览图:
实现思路:
简单来说就是在一个view中绘制好一道光影,并不断改变光影在view中的位置。
1.首先我们先了解一下光影怎么绘制
在了解如何绘制之前,我们先看一下LinearGradient的构造方法
/**
* Create a shader that draws a linear gradient along a line.
*
* @param x0 The x-coordinate for the start of the gradient line
* @param y0 The y-coordinate for the start of the gradient line
* @param x1 The x-coordinate for the end of the gradient line
* @param y1 The y-coordinate for the end of the gradient line
* @param colors The sRGB colors to be distributed along the gradient line
* @param positions May be null. The relative positions [0..1] of
* each corresponding color in the colors array. If this is null,
* the the colors are distributed evenly along the gradient line.
* @param tile The Shader tiling mode
*
*
* 翻译过来:
* x0,y0为渐变起点,x1,y1为渐变的终点
*
* colors数组为两点间的渐变颜色值,positions数组取值范围是0~1
* 传入的colors[]长度和positions[]长度必须相等,一一对应关系,否则报错
* position传入null则代表colors均衡分布
*
* tile有三种模式
* Shader.TileMode.CLAMP: 边缘拉伸模式,它会拉伸边缘的一个像素来填充其他区域
* Shader.TileMode.MIRROR: 镜像模式,通过镜像变化来填充其他区域
* Shader.TileMode.REPEAT:重复模式,通过复制来填充其他区域
*/
LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int[] colors,
@Nullable float[] positions, @NonNull TileMode tile)
colors[]和positions[]的说明结合下图,这样理解起来应该就比较明朗了
回到正题,如何绘制光影。我们看到的那道光可以参照下图:
根据分析得到我们的着色器是线性着色器(其他着色器请查询相关api):
LinearGradient(a的x坐标, a的y坐标, c的x坐标, c的y坐标, new int[]{Color.parseColor("#00FFFFFF"), Color.parseColor("#FFFFFFFF"), Color.parseColor("#00FFFFFF")}, new float[]{0f, 0.5f, 1f}, Shader.TileMode.CLAMP)
2.给画笔上色。设置着色器mPaint.setShader(mLinearGradient)
3.给定一个数值范围利用数值生成器ValueAnimator产生数值,监听数值变化。每次回调都将该数值传入光影的起点和终点并进行绘制
代码如下:
/**
* author: caoyb
* created on: 2021/12/20 15:13
* description:
*/
public class ConfigLoadingView extends View {
private Paint mPaint;
private Path mPath;
private LinearGradient mLinearGradient;
private ValueAnimator mValueAnimator;
public ConfigLoadingView(Context context) {
this(context, null);
}
public ConfigLoadingView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ConfigLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint();
mPath = new Path();
}
private void initPointAndAnimator(int w, int h) {
Point point1 = new Point(0, 0);
Point point2 = new Point(w, 0);
Point point3 = new Point(w, h);
Point point4 = new Point(0, h);
mPath.moveTo(point1.x, point1.y);
mPath.lineTo(point2.x, point2.y);
mPath.lineTo(point3.x, point3.y);
mPath.lineTo(point4.x, point4.y);
mPath.close();
// 斜率k
float k = 1f * h / w;
// 偏移
float offset = 1f * w / 2;
// 0f - offset * 2 为数值左边界(屏幕外左侧), w + offset * 2为数值右边界(屏幕外右侧)
// 目的是使光影走完一遍,加一些时间缓冲,不至于每次光影移动的间隔都那么急促
mValueAnimator = ValueAnimator.ofFloat(0f - offset * 2, w + offset * 2);
mValueAnimator.setRepeatCount(-1);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.setDuration(1500);
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mLinearGradient = new LinearGradient(value, k * value, value + offset, k * (value + offset),
new int[]{Color.parseColor("#00FFFFFF"), Color.parseColor("#1AFFFFFF"), Color.parseColor("#00FFFFFF")}, null, Shader.TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
invalidate();
}
});
mValueAnimator.start();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
initPointAndAnimator(widthSize, heightSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
mValueAnimator.cancel();
}
}
注意点:
LinearGradient里参数之一:
color[]参数只能是16进制的RGB数值,不能传R.color.xxx。R.color.xxx虽然是int型,但拿到的是资源ID,并不是16进制RGB
来源:https://blog.csdn.net/weixin_44270195/article/details/122069448
标签:Android,流光,光影
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Java中List遍历删除元素remove()的方法
2022-07-12 12:27:10
![](https://img.aspxhome.com/file/2023/1/132121_0s.png)
Logback动态修改日志级别的方法
2023-05-30 21:47:01
Servlet3.0实现文件上传的方法
2023-08-15 00:52:44
![](https://img.aspxhome.com/file/2023/3/58143_0s.png)
Java文件读写IO/NIO及性能比较详细代码及总结
2021-11-28 12:56:30
Java项目导入IDEA的流程配置以及常见问题解决方法
2021-11-21 10:02:24
![](https://img.aspxhome.com/file/2023/1/76521_0s.jpg)
android fm单体声和立体声的切换示例代码
2023-04-19 11:06:56
SpringBoot 导出数据生成excel文件返回方式
2023-09-01 11:29:27
![](https://img.aspxhome.com/file/2023/0/92670_0s.jpg)
Android Activity生命周期调用的理解
2023-05-13 14:15:42
![](https://img.aspxhome.com/file/2023/6/137526_0s.jpg)
Android ListView自动生成列表条目的实例
2023-04-21 17:08:09
spring boot 集成 shiro 自定义密码验证 自定义freemarker标签根据权限渲染不同页面(推荐
2023-07-28 17:39:16
c#获取本机在局域网ip地址的二种方法
2023-01-20 00:19:47
springboot热部署知识点总结
2021-08-23 12:05:43
![](https://img.aspxhome.com/file/2023/7/104017_0s.png)
SpringCache框架加载/拦截原理详解
2023-04-11 10:31:46
浅谈JAVA实现选择排序,插入排序,冒泡排序,以及两个有序数组的合并
2023-11-20 09:26:40
![](https://img.aspxhome.com/file/2023/7/97827_0s.png)
Java实现任务超时处理方法
2023-01-09 14:46:45
![](https://img.aspxhome.com/file/2023/3/66983_0s.png)
Android 自定义view实现进度条加载效果实例代码
2022-12-21 05:33:48
![](https://img.aspxhome.com/file/2023/8/137978_0s.gif)
Springboot 整合RabbitMq(用心看完这一篇就够了)
2023-11-23 05:27:17
![](https://img.aspxhome.com/file/2023/3/59753_0s.jpg)
java通过ip获取客户端Mac地址的小例子
2021-12-22 06:37:07
java打印菱形及直角和等腰三角形的方法
2023-01-08 20:46:55
![](https://img.aspxhome.com/file/2023/6/88756_0s.png)
新手小白看过来学JAVA必过IO流File字节流字符流
2022-09-22 07:42:02
![](https://img.aspxhome.com/file/2023/8/69908_0s.jpg)