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

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

▼ 記事より抜粋

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

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

▼ 完成形

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

# TypeScript版
TypeScript版のコードは次のとおりです。[Atsushi Kaga(@a_24)さん](https://twitter.com/a_24)の[Ease24](http://package.a24.cat/libs/tween24/asdoc/2.0/a24/tween/Ease24.html)も参考にしています。

```typescript
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"
}
```

- gist: [イージング定数](https://gist.github.com/tonkotsuboy/d7628f4a77c1a29b00a897dffe4152cd)

## 使い方

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

```ts
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にかけて番号が増加するほどイージングが強くなるため、イージングの強さ調整に便利です。

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

![](https://qiita-image-store.s3.amazonaws.com/0/67884/c5341a05-87a5-17dd-8daf-6a8f331a4d8a.png)


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

```js
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 = {}));
```

- gist: [イージング定数（JavaScript版）](https://gist.github.com/tonkotsuboy/22adf2f7751738468cbdda2af0490ed0)

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

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

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