내 솔리테어 게임을 위한 애니메이션 라이브러리를 선택한 방법

애니메이션 라이브러리를 위한 CSS 및 JavaScript 라이브러리가 많이 있습니다. 사실 너무 많아서 프로젝트에 적합한 것을 선택하는 것이 불가능해 보일 수 있습니다. 그것이 내가 건물을 짓기로 결정했을 때 직면한 상황입니다. 온라인 솔리테어 게임. 애니메이션 라이브러리가 필요하다는 것을 알고 있었지만 어떤 라이브러리를 선택하는 것이 좋을까요?

이 기사에서는 내가 고려한 사항, 주의해야 할 사항 및 사용 가능한 가장 인기 있는 라이브러리에 대해 설명하겠습니다. 내 요점을 설명하기 위해 몇 가지 실제 사례를 살펴보고 결국 처음 애니메이션 라이브러리를 선택해야 할 때 나보다 더 잘 갖추게 되기를 바랍니다.

물론 이 조언에 따른 마일리지는 다를 수 있습니다. 여기서 공유하는 모든 것은 내가 만들고자 하는 것에 특정한 것입니다. 프로젝트의 요구 사항과 우선 순위가 완전히 다를 수 있으며 괜찮습니다. 여기서 중요한 것은 프론트엔드 개발자처럼 생각하기 특별한 목표로.

말하자면, 나는 스스로를 프론트 엔드 개발자라고 생각하지만 배경 디자인은 매우 무겁습니다. 그래서 나는 코드를 알고 있지만 JavaScript 엔지니어 정도는 아닙니다. 경험이 최종 결정에 확실히 영향을 미칠 수 있기 때문에 이 점을 분명히 하고 싶었습니다.

여기 목표가 있습니다

결정을 내리기 전에 이 CSS-Tricks-ified 버전의 게임에서 만들어야 했던 애니메이션 종류를 살펴보겠습니다.

꽤 달콤하죠? 이 애니메이션에는 사소한 것이 없습니다. 때로는 동시에 많은 일이 진행되고 있으며 조정해야 할 일도 많습니다. 또한 대부분의 애니메이션은 사용자 상호 작용에 의해 트리거됩니다. 그래서 결정을 내릴 때 몇 가지 우선 순위를 갖게 되었습니다.

• 부드러운 애니메이션: 애니메이션이 적용되는 방식은 원활하게 실행되는지 또는 약간의 끊김 현상을 표시하는지에 큰 영향을 줄 수 있습니다.
• 성능 : 라이브러리를 채택하는 것은 프로젝트에 무게를 더할 것이고 나는 내 게임이 가능한 한 간결하기를 원했습니다.
• 편리 성 : 저는 애니메이션을 더 쉽게 작성하고 관리할 수 있게 해주는 멋지고 깔끔한 구문을 원했습니다. 더 나은 유지 보수가 가능한 코드를 작성할 수 있다면 약간의 추가 편의성을 약간의 성능 비용으로 바꾸겠습니다. 다시 말하지만, 이것은 디자이너에서 개발자로 전향한 사람에게 좋은 징조입니다.
• 브라우저 지원: 물론 저는 레거시 브라우저가 완전히 중단되는 것을 방지하기 위해 점진적 향상을 사용하는 모든 최신 브라우저에서 게임이 작동하기를 원했습니다. 게다가, 나는 확실히 미래 보장을 원했습니다.

이것이 내가 이 특정 작업에 적합한 도구를 찾을 때 가지고 갔던 것입니다.

CSS 또는 JavaScript 중에서 선택 애니메이션 라이브러리

애니메이션 라이브러리를 선택할 때 가장 먼저 고려한 것은 CSS 또는 JavaScript 기반 라이브러리를 사용할지 여부였습니다. 많은 훌륭한 CSS 라이브러리, 그들 중 많은 사람들이 저에게 최우선 순위였던 우수한 성능을 가지고 있습니다. 애니메이션을 시퀀싱하고 애니메이션 완료 시 콜백을 받는 기능과 같은 몇 가지 강력한 애니메이션을 수행하려고 했습니다. 순수 CSS로 이 모든 것이 가능합니다. 여전히 대부분의 JavaScript 라이브러리가 제공하는 것보다 훨씬 덜 부드럽습니다.

간단한 시퀀스 애니메이션이 CSS에서 어떻게 보이는지 살펴보고 많은 내장 애니메이션 도우미가 있는 jQuery와 비교해 보겠습니다.

애니메이션은 동일하게 보이지만 다르게 생성됩니다. CSS 애니메이션을 만들려면 먼저 CSS에서 키프레임 애니메이션을 정의하고 클래스에 연결해야 합니다.

