CSSのcubic-bezierで使用可能な各イージングをTypeScript・JavaScript向けに定数化した

18327 ワード
アニメーション TypeScript JavaScript CSS animation CSS テキストリンク

ICS MEDIAの記事「アニメーションをデザインしよう！ 知っておきたいCSSイージングのお手本 - ICS MEDIA」では、イージングの使い分けが解説されています。その末尾にある、cubic-bezier()で使用するパラメータの一覧が便利です。

▼ 記事より抜粋

cubic-bezier(.47, 0, .745, .715); /* easeInSine */
cubic-bezier(.25, .46, .45, .94); /* easeOutQuad */

このパラメータをTypeScriptやJavaScriptでも利用したいと思い、enumを作成しました。

▼ 完成形

console.log(Easing._1_SineIn);  // ".47, 0, .745, .715"
console.log(Easing._4_QuartOut);  // ".23, 1, .32, 1"

TypeScript版

TypeScript版のコードは次のとおりです。Atsushi Kaga(@a_24)さんのEase24も参考にしています。

export const enum Easing {
  _Linear = "0.0, 0.0, 1.0, 1.0",
  // sine
  _1_SineIn = ".47, 0, .745, .715",
  _1_SineOut = ".39, .575, .565, 1",
  _1_SineInOut = ".445, .05, .55, .95",
  // quad
  _2_QuadIn = ".55, .085, .68, .53",
  _2_QuadOut = ".25, .46, .45, .94",
  _2_QuadInOut = ".455, .03, .515, .955",
  // cubic
  _3_CubicIn = ".55, .055, .675, .19",
  _3_CubicOut = ".215, .61, .355, 1",
  _3_CubicInOut = ".645, .045, .355, 1",
  // quart
  _4_QuartIn = ".895, .03, .685, .22",
  _4_QuartOut = ".165, .84, .44, 1",
  _4_QuartInOut = ".77, 0, .175, 1",
  // quint
  _5_QuintIn = ".755, .05, .855, .06",
  _5_QuartOut = ".23, 1, .32, 1",
  _5_QuartInOut = ".86, 0, .07, 1",
  // expo
  _6_ExpoIn = ".95, .05, .795, .035",
  _6_ExpoOut = ".19, 1, .22, 1",
  _6_ExpoInOut = "1, 0, 0, 1",
  // circ
  _7_CircIn = ".6, .04, .98, .335",
  _7_CircOut = ".075, .82, .165, 1",
  _7_CircInOut = ".785, .135, .15, .86",
  // inback
  _BackIn = ".6, -0.28, .735, .045",
  _BackOut = ".175, .885, .32, 1.275",
  _BackInOut = ".68, -0.55, .265, 1.55"
}

使い方

基本的な使い方は次のとおりです。

import { Easing } from "./Easing";

const fooElement = document.querySelector(".foo") as HTMLElement;
fooElement.style.transitionTimingFunction = `cubic-bezier(${Easing._6_ExpoOut})`;

筆者はWeb Animation API使用時、Angularのアニメーション実装時などに使います。

Easeの後に_を入力すればパラメータの一覧がコード補完されます。1から6にかけて番号が増加するほどイージングが強くなるため、イージングの強さ調整に便利です。

▼ パラメータ一覧を参照している様子

JavaScript版

JavaScript版は次のとおりです。export部分は省略しています。

var Easing;
(function (Easing) {
    Easing["_Linear"] = "0.0, 0.0, 1.0, 1.0";
    // sine
    Easing["_1_SineIn"] = ".47, 0, .745, .715";
    Easing["_1_SineOut"] = ".39, .575, .565, 1";
    Easing["_1_SineInOut"] = ".445, .05, .55, .95";
    // quad
    Easing["_2_QuadIn"] = ".55, .085, .68, .53";
    Easing["_2_QuadOut"] = ".25, .46, .45, .94";
    Easing["_2_QuadInOut"] = ".455, .03, .515, .955";
    // cubic
    Easing["_3_CubicIn"] = ".55, .055, .675, .19";
    Easing["_3_CubicOut"] = ".215, .61, .355, 1";
    Easing["_3_CubicInOut"] = ".645, .045, .355, 1";
    // quart
    Easing["_4_QuartIn"] = ".895, .03, .685, .22";
    Easing["_4_QuartOut"] = ".165, .84, .44, 1";
    Easing["_4_QuartInOut"] = ".77, 0, .175, 1";
    // quint
    Easing["_5_QuintIn"] = ".755, .05, .855, .06";
    Easing["_5_QuartOut"] = ".23, 1, .32, 1";
    Easing["_5_QuartInOut"] = ".86, 0, .07, 1";
    // expo
    Easing["_6_ExpoIn"] = ".95, .05, .795, .035";
    Easing["_6_ExpoOut"] = ".19, 1, .22, 1";
    Easing["_6_ExpoInOut"] = "1, 0, 0, 1";
    // circ
    Easing["_7_CircIn"] = ".6, .04, .98, .335";
    Easing["_7_CircOut"] = ".075, .82, .165, 1";
    Easing["_7_CircInOut"] = ".785, .135, .15, .86";
    // inback
    Easing["_BackIn"] = ".6, -0.28, .735, .045";
    Easing["_BackOut"] = ".175, .885, .32, 1.275";
    Easing["_BackInOut"] = ".68, -0.55, .265, 1.55";
})(Easing || (Easing = {}));

使い方はTypeScript版と同様に次のようにします。

console.log(Easing._1_SineIn);  // ".47, 0, .745, .715"

最後に

cubic-bezierのパラメータはよく使うため、本enumのおかげでコーディングが楽になりました。