gpui: Add opacity to support transparency of the entire element (#17132)
Release Notes:
- N/A
---
Add this for let GPUI element to support fade in-out animation.
## Platform test
- [x] macOS
- [x] blade `cargo run -p gpui --example opacity --features macos-blade`
## Usage
```rs
div()
.opacity(0.5)
.bg(gpui::black())
.text_color(gpui::black())
.child("Hello world")
```
This will apply the `opacity` it self and all children to use `opacity`
value to render colors.
## Example
```
cargo run -p gpui --example opacity
cargo run -p gpui --example opacity --features macos-blade
```
<img width="612" alt="image"
src="https://github.com/user-attachments/assets/f1da87ed-31f5-4b55-a023-39e8ee1ba349">
This commit is contained in:
@@ -548,7 +548,9 @@ fn fs_mono_sprite(input: MonoSpriteVarying) -> @location(0) vec4<f32> {
|
||||
|
||||
struct PolychromeSprite {
|
||||
order: u32,
|
||||
pad: u32,
|
||||
grayscale: u32,
|
||||
opacity: f32,
|
||||
bounds: Bounds,
|
||||
content_mask: Bounds,
|
||||
corner_radii: Corners,
|
||||
@@ -592,7 +594,7 @@ fn fs_poly_sprite(input: PolySpriteVarying) -> @location(0) vec4<f32> {
|
||||
let grayscale = dot(color.rgb, GRAYSCALE_FACTORS);
|
||||
color = vec4<f32>(vec3<f32>(grayscale), sample.a);
|
||||
}
|
||||
return blend_color(color, saturate(0.5 - distance));
|
||||
return blend_color(color, sprite.opacity * saturate(0.5 - distance));
|
||||
}
|
||||
|
||||
// --- surfaces --- //
|
||||
|
||||
@@ -385,7 +385,7 @@ fragment float4 polychrome_sprite_fragment(
|
||||
color.g = grayscale;
|
||||
color.b = grayscale;
|
||||
}
|
||||
color.a *= saturate(0.5 - distance);
|
||||
color.a *= sprite.opacity * saturate(0.5 - distance);
|
||||
return color;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user