여유 기능이란 무엇입니까?


15

게임 개발을위한 이 멋진 웹 사이트 를 찾았 으며 여유 기능 목록이 있습니다.

여기에 이미지 설명을 입력하십시오

이 사이트에는 그들이 무엇을 원하는지에 대한 설명이 포함되어 있지만 내 머리 위로 넘어갑니다. 여유 기능이란 무엇이며 용도는 무엇입니까?

최신 정보

Phaser.io의 소스 코드 에서 함수 자체의 더 좋은 예를 찾았습니다 . 이러한 기능은 여기에 제시된 답변보다 훨씬 간단합니다. 매개 변수는 하나만 사용 k합니다. 답의 일부로, 사용법을 알고 싶습니다.


2
중요한 관련 용어는 트위닝입니다. 트위닝 및 완화 기능의 효과가 얼마나 큰지 확인할 수있는 이 비디오 youtube.com/watch?v=Fy0aCDmgnxg 를 참조하십시오!
Roy T.

답변:


13

완화 기능은 일반적으로 애니메이션 / 운동 학적 모션에서 보간에 사용됩니다 (필수 사항은 아님). 선형 보간 (lerp)은 여러분이 들어 본 것입니다. 화면의 한 구석에서 다른 구석으로 (얼마나 많은 이미지로) 웃는 얼굴을 rp다고 가정 해 봅시다. 이것은 스마일리가 A 지점에서 B 지점으로 일정한 속도로 움직일 것임을 의미합니다. 이것을 사지의 움직임에 적용한다면, 로봇이 사용하는 액추에이터 / 서보가 매우 로봇적이고 부 자연스럽게 보일 것입니다. 분명히, 인간의 사지는 매우 다른 방식으로 움직입니다. 그리고 자연에서 볼 수있는 대부분의 모션은 선형 보간에서 볼 수있는 꾸준하고 변하지 않는 속도보다는 재미있는 모션 커브를 갖습니다.

여유를 입력하십시오. 운동을 완화한다는 것은 속도가 일정 하지 않습니다 . 이것이 달성하는 것은보다 현실적으로 보이도록하는 것입니다. 사람들을 보거나, 다른 동물을 보거나, 바람에 식물이 구부러지는 것을 보거나, 비가 내리는 날이 풍성한 날에 방향을 바꾸는 방법까지 볼 수 있습니다. 공중에 던지고 공이 다시 내려올 때 공의 속도를 관찰하십시오. 당신이 그것을 뽑아 기타 줄의 움직임을보십시오. 이러한 각 유형의 동작에는 속도를 나타내는 곡선이 다릅니다.

GreenSock의 GSAP를 온라인에서 플레이하는 것이 좋습니다. 완화 곡선의 다른 유형 운동의 관점에서 무엇을 생산에 대한 느낌을 얻을 수 있습니다. 특정 이름의 커브를 원하는 모션에 매핑하는 데 시간과 연습이 필요한 것들 중 하나입니다. 그러나 기본 사항을 파악하면 많은 즐거움을 누릴 수 있습니다.

PS 내가 말했듯이 여유는 애니메이션에만 사용되는 것이 아닙니다. 사운드 패닝, 논리 / 모델 수준에서 골격 동작에 영향을 주거나 시간이 지남에 따라 특정 부드러운 변형이 필요할 수 있다고 생각할 수있는 모든 것에 사용할 수 있습니다.


1
btw Easing은 GreenSock 링크의 두 번째 슬라이드입니다. 슬라이드의 드롭 다운 메뉴를 사용하여 다양한 여유 기능을 테스트하십시오.
jhocking

8

여유 함수를 사용하면 "여유 함수"라는 것을 사용하여 주어진 간격 동안 한 값에서 다른 값으로 보간 할 수 있습니다. 이것들은 값을 가지고 간격의 주어진 지점에서 특정 시점에 값을 출력하도록 설계된 기능입니다.

코드 스 니펫을 살펴보면 가장 잘 설명 할 수 있습니다.

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t는 트윈의 현재 시간 (또는 위치)입니다. 단위가 총 시간에 사용 된 것과 동일하다면 초 또는 프레임, 단계, 초, ms 일 수 있습니다.

