ScheduleJS에서 애니메이션 그리기

ScheduleJS는 HTML Canvas 렌더링 엔진을 사용하여 그리드, 활동, 추가 레이어 및 링크를 그립니다. 이 문서에서는 HTML Canvas API를 사용하여 간단한 ScheduleJS 렌더링 애니메이션을 디자인하는 방법을 설명합니다

HTML 캔버스에 대한 몇 마디

이전에 Canvas 기술을 사용해 본 적이 있나요? 캔버스 요소는 브라우저에 비해 놀라울 정도로 저렴한 비용으로 JavaScript를 사용하여 프로그래밍 방식으로 그리는 데 사용되는 HTML 컨테이너입니다.

캔버스 요소의 가장 큰 특징은 디자인과 상호 작용 측면에서 그 가능성이 무한하다는 것입니다. 화면에 보이는 것의 유일한 한계는 우리의 상상력입니다.

캔버스 요소에 머리를 감고 싶다면 빈 도화지에 비유할 수 있습니다.

MDN 웹 문서에 따르면:

MDN: Canvas API는 JavaScript와 HTML 캔버스 요소를 통해 그래픽을 그리는 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 비디오 처리에 사용할 수 있습니다.

Canvas API는 주로 2D 그래픽에 중점을 둡니다. 캔버스 요소도 사용하는 WebGL API는 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

ScheduleJS는 이를 어떻게 사용합니까?

캔버스에 활동을 그린 후에 이를 변경하는 유일한 방법은 캔버스를 정리하고 다시 그리기 시작하는 것입니다.

내부적으로 ScheduleJS는 일정 관리 애플리케이션의 맥락에서 이 동작을 처리하기 위해 여러 도구를 구현합니다. 이러한 API는 때때로 개발자에게 노출되기도 하며 때로는 개발자가 다음과 같이 애플리케이션의 핵심 기능에 집중할 수 있도록 자동으로 작동합니다.

• System Layers API는 연속적인 도면과 스택 순서를 처리합니다.
• Viewport API는 렌더링과 탐색을 최적화합니다.
• Renderer API는 활동과 레이어가 그려지는 방식을 정의합니다.
• Redraw API를 원하는 대로 호출하여 다시 그리기, 행 작업 등을 실행할 수 있습니다…

이 아키텍처에서 개발자에게 가장 중요한 항목은 ScheduleJS Renderer API입니다. 렌더러는 재정의 가능한 기능을 사용하여 개발자가 애플리케이션의 특정 부분을 그리는 고유한 방법을 만들 수 있도록 합니다.

• 배경
• 더 그리드
• 활동
• 활동 링크
• 드래그 앤 드롭 레이어
• 그리고 모든 추가 시스템 계층

일부 사람들에게는 복잡해 보일 수도 있지만 개발자는 금방 익숙해질 워크플로입니다. 렌더러 아키텍처의 유연성과 신중한 구현을 통해 끝없는 디자인과 상호 작용 시나리오가 가능합니다.

ScheduleJS 활동 애니메이션

캔버스에 애니메이션을 적용하려면 애니메이션을 프레임 단위로 나누고 렌더러에게 각 프레임을 그리는 방법을 알려야 합니다. 간단한 선형 애니메이션을 만드는 데 필요한 주요 요소는 애니메이션이 시작된 시간입니다. 모든 활동을 자체적으로 애니메이션화하려는 경우 이 정보를 저장하기에 좋은 장소는 활동 데이터 구조입니다.

// A simple activity class storing the animation start date as a timestamp
export class MyActivity extends MutableActivityBase {
  animationStart: number = undefined;
}

애니메이션 진행에 따라 모든 프레임을 그리는 간단한 애니메이션 렌더러를 만들어 보겠습니다. 이 간단한 너비 애니메이션은 생성 활동(0% 너비에서 전체 너비까지)에 애니메이션을 적용합니다.

// Create our activity renderer for our simple animation
export class MyActivityRenderer extends ActivityBarRenderer<MyActivity, Row> {

  // Our animation takes 250ms
  private _animationDurationMs: number = 250;

  // Override the drawActivity method of the ActivityBarRenderer
  protected drawActivity(activityRef: ActivityRef<Action>, position: ViewPosition, ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, selected: boolean, hover: boolean, highlighted: boolean, pressed: boolean): ActivityBounds {

    // What time is it? :)
    const now = Date.now();

    // Access your activity in the renderer
    const activity = activityRef.getActivity();

    // Set animationStart timestamp
    if (activity.animationStart === undefined) {
      activity.animationStart = now;
    }

    // The animationTimer tells us the current frame
    const animationTimer = now - activity.animationStart;

    // Calculate the sequence: 0 = animation starts, 1 = animation ends
    const sequence = animationTimer / this._newActionAnimationDurationMs;

    // Let's play with the width: starts at 0%, ends at 100%
    w *= sequence > 1 ? 1 : sequence;

    // Note: Calling directly graphics.redraw() will cause an infinite loop
    requestAnimationFrame(() => { 
      // Force a redraw on every animation frame
      this.getGraphics().redraw();
      // Our custom drawing method
      this.drawMyActivity(activity, x, y, w, h, selected, hover, highlighted, pressed); 
    });

    return new ActivityBounds(activityRef, x, y, w, h);
  }

이 예제에서는 애니메이션을 실행하는 데 필요한 코드에 중점을 둡니다. 보시다시피, 애니메이션 지속 시간을 설명하는 비율(0에서 1까지)을 만들고 너비에 이 비율을 곱하면 됩니다. 결과적으로 활동 폭은 부드러운 250ms 애니메이션으로 확장됩니다(아래 참조).

ScheduleJS의 모든 그리기 레이어는 렌더러 아키텍처를 사용하고 유사한 그리기 방법을 구현하므로 동일한 원리를 사용하여 훨씬 더 많은 작업을 수행할 수 있습니다. 또한 다양한 접근 방식을 사용해도 동일한 결과를 얻을 수 있습니다. 어쨌든 어떤 그래픽 애니메이션을 제작하든 ScheduleJS 렌더러를 사용하면 픽셀 수준에서 사용자 경험을 디자인하고 맞춤 설정할 수 있습니다.

ScheduleJS에 대한 UX/UI 과제나 아이디어가 있으면 언제든지 문의해 주세요!

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