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:
Jason Lee 2024-09-04 18:53:45 +08:00 committed by GitHub
parent 072513f59f
commit a092ff0c4f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 297 additions and 36 deletions

View file

@ -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 --- //