맞춤형 소프트웨어 개발. 브랜드 파동에 대한 짧은 이야기

솔루션 제안

처음에는 다양한 라이브러리로 애니메이션을 적용한 일반 SVG 오브젝트로 시작했습니다. 한 페이지에 3개의 오브젝트를 넣고 싶었지만 결과는 만족스럽지 못했습니다. 모든 애니메이션이 느려서 하나의 SVG 객체의 모든 경로를 매우 짧은 시간 내에 업데이트해야 했기 때문에 전체 페이지가 달팽이처럼 느려졌습니다. 문서에 순수한 SVG를 삽입하는 솔루션은 거부할 수밖에 없었습니다. 그래서 다른 두 가지 솔루션 중에서 선택할 수 있었습니다.

그리고 비디오 요소가 두 번째 옵션이었습니다. 우리는 두 가지 문제에서 시작했습니다:

- 투명 배경은 .mp4 또는 .webm과 같이 가장 많이 사용되는 동영상 형식에는 적용할 수 없습니다,

- 반응 속도에 문제가 있었는데, 동영상은 확장할 수 없기 때문에 큰 문제였습니다.
​
저희는 이 솔루션을 "다른 솔루션을 찾지 못하면 이 솔루션을 선택하겠다"는 생각으로 뒤로 미루기로 했습니다.

마지막 옵션은 캔버스 와 함께 WebGL 렌더링을 사용했습니다. 모든 렌더링 메커니즘을 직접 디자인해야 했기 때문에 매우 이례적인 선택이었죠. 우리가 가진 모픽 웨이브는 커스텀 솔루션이었기 때문에 커스텀 솔루션을 설계할 수밖에 없었고, 그것이 우리가 따르고 싶고 집중하고 싶었던 옵션이었습니다.

솔루션 아키텍처

처음부터 다시 시작하겠습니다. 이 파도를 만들기 위해 사용해야 했던 자료는 무엇이었을까요? 아이디어는 모든 파도가 1×1 크기의 SVG 파일과 이 영역 주변에 배치된 특정 경로라는 것이었습니다. 이 SVG의 애니메이션은 이 파일에 몇 가지 형태의 상태를 추가하여 빌드했습니다. 따라서 모든 애니메이션은 도형을 움직이는 단계가 포함된 파일 세트로 표현되었습니다.

상태를 자세히 살펴보면 모든 경로는 특정 값이 특정 순서로 배치된 일종의 배열에 불과합니다. 이 배열 내에서 특정 위치의 값을 변경하면 특정 부분의 모양이 변경됩니다. 다음 예제를 통해 이를 단순화할 수 있습니다:


상태 1: [1, 50, 25, 40, 100]
상태 2: [0, 75, -20, 5, 120]
상태 3: [5, 0, -100, 80, 90]


따라서 렌더링하려는 모양이 특정 기간 동안 선형 완화에 따라 변화하는 5개의 요소로 구성된 배열로 구성되어 있다고 가정할 수 있습니다. 애니메이션이 마지막 단계를 완료하면 첫 번째 단계부터 다시 시작하여 무한한 애니메이션의 느낌을 줍니다.

하지만... 잠깐만요 - 위에 표시된 배열은 정확히 무엇일까요? 앞서 언급했듯이 특정 모양을 표시하는 경로입니다. 모든 마법은 d 속성을 설정합니다. 이 속성에는 도형을 그리기 위한 일련의 '명령'이 포함되어 있으며 각 명령에는 일종의 인수가 있습니다. 위에서 언급한 배열은 이러한 명령에 연결된 모든 값(인수)으로 구성됩니다.

이러한 '상태 파일'의 유일한 차이점은 명령 순서가 동일하기 때문에 특정 명령의 값만 다를 뿐입니다. 따라서 모든 값을 가져와서 애니메이션을 적용하는 것이 전부였습니다.

물리학이라는 마법사

위 단락에서 오브젝트 애니메이션의 유일한 마법은 도형의 모든 단계 사이에 전환을 만드는 것이라고 언급했습니다. 문제는 캔버스로 이를 어떻게 할 수 있을까요?
​
함께 일한 모든 사람이 캔버스 알아야 할 것은 요청애니메이션프레임. 이 함수를 처음 보신다면 이 글부터 읽어보시는 것이 좋다고 생각합니다. 이 함수에서 우리가 관심을 갖고 있는 것은 바로 DOMHighResTimeStamp. 정말 무섭게 보이지만 실제로는 이해하기 어렵지 않습니다. 첫 번째 렌더링부터 경과된 시간의 타임스탬프라고 말할 수 있습니다.

좋아요, 하지만 이걸로 무엇을 할 수 있을까요? 이걸로 요청애니메이션프레임 함수를 재귀적으로 호출하면 호출 사이의 시간 지연에 액세스할 수 있습니다. 이제 과학으로 들어가 보겠습니다! ⚛️ (아직 로켓 과학은 아니지만...)
​
물리학에서는 거리의 델타는 시간의 델타에 속도를 곱한 값과 같다고 가르칩니다. 이 경우 특정 시간 내에 종점에 도달해야 하므로 속도는 일정합니다. 이제 위의 상태로 어떻게 표현할 수 있는지 살펴보겠습니다:

