プロパティ

位置、拡大縮小、ズーム、回転、不透明度、文字色を扱うTransformメソッド

一緒にアニメーションさせたい複数のプロパティ呼び出しは、1つのcommit()の前にまとめます。

const enter = Transform.create()
    .position({ xalign: 0.5 })
    .zoom(1)
    .opacity(1)
    .commit({ duration: 300, ease: "easeOut" });

この例では、位置、ズーム、不透明度が同じdurationとeaseを共有します。

位置

位置を設定します。

Transform.create()
    .position({ xalign: 0.5, yalign: 1 })
    .commit({ duration: 300 });

両軸の拡大縮小を設定します。

scaleX: TransformDefinitions.Types["scaleX"] - X軸の拡大縮小。負の値を指定すると、要素をX軸方向に反転します
scaleY: TransformDefinitions.Types["scaleY"] - Y軸の拡大縮小。負の値を指定すると、要素をY軸方向に反転します
戻り値はthis

X軸の拡大縮小を設定します。

Y軸の拡大縮小を設定します。

X軸とY軸の拡大縮小を設定します。

ズームを設定します。通常の画像の拡大縮小にはこちらを使用します。

Transform.create()
    .zoom(1.15)
    .commit({ duration: 240, ease: "easeOut" });

回転を設定します。

Transform.create()
    .rotation(-4)
    .commit({ duration: 180 })
    .rotation(0)
    .commit({ duration: 180 });

不透明度を設定します。

Transform.create()
    .opacity(0)
    .commit({ duration: 200 });

文字色を設定します。