캔버스에서 사용자 정의 경로 애니메이션 예제를 달성하는 방법

최근 프로젝트에서는 새로운 요구를 만들어야합니다. 캔버스에서 사용자 정의 경로 애니메이션 실현. 여기에서는 정의 된 커스텀 경로에는 직선, 다중 직선 모션 조합이 포함되며,이 애니메이션은 다음과 같습니다.

그렇다면 캔버스에서 어떻게이 애니메이션 효과를 달성 할 수 있습니까? 실제로 SVG는 경로 처리에 매우 좋습니다. 캔버스에서 SVG의 힘을 사용해야합니다.

애니메이션을 만들기 전에 애니메이션의 경로를 먼저 가져와야합니다. SVG API 만 사용하므로 페이지에 삽입 할 필요가 없습니다.

 Const Path = 'M0,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861 128,92 C150.09139 160,72 160,56 C1 60,40,24,244 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,733.90861 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; pathElement.setattributens (null, 'd', path);

SVGPathelement에서 제공하는 두 가지 API는 경로 애니메이션을 실현하는 핵심 장소라고 말할 수 있습니다 (SVG의 사용자 정의 경로를 실현하는 것은 일반적 으로이 두 API를 통해 해결).

getToTallength 메서드는 SVGPathElement의 총 길이를 얻을 수 있습니다

getpointtlength 방법은 길이 x로 전달되며, 이는 SVGPathelement의 시작점의 최종 좌표를 반환합니다.

이 두 API를 사용하여 사이클을 통해 캔버스로 그려진 그래픽 좌표를 지속적으로 업데이트하면 경로 애니메이션을 달성 할 수 있습니다.

 const 길이 0; const 타이머 = setInterval (function () {if (time <= duration) {const x = pathElement (pathElement.getPointTlength (step) .x); const y = p arseint (pathElement.getPointTlength (step) .y); 이동 (x, y); , 컨텍스트. ClosePath ();}

마지막으로 캔버스에서 사용자 정의 애니메이션을 실현하는 간단한 기능을 실현하기 위해이를 캡슐화합니다.

 custmepath (path, func) {const forms.createelementns ( 'http://www.w3.org/2000/svg', 'd'); const duration = 1000; step) .x); const y = parseint (pathelement.getpointtlength (step) .y); 'M0, 0 C8,33.9961 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90862 128,92 C150.09139,72 160,56 C16014141414141414141414141414141041414141414141414141414114 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,330919, 548.091999919. 96 208,96 L48,96 C25.90861,96 8,78.09139 Const Cantvas ( 'Cantvas'); {context.clearRect (0, 0, Canvas.Width, Canvas.height);

아이디어를 구현하는 것은 위에서 설명한대로 대략적으로 이루어 지지만 이것이 궁극적 인 결과는 아닙니다. 우리는 캔버스에서 사용자 정의 경로 애니메이션을 만들기로 결정할 때이를 달성하는 방법을 고려해야합니다. 예를 들어이 구현 사고에서 불필요한 렌더링 시간을 줄일 수 있습니까? 프레임 속도를 최적으로 제어하는 ​​방법? 등.

그들은이 기사에 대한 토론의 범위에 있지는 않지만, 생각할 가치가 있습니다.

위는이 기사의 모든 내용입니다.