リファレンス · /animate

FLIP_KEYFRAMES定数

リファレンスの説明と例は英語です。見出しと目次は日本語です。

インポート

import { FLIP_KEYFRAMES } from "@johnmorrisdotca/koyomi-calendars/animate";

定義

const FLIP_KEYFRAMES: Record<"tear-down" | "fly-up" | "rip-corner" | "flip-down", { frames: Frame[]; origin: string; easing: string; perspective?: number; }> = {
    "tear-down": {
        origin: "50% 0%",
        easing: "cubic-bezier(.5,0,.9,.6)",
        frames: [
            { transform: "translate(0,0) rotate(0deg)", opacity: 1 },
            { transform: "translate(0,3%) rotate(-1.5deg)", opacity: 1, offset: 0.22 },
            { transform: "translate(2%,125%) rotate(7deg)", opacity: 0.9 },
        ],
    },
    "fly-up": {
        origin: "50% 100%",
        easing: "cubic-bezier(.4,0,.8,.5)",
        frames: [
            { transform: "translate(0,0) rotate(0deg) scale(1)", opacity: 1 },
            { transform: "translate(0,4%) rotate(0deg) scale(.98)", opacity: 1, offset: 0.18 },
            { transform: "translate(-4%,-135%) rotate(-9deg) scale(.9)", opacity: 0.9 },
        ],
    },
    "rip-corner": {
        origin: "0% 0%",
        easing: "cubic-bezier(.45,0,.85,.55)",
        frames: [
            { transform: "translate(0,0) rotate(0deg)", opacity: 1 },
            { transform: "translate(-1%,1%) rotate(-7deg)", opacity: 1, offset: 0.3 },
            { transform: "translate(-45%,-95%) rotate(-62deg)", opacity: 0.85 },
        ],
    },
    "flip-down": {
        origin: "50% 100%",
        easing: "cubic-bezier(.45,0,.75,.5)",
        perspective: 900,
        frames: [
            { transform: "rotateX(0deg)", opacity: 1 },
            { transform: "rotateX(-70deg)", opacity: 1, offset: 0.6 },
            { transform: "rotateX(-120deg)", opacity: 0 },
        ],
    },
}

メンバー

例

import { FLIP_KEYFRAMES } from "@johnmorrisdotca/koyomi-calendars/animate";

console.log(FLIP_KEYFRAMES["fly-up"].frames.length, FLIP_KEYFRAMES["fly-up"].easing);

3 cubic-bezier(.4,0,.8,.5)

出力（このページを作ったときに実行した結果）

ソースを見るGitHub で編集@johnmorrisdotca/koyomi-calendars 0.3.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。