easing 이징함수

 

easing 함수란?

easing은 움직임의 변화가 일정하지 않고 부드럽게 움직이는 효과를 말하낟.

예를들어 처음에는 느리게 움직이다가 시간이 지나면 점점 빠르게 움직이는 것처럼 이징효과를 적용하면 자연스러운 움직임을 구현할 수 있다.

 

• easeInQuad: 천천히 가속하는 이징 함수
• easeOutQuad: 천천히 감속하는 이징 함수
• easeInOutQuad: 천천히 가속하다가 천천히 감속하는 이징 함수
• easeInCubic: 느리게 가속하는 이징 함수
• easeOutCubic: 느리게 감속하는 이징 함수
• easeInOutCubic: 느리게 가속하다가 느리게 감속하는 이징 함수
• easeInQuart: 매우 느리게 가속하는 이징 함수
• easeOutQuart: 매우 느리게 감속하는 이징 함수
• easeInOutQuart: 매우 느리게 가속하다가 매우 느리게 감속하는 이징 함수
• easeInQuint: 아주 천천히 가속하는 이징 함수
• easeOutQuint: 아주 천천히 감속하는 이징 함수
• easeInOutQuint: 아주 천천히 가속하다가 아주 천천히 감속하는 이징 함수

 

 

아래는 각 이징 함수라 어떤 식으로 동작하는지 나타내고 있는 그림이다.

 

이미지 출처 : https://www.researchgate.net/figure/Image-of-set-of-Penners-easing-functions_fig3_308007569

 

 

아래 사이트에 가면 각각의 이징함수가 어떤 식으로 움직이는지 확인할 수 있다.

https://api.jqueryui.com/easings/

Easings | jQuery UI API Documentation

 

jQuery에서는 다양한 이징(easing)함수를 제공하는데 easing 함수를 사용하려면 jQuery UI를 설치하고 불러와야 한다.