Easing function

Easing functions 는 매개변수의 변화율을 시간이 지남에 따라 정한다.

현실의 물체는 갑자기 움직이거나 멈추지 않는다. 그리고, 대부분 일정한 속도로 움직이지도 않는다. 예를 들어 서랍을 열 때, 처음에는 가속이 붙으며 점점 속력이 줄어든다. 또 바닥에 무엇인가를 떨어뜨릴 때, 그것은 점점 빨리 내려가며 지면에 닿은 뒤 튀어 오를 때에는 점점 느려지면서 올라간다.

이 페이지는 상황에 맞는 easing function 을 고를 수 있도록 한다.

CSS

CSS 의 transition 과 animation 속성에서 easing function 을 사용할 수 있다. 불행히도, CSS 는 아직 모든 easing 을 지원하지 않으며, Bezier curve 와 같은 easing function 을 직접 지정해야 한다.

easing function 을 선택하여 Bezier curve 표기법을 볼 수 있다.

div {
  -webkit-transition: all 600ms easing’s Bezier curve;
  transition:         all 600ms easing’s Bezier curve; }

SCSS

Sass/SCSS 도 애니메이션을 기술할 수 있다. Compass 를 사용하면, transition 과 animation 프로퍼티에 prefix 를 붙일 필요가 없으며, Compass Ceaser 플러그인을 사용하면 Bezier curve 를 사용하지 않고, 이름으로 지정할 수도 있다.

div {
  @include transition(all 600ms ceaser($easing 이름)); }

JavaScript

jQuery 와 jQuery Easing Plugin 은 easing 을 가진 애니메이션을 쉽게 기술할 수 있다. easeInCirc 와 같은 easing 이름을 .animate() 함수에 세 번째 매개변수로 넘기거나, easing 프로퍼티에 easing 이름을 지정하면 된다.

div.animate({ top: '-=100px' }, 600, 'easing 이름', function () { … })