import android
.animation
.Animator;
import android
.animation
.AnimatorListenerAdapter;
import android
.animation
.ValueAnimator;
import android
.content
.Context;
import android
.graphics.Camera;
import android
.graphics.Canvas;
import android
.graphics.Color;
import android
.graphics.LinearGradient;
import android
.graphics.Matrix;
import android
.graphics.Pa
int;
import android
.graphics.Path;
import android
.graphics.Po
intF;
import android
.graphics.Shader;
import android
.util
.AttributeSet;
import android
.view
.View;
import android
.view
.animation
.Linear
Interpolator;
import androidx
.annotation
.Nullable;
import java
.util
.ArrayList;
import java
.util
.List;
/**
* @Description: 网格线
* @Author: alex
* @CreateDate: 2025/7/9 16:03
*/
public class LyricGridView extends View {
private Pa
int gridPa
int;
private Pa
int controlPo
intPa
int;
private Path gridPath;
private
int gridSize = 100; // 网格尺寸
(行数和列数
)
private LinearGradient gradient;
private List<Po
intF> controlPo
ints = new ArrayList<>
();
private List<Boolean> randomizedPo
ints = new ArrayList<>
();
private float rotationAngle = 15f; // 网格旋转角度
(度
)
private float floatAmplitude = 20f; // 浮动幅度
private float floatPhase = 0f; // 浮动相位
private ValueAnimator floatAnimator; // 浮动动画控制器
Camera camera = new Camera
();
Matrix canvasMatrix = new Matrix
();
public LyricGridView
(Context context
) {
super
(context
);
init
();
}
public LyricGridView
(Context context, @Nullable AttributeSet attrs
) {
super
(context, attrs
);
init
();
}
private void init
() {
// 网格线画笔设置
gridPa
int = new Pa
int(Pa
int.ANTI_ALIAS_FLAG
);
gridPa
int.setStyle
(Pa
int.Style
.STROKE
);
gridPa
int.setStrokeWidth
(1f
);
gridPa
int.setColor
(Color
.parseColor
("#80FFFFFF"
)); // 半透明白色
// 控制点画笔设置
controlPo
intPa
int = new Pa
int(Pa
int.ANTI_ALIAS_FLAG
);
controlPo
intPa
int.setStyle
(Pa
int.Style
.FILL
);
controlPo
intPa
int.setColor
(Color
.parseColor
("#cccccc"
));
gridPath = new Path
();
// 初始化浮动动画
setupFloatAnimation
();
}
private void setupFloatAnimation
() {
floatAnimator = ValueAnimator
.ofFloat
(0, 2 *
(float
) Math
.PI
);
floatAnimator
.setDuration
(5000
); // 3秒完成一个完整周期
floatAnimator
.setRepeatCount
(ValueAnimator
.INFINITE
);
floatAnimator
.set
Interpolator
(new Linear
Interpolator
());
floatAnimator
.addUpdateListener
(animation -> {
floatPhase =
(float
) animation
.getAnimatedValue
();
invalidate
(); // 触发重绘
}
);
floatAnimator
.start
();
}
@Override
protected void onSizeChanged
(int w,
int h,
int oldw,
int oldh
) {
super
.onSizeChanged
(w, h, oldw, oldh
);
// 设置渐变的方向是从右到左
gradient = new LinearGradient
(
w, 0, // 起始点（右侧）
0, 0, // 结束点（左侧）
Color
.parseColor
("#cccccc"
), Color
.parseColor
("#00000000"
), // 黑色 -> 透明
Shader
.TileMode
.CLAMP
);
// 更新画笔的着色器
gridPa
int.setShader
(gradient
);
generateControlPo
ints
(w, h
);
b
uildBezierGrid
(w, h
);
}
private void generateControlPo
ints
(int width,
int height
) {
controlPo
ints
.clear
();
randomizedPo
ints
.clear
(); // 清空随机标记
float cellWidth = width /
(float
) gridSize;
float cellHeight = height /
(float
) gridSize;
// 生成网格点并添加随机偏移作为贝塞尔控制点
for
(int row = 0; row <= gridSize; row++
) {
for
(int col = 0; col <= gridSize; col++
) {
float x = col * cellWidth;
float y = row * cellWidth;
// 添加随机偏移（实际应用中可替换为自定义控制点）
float offsetX =
(float
) (Math
.random
() * 10 - 5
);
float offsetY =
(float
) (Math
.random
() * 10 - 5
);
boolean isRandomized = false;
// 边界约束
if
(col == 0 || col == gridSize
) offsetX = 0;
if
(row == 0 || row == gridSize
) offsetY = 0;
// 只有50%的点会被随机偏移
if
(Math
.random
() > 0
.95
) {
isRandomized = true;
}
offsetY = 0;
offsetX = 0;
controlPo
ints
.add
(new Po
intF
(x + offsetX, y + offsetY
));
randomizedPo
ints
.add
(isRandomized
); // 记录随机状态
}
}
}
private void b
uildBezierGrid
(int width,
int height
) {
gridPath
.reset
();
// 绘制横向曲线
for
(int row = 0; row <= gridSize; row++
) {
for
(int col = 0; col < gridSize; col++
) {
int index = row *
(gridSize + 1
) + col;
Po
intF start = controlPo
ints
.get
(index
);
Po
intF end = controlPo
ints
.get
(index + 1
);
if
(col == 0
) {
gridPath
.moveTo
(start
.x, start
.y
);
}
gridPath
.lineTo
(end
.x, end
.y
);
}
}
// 绘制纵向曲线
for
(int col = 0; col <= gridSize; col++
) {
for
(int row = 0; row < gridSize; row++
) {
int index = row *
(gridSize + 1
) + col;
Po
intF start = controlPo
ints
.get
(index
);
Po
intF end = controlPo
ints
.get
(index + gridSize + 1
);
if
(row == 0
) {
gridPath
.moveTo
(start
.x, start
.y
);
}
gridPath
.lineTo
(end
.x, end
.y
);
}
}
}
@Override
protected void onDraw
(Canvas canvas
) {
super
.onDraw
(canvas
);
// 保存当前画布状态
canvas
.save
();
// 计算浮动偏移量
(使用正弦
函数创造波浪效果
)
float floatOffset = floatAmplitude *
(float
) Math
.sin
(floatPhase * 0
.5f
);
// 计算中心点坐标
float centerX = getWidth
() / 2f;
float centerY = getHeight
() / 2f;
camera
.save
();
camera
.rotateX
(40f
);
camera
.getMatrix
(canvasMatrix
);
camera
.restore
();
// 应用3D旋转
(保持水平位置不变
)
canvasMatrix
.pre
Translate(-centerX, 0
);
canvasMatrix
.post
Translate(centerX, 0
);
// 应用3D变换到Canvas
canvas
.concat
(canvasMatrix
);
// 应用旋转变换
(以中心点为轴心
)
// canvas
.rotate
(rotationAngle, centerX, centerY
);
canvas
.translate((getWidth
() /
(float
) gridSize
) * 10, -
(getWidth
() /
(float
) gridSize
) * 8
);
canvas
.translate(floatOffset, 0
); // 添加垂直浮动
// 绘制贝塞尔曲线网格
gridPa
int.setAlpha
(150
); // 增加透明度
canvas
.drawPath
(gridPath, gridPa
int);
// // 绘制控制点（可选）
// for
(Po
intF po
int : controlPo
ints
) {
// canvas
.drawCircle
(po
int.x, po
int.y, 4, controlPo
intPa
int);
// }
// 获取屏幕宽度的一半
float screenHalf = getWidth
() / 3f;
// 只绘制被随机偏移的控制点
for
(int i = 0; i < controlPo
ints
.size
(); i++
) {
Po
intF po
int = controlPo
ints
.get
(i
);
if
(randomizedPo
ints
.get
(i
) && po
int.x > screenHalf
) { // 只绘制被随机偏移的点
canvas
.drawCircle
(po
int.x, po
int.y, 1, controlPo
intPa
int);
}
}
// 恢复画布状态
canvas
.restore
();
}
// 设置网格密度
public void setGridSize
(int size
) {
this
.gridSize = Math
.max
(2, size
);
requestLayout
();
}
@Override
protected void onDetachedFromWindow
() {
super
.onDetachedFromWindow
();
if
(floatAnimator != null
) {
floatAnimator
.cancel
();
}
}
public void setDrawingEnabled
(boolean enabled
) {
if
(enabled
) {
setVisibility
(VISIBLE
);
if
(floatAnimator != null && !floatAnimator
.isRunning
()) {
setupFloatAnimation
();
}
} else {
setVisibility
(GONE
);
if
(floatAnimator != null
) {
floatAnimator
.cancel
();
}
}
}
} 3d旋转后网格变形的原因
本文介绍了translate函数的作用原理，即通过改变绘图环境的坐标原点来实现图形的平移效果。利用这一特性，开发者可以更灵活地控制图像的绘制位置，并简化复杂的UI布局逻辑。
扫一扫
7801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
