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

gist: 여유 상수

사용법

기본적인 사용법은 다음과 같습니다.

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

gist: 이징 상수(JavaScript 버전)

사용법은 TypeScript 버전과 마찬가지로 다음과 같이 합니다.

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

마지막으로

cubic-bezier 의 파라미터는 자주 사용하기 때문에, 책 enum 덕분에 코딩이 편해졌습니다.