@b는 속성의 시작 값입니다.

@c는 속성의 시작 값과 대상 값 사이의 변화입니다.

@d는 트윈의 총 시간입니다.

감사합니다, http://upshots.org/actionscript/jsas-understanding-easing

이것이 선형 여유 함수의 정의입니다. 이것을 't'로 시간에 따라 그래프로 나타내면 단순한 선형 그래프를 얻을 수 있습니다.

좋아. 무엇을 사용할 수 있습니까?

시작 및 완료를 염두에두고 애니메이션을 적용하려는 경우 "트위닝"또는 "쉬운 기능"을 사용할 수 있습니다.

예를 들어, 방금 Angry Birds에서 가져온 GIF가 있습니다.

여기에 이미지 설명을 입력하십시오

메뉴가 화면의 특정 지점으로 미끄러 져 나오지만 천천히 멈 춥니 다. 이는 제자리에 편해지는 기능 완화 때문입니다. 당신은 웹을 통해 그들을 볼 수 있습니다. 이것이 선형적인 편이면 전체적으로 동일합니다.

음악?

확실한! 현재 사운드 트랙 값을 가져와 총 t의 1 초에 걸쳐 0과 0 사이에 보간하면 볼륨이 1 초 동안 천천히 사라집니다.

경계 객체

물리 시스템없이 스프라이트에서 이와 같은 효과를 생성 할 수있는 수신 거부 기능 ( http://easings.net/#easeOutBounce 참조 )도 있습니다.

여기에 이미지 설명을 입력하십시오

트위닝을 검색하여 웹에서 자세한 정보를 찾을 수 있습니다.


@tieTYT 나는 당신을 위해 설명을 추가했습니다. 어떤 종류의 사용 예를 찾고 있습니까?
Vaughan Hilts

내 업데이트를 참조하십시오. k매개 변수 로만 사용되는 기능을 사용하는 방법을 설명 할 수 있다면 이 답변을 수락하겠습니다. 감사합니다
Daniel Kaplan

이 함수들은 단지 k를 취하는 것이 아닙니다. 시작 함수는이를 사용하여 더 복잡한 함수로 전달됩니다. 페이저 구현에 관심이 있습니까?
Vaughan Hilts

그들은 모두 k나에게 가져간 것 같습니다 . 다른 곳은 어디입니까?
Daniel Kaplan

모든 여유 기능 ( '흔들기'스타일 트윈 제외)에는 최소 세 개의 매개 변수가 필요합니다. 시간 (보통 0과 1 사이의 비율), 시작 값 및 끝 값 때때로 시간은 현재 시간 및 완화 기간과 같은 두 개의 매개 변수로 나뉩니다. 시작 값과 끝 값이 이미 정의되어 있으면 (쉽게 시스템 / 라이브러리에 따라) 시간을 넘겨야 할 수도 있지만 나 자신은 잘 모르고 있습니다. 예를 들어 10 ~ 30 사이의 값을 75 % (3 초 ~ 4 초)로 원한다면 10 ~ 30, 75 % (시간 / 지속 시간)를 전달해야합니다.
Doug.McFarlane

2

완화 기능은 기간 동안 시작 번호에서 종료 번호로 값을 변경하는 역할을합니다.

이 값을 사용하여 위치, 회전, 배율, 색상 변경 및 값을 사용하는 기타 속성과 같은 게임의 개체 속성에 애니메이션을 적용합니다.

다른 여유 함수는 애니메이션의 "느낌"또는 시간에 따른 값의 변화를 결정합니다.

게시 한 웹 사이트에서 그래프는 시간이 지남에 따라 변화하는 값을 시작부터 끝까지 보여 주므로 애니메이션하려는 객체가 그래프의 공 경로를 따라가는 것은 아닙니다.


오, 이제 당신은 내 것을 반영하기 위해 답변을 변경했습니다! 당신이 배우고있는 것을보기에 아주 좋습니다.
엔지니어

이 답변은 튜토리얼보다 참조처럼 보입니다. 더 잘 이해하려면 예가 필요합니다.
Daniel Kaplan

@NickWiggill 아니오, 지금까지 귀하의 답변을 보지 못했습니다.
ino
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.