mirror of
https://github.com/zed-industries/zed.git
synced 2026-08-25 00:45:27 +00:00
8b1497dbd2
# Objective
I wanted spring animations in GPUI for an application built atop of
GPUI.
## Solution
I texted @mikayla-maki about wanting spring animations; we collaborated
in Delta; this change is the co-authored result. We built atop of GPUI's
existing APIs, but this *is* new API surface. The verbiage is borrowed
from SwiftUI's approach.
First, what _are_ spring animations? If you're unfamiliar, they're the
bouncy, physical animations that you'd often see in mobile applications.
As Claude put it to me, "keyframe animation is a recording; a spring is
a simulation". There's a few consequences:
1. The animation API needs to support interrupts/cancelation, or the
application using spring animations will feel broken. You need to cancel
the momentum in a physically realistic way!
2. The API is more complex! GPUI's existing animations are, roughly,
`Fn(progress: f32) -> eased_progress: f32`, but a spring animation is
closer to `Fn(state: SpringState, target: f32, delta_time: f32) ->
SpringState`. Concretely, GPUI landed on the following:
```
pub fn step(
&self,
state: SpringState,
target: f32,
delta_time: f32,
) -> SpringState;
```
...where `&self` is:
```
#[derive(Clone, Copy, Debug, PartialEq)]
pub struct SpringConfig {
/// The spring stiffness, conventionally written as $k$.
pub stiffness: f32,
/// The viscous damping coefficient, conventionally written as $c$.
pub damping: f32,
/// The moving mass, conventionally written as $m$.
pub mass: f32,
}
```
Conceptually, at each frame, GPUI does `let state = spring.step(state,
target, delta_time);`, or as an other LLM summarized:
```
// Ordinary animation:
progress: f32 -> phase: f32
// GPUI spring:
(state: { position, velocity }, target, dt)
-> new { position, velocity }
-> typed presentation value
```
---
Release Notes:
- gpui: Added spring animations
|
||
|---|---|---|
| .. | ||
| image | ||
| svg | ||
| view_example | ||
| a11y.rs | ||
| active_state_bug.rs | ||
| anchor.rs | ||
| animation.rs | ||
| data_table.rs | ||
| drag_drop.rs | ||
| focus_visible.rs | ||
| gif_viewer.rs | ||
| gradient.rs | ||
| grid_layout.rs | ||
| hello_world.rs | ||
| image_gallery.rs | ||
| image_loading.rs | ||
| input.rs | ||
| layer_shell.rs | ||
| list_example.rs | ||
| mouse_pressure.rs | ||
| move_entity_between_windows.rs | ||
| on_window_close_quit.rs | ||
| opacity.rs | ||
| ownership_post.rs | ||
| painting.rs | ||
| paths_bench.rs | ||
| pattern.rs | ||
| popover.rs | ||
| README.md | ||
| scrollable.rs | ||
| set_menus.rs | ||
| shadow.rs | ||
| system_notifications.rs | ||
| tab_stop.rs | ||
| testing.rs | ||
| text.rs | ||
| text_layout.rs | ||
| text_wrapper.rs | ||
| tree.rs | ||
| uniform_list.rs | ||
| window.rs | ||
| window_movable.rs | ||
| window_positioning.rs | ||
| window_shadow.rs | ||
GPUI Examples
Examples can be run from the Zed repository root:
cargo run -p gpui --example hello_world
Where to start
hello_worldshows the basic shape of a GPUI application: create anApplication, open a window, create a root view, and render adiv.inputdemonstrates text input, focus, selections, clipboard actions, and keyboard bindings.uniform_listshows how to render a simple virtualized list.testingdemonstrates#[gpui::test],TestAppContext, actions, focus, and window-based tests.
Layout and styling
grid_layoutdemonstrates CSS-grid-style layout.opacitydemonstrates opacity styling.patternshows patterned backgrounds.shadowdemonstrates box shadows.textshows styled text rendering.text_layoutdemonstrates text alignment, decoration, weights, and wrapping.text_wrappershows wrapping text content.
Interaction
anchordemonstrates anchored positioning.data_tablecombines virtualized list rendering with table-style rows and a custom scrollbar.drag_dropshows draggable elements and drop targets.focus_visibledemonstrates keyboard-visible focus styling.mouse_pressuredemonstrates pressure-sensitive pointer input where supported.popovershows floating layers withdeferredandanchored.scrollabledemonstrates scrollable content.tab_stopshows keyboard tab navigation.
Images, drawing, and animation
animationdemonstrates GPUI animations and animated SVG transforms.gif_viewershows GIF rendering.gradientdemonstrates linear gradients and color spaces.imageshows local and remote image loading, image sizing, and asset setup.image_gallerydemonstrates image caching and loading remote images.image_loadingshows image loading states and asset loading.paintingdemonstrates custom drawing with paths and canvas.svgshows SVG rendering.
Windows and application behavior
move_entity_between_windowsshows moving an entity between windows.on_window_close_quitdemonstrates quitting when a window closes.set_menusshows application menu setup.system_notificationsdemonstrates posting, replacing, dismissing, and responding to operating-system notifications.windowdemonstrates creating normal, dialog, popup, and floating windows.window_positioningdemonstrates window bounds and placement.window_shadowdemonstrates window shadow styling.
Specialized examples
These examples are useful when working on GPUI itself, but they may not be the best starting point for new applications:
active_state_bugis a focused active-state reproduction.layer_shelldemonstrates Linux layer-shell windows.list_exampledemonstrates bottom-aligned list state and scrollbar behavior.ownership_postsupports the ownership and data-flow documentation.paths_benchis a path rendering benchmark.treerenders a deep tree of nested elements.