Makepad 图形和特效
Makepad 中的 GPU 加速着色器、SDF 绘图和动画。
快速导航
| 类别 | 描述 |
|---|---|
| 着色器基础 | 结构、变量、数学函数 |
| SDF 绘图 | 圆形、矩形、胶囊、路径绘制 |
| 动画 | 动画器、缓动、关键帧、循环 |
| 视觉效果 | 悬停、渐变、阴影、发光 |
着色器结构
live_design! {
MyShader = {{MyShader}} {
fn pixel(self) -> vec4 {
let sdf = Sdf2d::viewport(self.pos * self.rect_size);
// 绘制形状
sdf.circle(50.0, 50.0, 20.0);
sdf.fill(#FF0000);
return sdf.result;
}
}
}
SDF 操作
// 基本形状
sdf.circle(x, y, radius)
sdf.box(x, y, width, height, border_radius)
sdf.capsule(x1, y1, x2, y2, width)
// 填充和描边
sdf.fill(color) // 填充形状
sdf.stroke(color, width) // 描边轮廓
sdf.fill_keep(color) // 填充，保持形状用于更多操作
动画系统
live_design! {
<Button> {
animator: {
hover = {
default: off
off = { from: {all: Forward {duration: 0.15}} }
on = { from: {all: Snap} }
}
}
draw_bg: {
color: #2196F3
color_hover: #42A5F5
}
}
}
缓动函数
| 缓动 | 使用场景 |
|---|---|
OutQuad | 进入动画 |
InQuad | 退出动画 |
InOutQuad | 平滑过渡 |
ExpDecay {d1: 0.8, d2: 0.97} | 物理运动 |
动画示例
live_design! {
LoadingSpinner = {{LoadingSpinner}} {
animator: {
spin = {
default: on
on = {
from: {all: Loop {duration: 1.0}}
apply: { draw_bg: { rotation: 360.0 } }
}
}
}
draw_bg: {
fn pixel(self) -> vec4 {
// 旋转弧着色器
let sdf = Sdf2d::viewport(self.pos * self.rect_size);
let angle = self.rotation * PI / 180.0;
// 绘制旋转弧
return sdf.result;
}
}
}
}
渐变效果
draw_bg: {
fn pixel(self) -> vec4 {
// 线性渐变
let grad = self.pos.y;
let color = mix(#FF0000, #0000FF, grad);
return vec4(color, 1.0);
}
}
资源
评论
还没有评论。成为第一个评论的人！