.card.move {
  animation : move 2s;
}

@keyframes move {
  0% { left: 0 }
  50% { left: 100px }
  100% { left: 0 }
}

그런 다음 JavaScript를 사용하여 애니메이션을 실행하고 요소에서 CSS 콜백을 수신합니다.

var cardElement = document.getElementsByClassName("card")[0];
var statusElement = document.getElementsByClassName("status")[0];

cardElement.classList.add("move");
statusElement.innerHTML = "Animating"

var animationEndCallback = function() {
  cardElement.classList.remove("move");
  statusElement.innerHTML = "Inactive"
}

cardElement.addEventListener("webkitAnimationEnd", animationEndCallback);
cardElement.addEventListener("oAnimationEnd", animationEndCallback); 
cardElement.addEventListener("antionend", animationEndCallback);

이와 같은 간단한 예에서는 다른 장소에서 일이 발생하는 것이 좋을 수 있지만 상황이 조금 더 복잡해지면 매우 혼란스러울 수 있습니다. 

이것을 jQuery로 애니메이션을 수행하는 방법과 비교하십시오.

$(".status").text("Animating")
$( ".card" ).animate({
  left: "100px"
}, 1000);
$( ".card" ).animate({
  left: 0
}, 1000, function() {
  $(".status").text("Inactive")
});

여기에서는 모든 것이 같은 장소에서 발생하므로 향후 애니메이션이 더 복잡해질 경우 작업을 단순화합니다.

JavaScript 라이브러리가 올바른 방법인 것 같았지만 내 솔리테어 게임에 적합한 라이브러리는 무엇입니까? 제 말은, jQuery는 훌륭하고 오늘날에도 여전히 널리 사용되는, 하지만 그건 내가 모자를 걸고 싶은 것이 아닙니다. JavaScript 애니메이션 라이브러리가 많이 있으므로 염두에 두고 있던 무거운 애니메이션 유형을 처리하기 위해 특별히 구축된 것을 고려하고 싶었습니다.

JavaScript 애니메이션 라이브러리 선택

JavaScript 애니메이션 라이브러리가 부족하지 않고 새롭고 흥미로운 기술. 그들 모두는 장점과 단점이 있으므로 내가 고려한 몇 가지와 그 이유를 살펴 보겠습니다.

XNUMXD덴탈의 웹 애니메이션 API 미래에 많은 JavaScript 애니메이션 라이브러리를 대체할 수 있는 사례 중 하나입니다. 이를 통해 외부 라이브러리를 로드하지 않고 CSS 애니메이션과 동일한 성능으로 복잡한 지그재그 애니메이션을 만들 수 있습니다. 유일한 단점은 아직 모든 브라우저가 지원하는 것은 아닙니다.. 

XNUMXD덴탈의 <canvas> 요소는 또 다른 흥미로운 기회를 제공합니다. DOM에서와 마찬가지로 JavaScript로 애니메이션을 만들 수 있지만 애니메이션은 래스터로 렌더링되므로 고성능 애니메이션을 만들 수 있습니다. 유일한 단점은 캔버스 요소가 기본적으로 DOM에서 이미지로 렌더링된다는 것입니다. 따라서 완벽한 픽셀을 찾고 있다면 운이 좋지 않을 수 있습니다. 디자인과 밀접한 관련이 있는 사람으로서 이것은 나에게 있어 결정적인 문제였습니다.

시도하고 테스트한 것이 필요했기 때문에 많은 JavaScript 라이브러리 중 하나를 사용해야 한다는 것을 알았습니다. 나는 도서관을 찾기 시작했고 선택의 폭을 좁혔다. 애니메이션.js 와 GSAP. 둘 다 복잡한 애니메이션을 잘 처리하는 것처럼 보였고 성능에 대한 뛰어난 메모를 가지고 있었습니다. Anime은 GitHub에서 42.000개 이상의 별을 가진 잘 관리된 라이브러리인 반면, GSAP는 번창하는 커뮤니티와 함께 ​​매우 인기 있고 전투 테스트를 거친 라이브러리입니다.

도움을 요청할 곳이 필요했고 나중에 버려질 수도 있는 도서관을 사용하고 싶지 않았기 때문에 활동적인 커뮤니티는 저에게 매우 중요했습니다. 나는 이것을 편의 요구 사항의 일부로 고려했습니다.

애니메이션 및 콜백 시퀀싱

선택 범위를 좁히면 다음 단계는 두 개의 라이브러리를 사용하여 복잡한 애니메이션을 구현하는 것이었습니다. 솔리테어 게임에서 반복되는 애니메이션은 카드가 어딘가로 이동한 다음 뒤집히는 것이므로 어떻게 보이는지 봅시다.