이러한 상태 사이를 천 밀리초 만에 전환하고 싶다고 가정하면 속도 값은 다음과 같습니다:


델타: [ -1, 25, -45, -35, 20]
속도: [-1/1000, 25/1000, -45/1000, -35/1000, 20/1000]


위의 속도는 매 밀리초마다 -1/1000씩 값을 증가시켜 보겠습니다. 그리고 여기서 다시 우리의 요청애니메이션프레임 와 시간 델타. 우리가 증가시키고자 하는 특정 위치의 값은 시간 델타에 해당 위치의 속도를 곱한 값입니다. 문제없이 달성하기 위해 한 가지 더 해야 할 일은 값을 제한하여 원하는 상태를 초과하지 않도록 하는 것입니다.
​
전환이 끝나면 다른 전환을 호출하는 식으로 진행합니다. 그리고 구현하기가 그렇게 어렵지 않은 것 같지만 소프트웨어 개발 이미 구현된 기능에 시간을 낭비하지 않는 것입니다. 그래서 우리는 작은 도서관 를 사용하여 이러한 전환을 손쉽게 만들 수 있습니다.
​
이렇게 해서 살아있는 생물처럼 보이는 하나의 애니메이션 파도를 만들었습니다.

도형 복제에 대한 몇 마디

보시다시피 The Codest 브랜드 파도는 하나의 애니메이션 피규어가 아닙니다. 모양은 같지만 크기와 위치가 다른 많은 그림으로 구성되어 있습니다. 이 단계에서는 이러한 방식으로 복제하는 방법에 대해 간단히 살펴 보겠습니다.
​
따라서 캔버스 컨텍스트를 통해 다음을 수행할 수 있습니다. 스케일 그리기 영역 (내부적으로는 그리기 가능한 메서드에 전달된 모든 치수에 "k"를 곱한다고 말할 수 있습니다. 여기서 "k"는 배율이며, 기본적으로 "1"로 설정되어 있습니다), 캔버스 번역하기를 사용하여 그리기 영역의 앵커 포인트를 변경하는 것과 같습니다. 또한 이러한 메서드를 사용하여 이러한 상태 사이를 이동할 수도 있습니다: 저장 그리고 복원.
​
이 방법을 사용하면 "수정 없음" 상태를 저장한 다음 적절한 크기와 변환된 캔버스로 루프에서 특정 수의 파도를 렌더링할 수 있습니다. 그 직후에는 저장된 상태로 돌아갈 수 있습니다. 이것이 그림 복제에 관한 모든 것입니다. 양을 복제하는 것보다 훨씬 쉽죠?

체리 위에 체리

성능 때문에 잠재적인 솔루션 중 하나를 거부했다고 말씀드렸습니다. 캔버스 옵션은 꽤 빠르지만 더 최적화할 수 없다고 말하는 사람은 아무도 없었습니다. 브라우저 뷰포트 외부에 있을 때 도형을 전환하는 것에 대해서는 크게 신경 쓰지 않는다는 사실부터 말씀드리겠습니다.
​
프로그래머들이 좋아하는 또 다른 브라우저 API가 있습니다. 교차로 관찰자. 이를 통해 페이지의 특정 요소를 추적하고 해당 요소가 뷰포트에서 나타나거나 사라질 때 호출되는 이벤트를 처리할 수 있습니다. 지금은 아주 쉬운 상황입니다. 가시성 상태를 생성하고 IntersectionObserver 이벤트 핸들러로 인해 변경한 다음 특정 모양에 대해 렌더링 시스템을 켜고 끄기만 하면 됩니다. 그리고... 성능이 크게 향상되었습니다! 뷰포트에 보이는 것만 렌더링하고 있습니다.

요약

특히 사용 가능한 옵션이 비슷한 장단점을 가지고 있는 것처럼 보일 때 구현 방법을 선택하는 것은 어려운 선택일 때가 많습니다. 올바른 선택을 하기 위한 핵심은 각각의 옵션을 분석하여 이점이 적다고 판단되는 옵션을 제외하는 것입니다. 어떤 솔루션은 다른 솔루션보다 더 많은 시간이 필요하지만 더 쉽게 최적화되거나 사용자 지정이 가능할 수도 있습니다.

새로운 JS 라이브러리가 거의 매 순간 등장하고 있지만, 그것만으로는 해결할 수 없는 문제들이 있습니다. 그렇기 때문에 모든 프론트엔드 엔지니어는 브라우저 API를 알고, 기술 뉴스를 따라잡고, 때로는 "내가 이 라이브러리를 이렇게 구현해야 한다면 어떤 모습일까?"를 생각해야 합니다. 브라우저에 대한 지식이 많을수록 정말 멋진 것을 만들 수 있고, 사용하는 도구에 대해 올바른 결정을 내릴 수 있으며, 더 자신감을 가질 수 있습니다. 코드.

자세히 읽어보세요:

– 루비 3.0. Ruby와 잘 알려지지 않은 개인정보 제어 방법

– 닥치고 돈 가져가세요 #1: 제품 개발 프로세스의 숨겨진 비용과 진정한 민첩성

– CTO 과제 - 소프트웨어 제품의 확장 및 성장