視覚効果

アニメーション中に適用する、マスク、クリップパス、フィルター、背景フィルター、ブレンドモードのTransformメソッド

マスク、クリップ、フィルター、背景フィルター、ブレンドモードをtransformの中で実行したい場合は、これらのメソッドを使用します。

const flash = Transform.create()
    .filter("brightness(1.5)")
    .commit({ duration: 120 })
    .filter("none")
    .commit({ duration: 160 });

自動的にプリロードされる画像マスクには、Displayable.maskを使用してください。

effect

複数の視覚効果フィールドを一度に設定します。

Transform.create()
    .effect({
        clipPath: "inset(0 0 30% 0)",
        filter: "brightness(0.8)",
    })
    .commit({ duration: 200 });

effect: TransformDefinitions.VisualEffectTransformProps - マスク、クリップパス、フィルター、背景フィルター、ブレンドモードの各フィールドに対応
戻り値はthis

maskImage

CSSのmask-imageの値をそのまま設定します。

Transform.create()
    .maskImage('url("/masks/spotlight.png")')
    .commit({ duration: 300 });

maskImage: TransformDefinitions.Types["maskImage"]
戻り値はthis

clipPath

CSSのclip-pathの値を設定します。

Transform.create()
    .clipPath("circle(0% at 50% 50%)")
    .commit({ duration: 0 })
    .clipPath("circle(150% at 50% 50%)")
    .commit({ duration: 500, ease: "easeOut" });

clipPath: TransformDefinitions.Types["clipPath"]
戻り値はthis

filter

CSSのfilterの値を設定します。

Transform.create()
    .filter("blur(4px) brightness(0.8)")
    .commit({ duration: 240 });

filter: TransformDefinitions.Types["filter"]
戻り値はthis

backdropFilter

CSSのbackdrop-filterの値を設定します。

Transform.create()
    .backdropFilter("blur(12px)")
    .commit({ duration: 200 });

backdropFilter: TransformDefinitions.Types["backdropFilter"]
戻り値はthis

mixBlendMode

CSSのmix-blend-modeの値を設定します。

Transform.create()
    .mixBlendMode("screen")
    .commit({ duration: 0 });

mixBlendMode: TransformDefinitions.Types["mixBlendMode"]
戻り値はthis