캔버스에서 애니메이션 완화

html5<canvas></canvas> 요소는 JavaScript의 Canvas API와 결합하여 웹 페이지의 주요 래스터 그래픽 및 애니메이션 기능 중 하나를 형성합니다. 캔버스의 일반적인 사용 사례는 웹 사이트 (특히 게임)에 대해 프로그래밍 방식으로 이미지를 생성하는 것입니다. 내가 만든 카드 Solitaire 게임 웹 사이트는 정확히이 작업을 수행합니다. 모든 카드와 움직임이 캔버스를 사용하여 수행됩니다.

이 기사는 캔버스의 애니메이션과 기술에 초점을 맞추고 애니메이션을 더 매끄럽게 보이게합니다. 우리는 CSS와 같이 캔버스에서 무료로 사용할 수없는 전환 완화 (예 : "Ease-In"및 "Ease-Out")에 중점을 둘 것입니다.

정적 캔버스부터 시작하겠습니다. 나는 캔버스의 Dom에서 카드를 그렸습니다.

기본 애니메이션부터 시작하겠습니다. 캔버스에서 해당 카드를 이동하십시오. 매우 기본적인 일조차도 캔버스에서 처음부터 작업해야하므로 사용할 수있는 기능을 구축해야합니다.

먼저 X 및 Y 좌표를 계산하는 데 도움이되는 몇 가지 기능을 작성합니다.

 함수 getx (params) {
  LET DIVER = PARAMS.XTO -PARMANS.XFROM;
  steps = params.frames를하자;
  Progress = Params.frame을하자;
  반환 거리 / 단계 * 진행;
}

함수 gety (params) {
  거리 = params.yto -params.yfrom;
  steps = params.frames를하자;
  Progress = Params.frame을하자;
  반환 거리 / 단계 * 진행;
}

이렇게하면 이미지가 애니메이션 일 때 위치 값을 업데이트하는 데 도움이됩니다. 그런 다음 애니메이션이 완료 될 때까지 캔버스를 계속 렌더링합니다. addImage() 메소드에 다음 코드를 추가하여이를 수행합니다.

 // ... (코드를 생략) ...
if (params.frame <params.frames ...><p> 이제 우리는 애니메이션이 있습니다! 우리는 매번 1 개의 단위를 안정적으로 늘리고 있으며, 이는 <em>선형</em> 애니메이션이라고합니다.</p><p> 모양이 A 지점에서 B 지점으로 이동하는 방법을 볼 수 있으며, 두 지점 사이의 동일한 일정한 속도를 유지합니다. 완전히 기능하지만 현실주의가 부족합니다. 시작과 중지는 갑작 스럽습니다.</p><p> 우리가 원하는 것은 마찰과 중력의 작용 하에서 현실 세계의 물체의 움직임을 시뮬레이션 할 수 있도록 (편안함) 및 감속 (편의를 가속) 할 수있는 대상입니다.</p><p></p><h2 id="JavaScript-완화-기능"> JavaScript 완화 기능</h2><p> 우리는이를 달성하기 위해 "3 배"편의 및 편의 전환을 사용합니다. 우리는 Robert Penner의 플래시 완화 함수에서 발견 된 방정식 중 하나를 우리가 여기서하고 싶은 일에 맞게 수정했습니다.</p><pre class="brush:php;toolbar:false"> 함수 getease (currentProgress, 시작, 거리, 단계) {
  currentProgress /= 단계 /2;
  if (currentProgress <p> 코드에 삽입하면 (이것은 <strong>세 가지는</strong> ) 더 부드러운 결과를 얻을 수 있습니다. 카드가 공간의 중심을 향해 가속하는 방법에 주목하고 끝에 도달하면 속도가 느려집니다.</p><p></p><h2 id="JavaScript를-사용한-고급-완화"> JavaScript를 사용한 고급 완화</h2><p> 우리는 2 차 또는 정현파 완화를 사용하여 가속도가 느려질 수 있습니다.</p><pre class="brush:php;toolbar:false"> 함수 getquadraticease (currentProgress, 시작, 거리, 단계) {
  currentProgress /= 단계 /2;
  if (currentProgress <p> 빠른 가속을 위해 5 개 또는 지수 완화 또는 지수 완화를 사용할 수 있습니다.</p><pre class="brush:php;toolbar:false"> 함수 getquinticease (currentProgress, 시작, 거리, 단계) {
  currentProgress /= 단계 /2;
  if (currentProgress <p></p><h3 id="GSAP를-사용하여보다-복잡한-애니메이션을-구현하십시오"> GSAP를 사용하여보다 복잡한 애니메이션을 구현하십시오</h3><p> 완화 기능을 직접 작성하는 것은 재미 있지만 더 많은 힘과 유연성을 원한다면 어떻게해야합니까? 계속해서 사용자 정의 코드를 작성하거나보다 강력한 라이브러리를 사용하는 것을 고려할 수 있습니다. 이를 위해 GREENSOCK 애니메이션 플랫폼 (GSAP)으로 돌아 갑시다.</p><p> GSAP를 사용하면 애니메이션 구현이 훨씬 쉬워집니다. 이 예제를 예로 들어 보면 카드는 끝에 반등됩니다. GSAP 라이브러리는 데모에 포함되어 있습니다.</p><p> 핵심 함수는 <code>moveCard</code> 입니다.</p><pre class="brush:php;toolbar:false"> 함수 movecard () {
  gsap.to (위치, {
    기간 : 2,
    편의 : "bounce.out",
    X : 위치 .xmax,
    Y : Position.ymax,
    onupdate : function () {
      그리다();
    },
    oncomplete : function () {
      position.x = position.origx;
      position.y = position.origy;
    }
  });
}

gsap.to 방법은 모든 마법이 발생하는 곳입니다. 2 초 동안 위치 객체가 업데이트되고 업데이트 될 때마다 onUpdate 호출되어 캔버스의 redraw를 트리거합니다.

그리고 우리는 단지 반동에 대해 이야기하는 것이 아닙니다. 선택할 수있는 다양한 완화 옵션이 많이 있습니다.

요약

여전히 완화를 위해 캔버스에서 어떤 애니메이션 스타일과 방법을 사용할지 확실하지 않습니까? 다음은 GSAP에 제공된 애니메이션을 포함하여 다양한 완화 애니메이션을 보여주는 예입니다.

비 GSAP 애니메이션의 라이브 데모를 보려면 Solitaire 게임을 확인하십시오. 이 경우, 나는 게임의 카드가 힙 사이를 이동할 때 편안하고 쉽게 들어가도록 애니메이션을 추가했습니다.

동작을 생성하는 것 외에도 불투명도, 회전 및 스케일링의 변화와 같은 시작 및 종료 상태를 사용하여 다른 속성에 완화 함수를 적용 할 수 있습니다. 완화 기능을 사용하여 응용 프로그램이나 게임을 더 부드럽게 보이게하는 여러 가지 방법을 찾을 수 있기를 바랍니다.

위 내용은 캔버스에서 애니메이션 완화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!