두 애니메이션 모두 멋지게 보입니다! 매끄럽고 둘 다 구현하는 것은 매우 간단했습니다. 두 도서관 모두 타임라인 기능 시퀀스를 쉽게 만들 수 있습니다. 이것이 AnimeJS에서 구현된 모습입니다:

var timeline = anime.timeline({
  begin: function() {
    $(".status").text("Animating")
  },
  complete: function() {
    $(".status").text("Inactive")
  }
});

timeline.add({
  targets: '.card',
  left: [0, 300],
  easing: 'easeInOutSine',
  duration: 500
}).add({
  targets: '.card .back',
  rotateY: [0, 90],
  easing: 'easeInSine',
  duration: 200
}).add({
  targets: '.card .front',
  rotateY: [-90, 0],
  easing: 'easeOutSine',
  duration: 200
})

애니메이션의 timeline() 기능 애니메이션 시작 및 종료 시 콜백이 내장되어 있으며 시퀀스 생성은 순차 애니메이션을 추가하는 것만큼 쉽습니다. 먼저 카드를 움직인 다음 뒷면 이미지를 90도 돌려서 보이지 않게 하고 앞면 이미지를 90도 돌려서 보이게 합니다.

GSAP를 사용한 동일한 구현 timeline() 기능 매우 유사해 보입니다.

var timeline = gsap.timeline({
  onStart: function() {
    $(".status").text("Animating")
  },
  onComplete: function() {
    $(".status").text("Inactive")
  }
});

timeline.fromTo(".card", {
  left: 0
}, {
  duration: 0.5,
  left: 300
}).fromTo(".card .back", {
  rotationY: 0
}, {
  rotationY: 90,
  ease: "power1.easeIn",
  duration: 0.2
}).fromTo(".card .front", {
  rotationY: -90
}, {
  rotationY: 0,
  ease: "power1.easeOut",
  duration: 0.2
})

의사 결정 시간

Anime과 GSAP의 주요 차이점은 GSAP가 조금 더 정교할 수 있는 구문인 것 같습니다. 저는 기능이 매우 유사하고 복잡한 애니메이션을 처리할 수 있으며 커뮤니티가 번성하는 두 개의 훌륭한 라이브러리에 갇혀 있었습니다. 동점 경기를 한 것 같았어요!

우선	애니메이션	GSAP
부드러운 애니메이션	✅	✅
퍼포먼스	✅	✅
편의	✅	✅
브라우저 지원	✅	✅

그렇다면 내가 다른 라이브러리보다 하나의 라이브러리를 선택하게 된 이유는 무엇입니까?

나는 도서관이 압력을 받을 때 어떻게 행동할지에 대해 매우 걱정했습니다. Solitaire와 같은 게임에서 느린 애니메이션을 사용하면 게임을 즐기는 데 큰 영향을 줄 수 있습니다. 게임을 만들기 전에는 라이브러리가 어떻게 작동하는지 완전히 볼 수 없다는 것을 알고 있었습니다. 다행히 GSAP는 스트레스 테스트 애니메이션을 포함하여 서로 다른 애니메이션 라이브러리를 비교했습니다.

그런 점에서 GSAP는 수많은 복잡한 애니메이션을 처리하는 데 탁월한 라이브러리로 보였습니다. GSAP는 Anime이 26에서만 최고 수준을 달성할 수 있었던 무거운 애니메이션에서 초당 19프레임 이상을 제공했습니다. GSAP에 대해 더 읽고 포럼을 살펴본 후 성능이 사람들에게 가장 높은 우선 순위라는 것이 분명해졌습니다. GSAP 뒤에 있습니다.

그리고 GSAP와 Anime이 모두 한동안 존재했지만 Anime의 repo는 지난 몇 개월 동안 GSAP가 커밋한 동안 약간 휴면 상태에 있었습니다.

나는 결국 GSAP를 사용했고 내 결정을 후회하지 않았습니다!

당신은 어떤가요? 프런트 엔드 툴링을 평가하고 비교하는 방법과 관련이 있습니까? 이와 같은 프로젝트에서 고려했을 수 있는 다른 우선순위(예: 접근성 등)가 있습니까? 아니면 다양한 옵션 중에서 선택을 줄여야 했던 프로젝트가 있습니까? 알고싶으니까 댓글로 공유해주세요! 

아, 그리고 전체 카드 데크에 애니메이션을 적용할 때 어떻게 보이는지 확인하려면 내 사이트로 이동하여 솔리테어 게임을 하다. 즐거운 시간 보내세요!