菜单 · 文档

最后更新:2026年8月12日

文档

哪些属性可以动画、插值类型是什么,以及 easing 怎么选。

属性与关键帧

动画属性是类型化的:透明度、长度、颜色各走各的插值。类型不对、单位对不上,会在构建阶段报错,而不是每帧偷偷转字符串。

内建属性

值类型属性
f32OPACITYSCALE_X/YBRIGHTNESSSATURATIONGRAYSCALEINVERTSEPIACONTRASTASPECT_RATIO
LengthTRANSLATE_X/YWIDTH/HEIGHTPOSITION_X/YBORDER_WIDTH/RADIUSBLURFONT_SIZELINE_HEIGHTLETTER_SPACING
AngleROTATION
LinearRgbaBACKGROUND_COLORFOREGROUND_COLORFONT_COLORBORDER_COLOR

Length 保留单位,LinearRgba 在线性颜色空间插值,避免普通 sRGB 通道插值产生不自然的中间色。

Tween

let fade = Animation::new(selector)
    .tween(
        &OPACITY,
        0.0,
        1.0,
        TimeSpan::from_millis(320),
    )
    .configure_last(
        Easing::Builtin(BuiltinEase::Cubic(EaseDirection::Out)),
        Composition::Replace,
        Modifier::Identity,
        TimeSpan::ZERO,
        0,
    );

configure_last 设置最后一个 track 的 easing、composition、modifier、delay 和 priority。

Keyframes

let pulse = Animation::new(selector).keyframes(
    &SCALE_X,
    [
        PropertyKeyframe::new(0.0, 1.0),
        PropertyKeyframe::new(0.6, 1.15)
            .easing(Easing::Builtin(BuiltinEase::Sine(EaseDirection::Out))),
        PropertyKeyframe::new(1.0, 1.0),
    ],
    TimeSpan::from_millis(600),
)?;

offset 在归一化范围内严格递增。每个 segment 可以有独立 easing。

Easing

支持 linear、内建 ease、irregular ease、spring 与合法 custom easing。Spring 描述物理响应;duration-based easing 描述固定时间映射。需要精确 terminal 时优先有限 duration,避免以视觉阈值猜测结束。

Composition

模式语义
Replace按 timeline position、priority、insertion order 选择 winner
Add在 baseline 上叠加 active contribution
Accumulate把已完成 iteration 的 terminal delta 累积到下一轮

对同一 target/property 混合多个动画前明确 composition。依赖隐式覆盖顺序会让插入新 track 后产生不可见的优先级变化。