SusParallaxStack

由指针驱动的分层堆叠：bg → pattern → subject → ui（提示）→ chrome。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
PatternAmp	Prop<float>	8f
SubjectAmp	Prop<float>	14f
UiAmp	Prop<float>	22f
Enabled	Prop<bool>	true
Easing	Prop<float>	0.08f
MinFps	Prop<float>	24f
PauseOnFocusLoss	Prop<bool>	false

插槽

没有插槽。

事件

名称	字段	载荷
ActiveChanged	OnActiveChanged	bool

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-parallax-stack
• sus-parallax-stack__bg
• sus-parallax-stack__chrome
• sus-parallax-stack__layer
• sus-parallax-stack__layers
• sus-parallax-stack__pattern
• sus-parallax-stack__subject
• sus-parallax-stack__tips
• sus-parallax-stack__ui
• sus-parallax-stack--off

用法

var stack = new SusParallaxStack();
stack.EnsureLayers();
stack.Subject.Add(characterArt);
stack.Chrome.Add(nav);
stack.SetAmps(patternAmp: 8f, subjectAmp: 14f, uiAmp: 4f);

Prop / API	作用
PatternAmp / SubjectAmp / UiAmp	视差幅度（px）
Enabled	总开关。默认 true
PauseOnFocusLoss	应用窗口失去焦点时停驻。默认 false
SetLayers(layers)	替换图片层（见下文）
TrackPointer(source)	同时跟随另一个元素上方的指针
IsActive / OnActiveChanged	堆栈当前是否在运动，以及该状态的切换边沿

图片层

SetLayers 接收一个 SusParallaxLayer 列表（图片、深度、可选 USS 类）。这些层位于 Bg 与 Pattern 之间的 sus-parallax-stack__layers 宿主中；每一层都是绝对定位、 对指针透明的 sus-parallax-stack__layer 元素，其位移为 Depth 乘以指针偏移。Depth 以堆栈边缘处的像素计：0 表示静止，越大越近，负值与指针反向移动。尺寸、位置和出血都写在 USS 中。 传入 null 或空列表会移除该宿主，堆栈恢复为五个内置层。

stack.SetLayers(new List<SusParallaxLayer>
{
    new SusParallaxLayer(Background.FromTexture2D(sky), depth: 4f),
    new SusParallaxLayer(Background.FromTexture2D(ridge), depth: 12f, className: "my-backdrop__ridge"),
});

// A backdrop sits under the screen content and gets no pointer events of its own:
// follow the pointer over the screen root instead.
stack.TrackPointer(screenRoot);
stack.PauseOnFocusLoss.Value = true;

TrackPointer 将指针位置映射到堆栈自身的矩形中；指针离开源元素时，各层平滑回到零位。 这些回调仅在堆栈挂在面板上时有效。传入 null 停止跟随，新的源会替换旧的源。

开启 PauseOnFocusLoss 后，窗口失去焦点会让堆栈停驻：各层停在零位，ticker 停止， 根元素获得 sus-parallax-stack--unfocused。焦点恢复后，下一次指针移动时继续运动。

Reduce motion

SusMotion.Reduce 开启时，堆栈以同样方式停驻：各层停在零位，没有 ticker，根元素带有 sus-parallax-stack--reduced 类。关闭该标志后，下一次指针移动时继续运动。

备注

• 构建后调用 EnsureLayers() 来解析各层宿主（Bg、Pattern、Subject、Ui、TipHost、Chrome）。
• 视觉外观（art、glass）应放在使用方的 USS 中。

另见 布局技巧。