RepeatedLayout

トリミングウィンドウ内のパターンを定期的に複製します。スケールやコンパスを連続的に移動する場合に適しています。 period は繰り返し間隔を設定し、value と anchor は現在の値がどこに配置されるかを決定します。

例

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

使い方

children が一枚の模様、period が周期です。value を anchor に合わせるため、value 増加で模様は逆に移動し、offset が追加移動になります。both は二方向、{x,y} で個別指定できます。表示枠で常にクリップします。
配置領域を確保した後に x/y と transform を適用します。子を右に動かしても兄弟は押されません。間隔には spacing や Spacer、完成した描画の回転・拡大には transform を使います。

プロパティ

children?ViewContent

子の描画コンテンツ。

axis?"horizontal" | "vertical" | "both"

horizontal、vertical、both 方向に反復。both は格子状。

例"horizontal"

period?RepeatAxisValue

コピー間隔（ポイント）。x/y で各軸を個別指定。

例360

value?RepeatAxisValue

anchor に合わせる内容座標。値が増えると逆方向に動きます。速度ではありません。

例$data.current.heading?.direction ?? 0

anchor?RepeatAxisValue

表示領域の割合。0 は始端、0.5 は中央、1 は終端。

例0.5

offset?RepeatAxisValue

value を anchor に合わせた後の追加移動量（ポイント）。

例0

重ねた子 View の位置。四隅・四辺・中央の 9 種類。

例"topLeading"

共通プロパティ

width?number | "auto" | "fill"

幅。ポイント指定、自動サイズ、親領域への拡張に対応します。

例100

height?number | "auto" | "fill"

高さ。ポイント指定、自動サイズ、親領域への拡張に対応します。

例80

padding?number

コンテンツの内側余白（ポイント）。

例0

x?number

見た目の移動量（ポイント）。x は右、y は下。レイアウトの占有領域は変わりません。

例0

y?number

見た目の移動量（ポイント）。x は右、y は下。レイアウトの占有領域は変わりません。

例0

transform?ViewTransform

レイアウトを変えず全体を変形。移動はポイント、回転・傾きは度、倍率 1 は等倍、基点は 0–1。

例{rotation: 0}

background?Paint

背景の色またはグラデーション。clear は透明。

例"clear"

opacity?number

View 全体の不透明度。0 は透明、1 は不透明。

例1

cornerRadius?number

角丸の半径（ポイント）。

例0

clip?"rectangle" | "ellipse"

切り抜き形状は rectangle または ellipse。Material は false で無効化も可能。

例"rectangle"

mask?View | null

アルファマスク用の View。レイアウトに影響せず中央に配置されます。null でマスクを無効にします。

例<Circle width="fill" height="fill" background="white"/>

zIndex?number

兄弟 View の重なり順。大きい値ほど手前。

例0

blur?number

ぼかし半径（ポイント）。0 で無効。

例4

innerShadow?DrawingEffect

効果の色、不透明度、ぼかし半径、x/y オフセット。距離はポイント。

例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

効果の色、不透明度、ぼかし半径、x/y オフセット。距離はポイント。

例{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

外側の影の色。

例HDR("black")

shadowOpacity?number

外側の影の不透明度 0–1。0 で非表示。

例0

shadowRadius?number

外側の影のぼかし半径（ポイント）。

例4

shadowX?number

影の移動量（ポイント）。x は右、y は下。

例0

shadowY?number

影の移動量（ポイント）。x は右、y は下。

例2

animations?Animation[]

プロパティ変更のアニメーション。duration/delay は秒、from/to は端点、repeat/autoreverse は反復、wrap は周期。

例[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

兄弟要素間で安定した識別子。

組み合わせ例

function main() {
  return (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

アニメーション

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

省略時の動作

表は実装で確認した省略時の動作です。プロパティ例は既定値ではありません。固定結果には明示指定し、環境に依存する寸法やテーマ色を定数と思わないでください。

プロパティ	省略時の動作
`axis`	`"horizontal"`
`period`	`360`
`value`	`0`
`anchor`	`0.5`
`offset`	`0`
`alignment`	`"topLeading"`

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

HStack

アニメーション

このページの内容

RepeatedLayout

例

使い方

プロパティ

組み合わせ例

アニメーション

省略時の動作

関連 API

HStack

アニメーション

このページの内容