JavaScript의 화면 보호기

우리 모두는 운영 체제의 화면 보호기를 잘 알고 있습니다. 이 게시물에서는 Javascript를 사용하여 웹 애플리케이션에서 이러한 기능을 구현하는 방법을 보여주고자 합니다. 내가 제시하는 애니메이션은 매우 정교하고 복잡하지는 않지만 여기에서 자신만의 더 복잡한 솔루션을 구현하기 시작할 수 있는 곳입니다.

여기에 제시된 코드는 내 첫 번째 코드npm package의 일부이며 귀하의 웹사이트에서 재사용될 수 있습니다.

클래스 속성

먼저 몇 가지 클래스 속성을 정의했습니다.

interface BaseConfig {
  text?: string
  background?: string
  baseElement?: HTMLElement | Element
  backgroundImg?: string
  animationSpeed?: 'slow' | 'regular' | 'fast'
  customElement?: HTMLElement | Element | string,
  triggerTime?: number,
}

class JsScreensaver {
  private config: BaseConfig = baseConfig;
  private windowDimensions: IDimensions = {width : 0, height : 0};
  private playAnimation: boolean = true;
  private screensaverElement: HTMLElement = document.body;
  private eventsList: string[] = ['keydown', 'mousemove'];
  private defaultScreensaver: string = `
    <div class="screensaver__element-wrapper">
      <div class="screensaver__element-content">
        <p class="screensaver__element-text"></p>
      </div>
    </div>
  `

BaseConfig 인터페이스에서 화면 보호기 구성에 전달할 수 있는 모든 옵션을 나열했습니다.
화면 보호기는 start() 메서드로 초기화됩니다. 인수로 전달된 옵션이 없으면 baseConfig가 로드됩니다.

  start(config?: BaseConfig): void {
    this.config = {...baseConfig, ...config};
    this.setActionsListeners();
  }

다음 단계에서는 이벤트에 대한 리스너가 추가됩니다. 화면 보호기는 triggerTime 속성에 정의된 시간(밀리초) 후에 켜집니다. 기본값은 2초로 설정되어 있습니다. 배열의 각 이벤트(keyup 및 mousemove)에 대해 addEventListener가 설정되며 특정 시간 후에 화면 보호기 컨테이너를 생성하는 콜백 함수가 있습니다. 이벤트가 트리거되면 시간 제한이 지워지고 화면 보호기 요소가 제거됩니다.

  private stopScreensaverListener() {
    this.eventsList.forEach(event => window.addEventListener(event, (e) => {
      e.preventDefault();
      this.playAnimation = false;
      this.screensaverElement.remove();
    }));
  }

  private setActionsListeners() {
    let mouseMoveTimer: ReturnType<typeof setTimeout>;
    this.eventsList.forEach(event => window.addEventListener(event, () => {
      clearTimeout(mouseMoveTimer);
      mouseMoveTimer = setTimeout(() => {
        this.createContainer();
      }, this.config.triggerTime)
    }))
  }

stopScreensaverListener 메서드는 createContainer 에서 트리거됩니다. 후자는 적절한 클래스와 스타일을 사용하여 DOM 요소를 만듭니다. 화면 보호기 컨테이너 및 요소(이 경우 직사각형)는 기본적으로 본문에 추가되지만 다른 컨테이너를 정의하여 baseElement 속성의 구성에 전달할 수 있습니다.

여기에서 애니메이션이 트리거됩니다. 지금은 이 패키지에서 사용할 수 있는 애니메이션이 하나만 있습니다. 내부에 텍스트가 있는 화면 주위를 튀는 사각형입니다. 미리 정의된 애니메이션을 더 추가하여 이 패키지를 확장하고 싶습니다. 또한 사용자는 자체 애니메이션도 정의할 수 있어야 합니다. 그러나 그것은 가까운 장래에 개발되어야 할 것입니다. 아니, 기존 애니메이션에 집중하자.
내 previous post에서 설명한 requestAnimationFrame API를 사용합니다. 그 게시물에서 나는 같은 애니메이션을 보여주었다.
이 패키지에서는 약간 향상되었습니다.

  private runAnimation(element: HTMLElement): void {
    this.playAnimation = true;
    element.style.position = 'absolute';

    let positionX = this.windowDimensions.width / 2;
    let positionY = this.windowDimensions.height / 2;
    let movementX = this.config.animationSpeed ? speedOptions[this.config.animationSpeed] : speedOptions.regular;
    let movementY = this.config.animationSpeed ? speedOptions[this.config.animationSpeed] : speedOptions.regular;

    const animateElements = () => {
      positionY += movementY
      positionX += movementX

      if (positionY < 0 || positionY >= this.windowDimensions.height - element.offsetHeight) {
        movementY = -movementY;
      }
      if (positionX <= 0 || positionX >= this.windowDimensions.width - element.clientWidth) {
        movementX = -movementX;
      }

      element.style.top = positionY + 'px';
      element.style.left = positionX + 'px';

      if (this.playAnimation) {
        requestAnimationFrame(animateElements);
      }
    }
    requestAnimationFrame(animateElements)
  }

사각형의 시작 위치는 가운데로 설정됩니다. 이는 positionX 및 positionY 변수에서 계산됩니다. movement는 개체가 모든 프레임에서 이동할 픽셀 수를 나타냅니다. 여기서는 구성의 값을 사용하여 사용자가 이동 속도를 설정할 수 있도록 했습니다. 모든 프레임에서 사각형의 위치가 컨테이너 내부에 있는지 또는 컨테이너의 테두리에 닿는지 여부를 확인합니다. 중단점 값에 도달하면 이동 값이 반대로 설정되어 반대 방향으로 모션이 생성됩니다.

용법

스크린세이버 사용법은 매우 간단합니다. 전체 클래스를 내보냅니다.

const classInstance = new JsScreensaver();
export { classInstance as JsScreensaver };

따라서 import { JsScreensaver } from "../js-screensaver";를 사용하여 코드의 어딘가에 클래스를 가져오기만 하면 됩니다.
그리고 구성과 함께 start() 방법을 사용하십시오(또는 구성을 비워 두십시오).

JsScreensaver.start({
  text: "Hello Screensaver",
  customElement: document.querySelector('.screen-saver'),
  triggerTime: 4000,
  animationSpeed: 'slow'
});

customElement 속성을 사용하면 자체 프로젝트의 HTML 또는 구성 요소에서 화면 보호기를 만들 수 있습니다. 따라서 프로젝트에 있는 스타일로 사용자 정의된 요소를 삽입할 수 있습니다.

결론

이것이 최종 결과입니다. 맞춤 HTML, 스타일, 텍스트가 포함된 화면 보호기입니다.


이 게시물에 모든 코드 줄을 표시하지는 않았습니다. 전체 프로젝트를 사용할 수 있으므로here 모든 방법과 구성을 확인할 수 있습니다. 이 패키지는 매우 간단하고 지금까지 사용자 정의할 수 있는 것이 많지 않지만 잠재력이 있습니다 ;-).