ease
(r34 Blame)| r34 | ||
|---|---|---|
| r32 (r30으로 되돌림) | 1 | [[분류:함수]][[분류:코드]][include(틀:작성 중)] |
| 2 | [목차] | |
| 3 | == 개요 == | |
| 4 | * 0에서 1로 등속운동을 하는 어떤 변수 t[* 보통은 초시계를 사용해 시간을 쓰지만, 일부~~귀찮은~~ 경우 변수를 사용해 구현 할 수 있다.]에 대하여 f(t)의 위치를 정해주는 함수다. | |
| 5 | * 주로 치역[* 함수가 값을 받는 범위]과 정의역[* 함수가 값을 뱉는 범위][* back, elastic같은 일부 함수는 정의역이 살짝 넘어가기도 한다.]이 0~1이지만, 매핑[* 범위 a~b에 있는 어떤 값x를 범위 c~d에 있는 값에 대입하는 것.]을 하여 원하는 범위에서 입출력하게 만든다. | |
| 6 | == 작품 == | |
| r33 | 7 | 좋아요 기준 내림차순. |
| 8 | ||<table bgcolor=transparent><rowbgcolor=gray><tablebordercolor=gray> '''개발자''' || '''작품 공유일''' || '''조회수''' || '''좋아요''' || '''북마크''' || '''링크''' || '''비고''' || | |
| 9 | || [[bpdq]] || 2025. 10. 11. || 3425 || 157 || 102 || [[https://playentry.org/project/68e97caae7f61a6e53f4542c|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 10 | || [[aqu3180]] || 2025. 01. 08. || 1069 || 40 || 33 || [[https://playentry.org/project/677e4490803d94b862515ebc|[[파일:엔트리 아이콘.svg|width=20]]]] || 이 문서에서는 이 작품을 기준으로 한다. || | |
| 11 | || f_unction || 2026. 05. 30. || 174 || 14 || 8 || [[https://playentry.org/project/6a1aa2f980a83345b60b106e|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 12 | || 리토리 || 2026. 02. 13. || 126 || 6 || 3 || [[https://playentry.org/project/698dee783dbecea3c3744086|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 13 | || 770544 || 2025. 11. 20. || 145 || 6 || 4 || [[https://playentry.org/project/691f057a69e8e154e8b4d20c|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 14 | || initialized || 2024. 10. 22. || 114 || 4 || 1 || [[https://playentry.org/project/6717bd8173c92c8309a6e8b0|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 15 | || [[_캡틴_]] || 2025. 11. 12. || 66 || 2 || 1 || [[https://playentry.org/project/6913ebdd3a3cb0c1e44e2575|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 16 | || ꧁뉴비q191꧂ || 2026. 04. 15. || 67 || 1 || 0 || [[https://playentry.org/project/69dfa103eea99d72bad96249|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| 17 | || awde34 || 2026. 02. 17. || 49 || 1 || 2 || [[https://playentry.org/project/6993ea7e5ac87341bd05ff72|[[파일:엔트리 아이콘.svg|width=20]]]] || | |
| r31 | 18 | |
| r32 (r30으로 되돌림) | 19 | == 종류 == |
| 20 | === 접미사 === | |
| 21 | * -in | |
| 22 | * 느리게 시작했다가 서서히 빨라지는 함수 유형이다.[* 도함수가 0~1 범위에서 증가함수다.] | |
| 23 | * -out | |
| 24 | * 빠르게 시작했다가 서서히 느려지는 함수 유형이다.[* 도함수가 0~1 범위에서 감소함수다.] | |
| 25 | * -in-out | |
| 26 | *in과 out을 붙힌것으로, 느림->빠름->느림 순서로 움직이는 함수 유형이다. | |
| 27 | 왠만해서 [math(t<0.5)] 에서는 [math(\frac{in(2t)}{2})]를, 아닐시 [math(\frac{1+out(2t-1)}{2})]의 식을 사용한다.[* 이후 in-out 함수의 식은 생략 할 예정.] | |
| 28 | * -out-in | |
| 29 | * 해당 문서에는 별다른 언급이 없을 예정이지만, out과 in을 붙힌것으로 빠름->느림->빠름 순서로 움직이는 함수 유형이다. | |
| 30 | 자주 쓰이지 않는 유형이다. | |
| 31 | === ease power === | |
| 32 | *지수함수의 형태로 정의되는 ease함수다. | |
| 33 | *위에 붙는 지수의 값에 따라 Quad, Cubic, Quart, Quint, Expo[* 순서대로 2,3,4,5,6.]등 다양하지만 굳이 서술 할 이유가 없으므로 Quad를 대표로 서술하였다. | |
| 34 | ||
| 35 | *ease in quad. 수식은 [math(f(x)=x^2)].[* 2가 아닌 다른값을 넣으면 다르게 움직인다. 클수록 극단적.] | |
| 36 | [[파일:ease in quad.png|width=200]] | |
| 37 | *ease out quad. 수식은 [math(f(x)=1-(1-x)^2)]. | |
| 38 | [[파일:ease out quad.png|width=200]] | |
| 39 | *ease in-out quad. | |
| 40 | [[파일:ease in out quad.png|width=200]] | |
| 41 | ||
| 42 | === ease sine === | |
| 43 | * 삼각함수를 사용한 ease함수 유형이다. 그 외에는 별 특별한 것 없다. | |
| 44 | ||
| 45 | *ease in sine. 수식은 [math(f(x)=1-\sin(90(1-x)))]. [* 원래는 90 대신 [math(\frac{\pi}{2})]를 사용해야 하지만 엔트리는 60분법을 쓰기 때문에 90이다.] | |
| 46 | [[파일:ease in.png|width=200]] | |
| 47 | *ease out sine. 수식은 [math(f(x)=\sin(90x))]. | |
| 48 | [[파일:ease out.png|width=200]] | |
| 49 | *ease in-out sine. | |
| 50 | [[파일:ease in out.png|width=200]] | |
| 51 | ||
| 52 | === ease back === | |
| 53 | * 잠깐 뒤로 갔다가[* 정의역이 0~1을 벗어난다.] 오는 ease함수 유형이다. | |
| 54 | ||
| 55 | *ease in back. 수식은 [math(f(x)=(s+1)x^3-sx^2)]. 여기서 s는 ease back에서 사용되는 상수값으로, [math(s=1.70158)][* s값을 바꾸면 움직임도 바뀐다. power과 동일하게 클수록 극단적.]이다. | |
| 56 | [[파일:ease in back.png|width=200]] | |
| 57 | *ease out back. 수식은 [math(f(x)=1+(s+1)(x-1)^3+s(x-1)^2)]. | |
| 58 | [[파일:ease out back.png|width=200]] | |
| 59 | *ease in-out back. in-out에서는 s값에 1.525를 곱하여 사용한다.[* 예제 작품에서는 곱하지 않았다.] | |
| 60 | [[파일:ease in out back.png|width=200]] | |
| 61 | ||
| 62 | === ease circ === | |
| 63 | * 이름답게 그래프가 사분원[* 중심각이 90도인 부채꼴. ~~4개로 자른 피자조각~~]을 그리는 ease함수 유형이다. | |
| 64 | 속도가 극단적으로 빨라진다. | |
| 65 | ||
| 66 | *ease in circ. 수식은 [math(f(x)=1-\sqrt{1-x^2})]. | |
| 67 | [[파일:ease in circ.png|width=200]] | |
| 68 | *ease out circ. 수식은 [math(f(x)=\sqrt{1-(1-x^2)})]. | |
| 69 | [[파일:ease out circ.png|width=200]] | |
| 70 | *ease in-out circ. | |
| 71 | [[파일:ease in out circ.png|width=200]] | |
| 72 | ||
| 73 | === ease bounce === | |
| 74 | * 통통 튀면서 움직이는 ease함수 유형이다. | |
| 75 | *ease '''out''' bounce.[* 편의상 out먼저 기술하였다.] 수식은.. | |
| 76 | [math( | |
| 77 | f(x)= | |
| 78 | \begin{cases} | |
| 79 | \frac{121}{16}x^2, & x<\frac{4}{11}\ \\ | |
| 80 | \frac{121}{16}\left(x-\frac{6}{11}\right)^2+\frac{3}{4}, & x<\frac{8}{11}\ \\ | |
| 81 | \frac{121}{16}\left(x-\frac{9}{11}\right)^2+\frac{15}{16}, & x<\frac{10}{11}\ \\ | |
| 82 | \frac{121}{16}\left(x-\frac{21}{22}\right)^2+\frac{63}{64}, & x\leq1 \\ | |
| 83 | \end{cases} | |
| 84 | )] [* 튕기는 부분이 전부 다른 함수여서 정의가 이렇다.] | |
| 85 | ||
| 86 | [[파일:ease out bounce.png|width=200]] | |
| 87 | *ease in bounce. 수식은 [math(f(x)=1-\operatorname{easeoutbounce}(1-x))]. | |
| 88 | [[파일:ease in bounce.png|width=200]] | |
| 89 | *ease in-out bounce. | |
| 90 | [[파일:ease in out bounce.png|width=200]] | |
| 91 | ||
| 92 | === ease elastic === | |
| r34 | 93 | * ease back과 비슷하지만, 한번에 돌아가는 게 아닌 주변을 왔다갔다 하다가 도착하는 ease함수 유형이다. |
| r32 (r30으로 되돌림) | 94 | * 이 함수의 경우 정확히 정해진 수식이 없기 때문에 서술하지 않았다.[* 주로 exp와 삼각함수를 섞어서 만든다.] |
| 95 | *ease in elastic. | |
| 96 | [[파일:ease in elastic.png|width=200]] | |
| 97 | *ease out elastic. | |
| 98 | [[파일:ease out elastic.png|width=200]] | |
| 99 | *ease in-out elastic. | |
| 100 | [[파일:ease in out elastic.png|width=200]] | |
| 101 | ||
| 102 | == 여담 == | |
| 103 | * 사실 저 함수들 말고도 f(0)=0, f(1)=1을 만족하고 함수가 연속[* 그래프가 이어져 있다는 뜻. 이러면 안된다는 거다.[[파일:불연속함수.png|width=150]]][* 사실 연속이던 말던 쓸 수야 있지만 모션이 이상할거다.]이라면 Ease함수로 쓸 수 있다. 예를 들어 [math(tan(45x))]. | |
| 104 | ||
| 105 | == 관련 문서 == | |
| 106 | * [[타이포그래피]] | |
| 107 | * [[엔트리/코드]] | |
| 108 | * [[:분류:함수]] | |
| 109 | [각주][include(틀:문서 가져옴, title=타이포그래피, version=10, uuid=1a12668a-592f-4e26-a2a0-a495d0980ad3)] |