7. Tweak timing in the editor

Some things are easier to adjust by eye than by number. oxframe lets you do that without touching code.

Loading live preview…

Source of learn_07_editor — edit in the playground

//! Lesson 7 — Timing you can change in the editor.
//!
//! Some values are easier to tune by eye than in code. `wait_until("name")`
//! creates a marker on the timeline, `tune!("name", default)` a slider in the
//! inspector and `ease!("name")` a curve in the curve editor. Changing them
//! does not recompile anything: the values are stored in `<scene>.meta.json`.

use oxframe::prelude::*;

#[oxframe::scene]
pub async fn editor(view: View) {
    let size = tune!("size", 160.0);
    let dot = view.add(Circle::new().size(size).x(-400.0).fill(color!("#68abdf")));

    // Drag the "go" marker on the timeline to start the move later or earlier.
    wait_until("go").await;
    dot.x().to(400.0, 1.0).ease(ease!("move")).await;

    // Drag the "fade" marker, too.
    wait_until("fade").await;
    dot.opacity().to(0.0, 0.5).await;
}

// Try (in the editor): drag the markers, move the `size` slider, click the
// `move` ease and bend the curve.

pub fn project() -> Project {
    Project::new("editor").scene(editor())
}

When an animation should start "on the beat" or a size "looks right", guessing numbers and recompiling is slow. These three helpers move the decision into the editor:

`wait_until("go").await`	A marker on the timeline. Drag it, and everything after it moves.
`tune!("size", 160.0)`	A number with a slider in the inspector; 160 is the starting value.
`.ease(ease!("move"))`	An easing curve you shape in the curve editor.

Where the values live

The first time your scene runs, oxframe writes these names and their starting values into a file next to your code, src/<scene>.meta.json. From then on the file wins: the editor changes the file, the code only provides defaults. Commit the file — it is part of your animation.

{
  "eases": { "move": [0.65, 0.0, 0.35, 1.0] },
  "markers": { "fade": 1.0, "go": 0.0 },
  "tunables": { "size": 160.0 },
  "version": 1
}