사용자 효과 만들기

사용자 효과는 두 개의 완전한 애니메이션으로 구성됩니다. Vanilla Disintegrate는 지오메트리, 캡처, 취소, 정리 및 오디오 연결 계약을 제공하며 렌더러와 사운드는 모두 사용자가 선택합니다.

두 단계 정의

import { defineEffect } from 'vanilla-disintegrate';

function createLayerClone(element: HTMLElement, layer: HTMLElement) {
  const visual = element.cloneNode(true) as HTMLElement;
  Object.assign(visual.style, {
    height: '100%',
    inset: '0',
    margin: '0',
    pointerEvents: 'none',
    position: 'absolute',
    width: '100%',
  });
  layer.append(visual);
  return visual;
}

const pulse = defineEffect({
  remove: {
    needsSnapshot: false,
    animate({ element, layer }) {
      return createLayerClone(element, layer).animate(
        [
          { opacity: 1, transform: 'scale(1)' },
          { opacity: 0, transform: 'scale(.6) rotate(8deg)' },
        ],
        { duration: 420, easing: 'cubic-bezier(.4, 0, 1, 1)' },
      );
    },
  },
  restore: {
    needsSnapshot: false,
    animate({ element, layer }) {
      return createLayerClone(element, layer).animate(
        [
          { opacity: 0, transform: 'scale(.6) rotate(-8deg)' },
          { opacity: 1, transform: 'scale(1) rotate(0)' },
        ],
        { duration: 520, easing: 'cubic-bezier(0, 0, .2, 1)' },
      );
    },
  },
});

effects.remove(element, { effect: pulse });
effects.restore(insertedElement, { effect: pulse });

needsSnapshot: false는 해당 단계에서 capture와 SnapDOM이 호출되지 않음을 보장합니다.

애니메이션 컨텍스트

팩토리는 operation, 실제 element, 최종 bounds, 격리된 layer, snapshot, 지연 생성 visual, AbortSignal, random(), reducedMotion, addCleanup(fn)을 받습니다.

복원 시 bounds는 삭제 전 위치가 아닌 삽입 후 새 위치를 나타냅니다.

반환 값

Web Animation, Promise, null 또는 finished, cancel(), dispose()를 가진 컨트롤러를 반환할 수 있습니다. CSS/WAAPI, Canvas, SVG, WebGL, 서드파티 엔진을 모두 연결할 수 있습니다.

const effects = new Disintegrator({
  effects: { pulse },
  effect: 'pulse',
});

직접 전달한 효과와 등록된 이름은 같은 계약을 사용합니다.

사용자 사운드

const effect = defineEffect({
  remove: {
    animate: removeAnimation,
    sound: { src: '/sounds/remove.ogg', gain: 0.35 },
  },
  restore: {
    animate: restoreAnimation,
    sound: ({ signal }) => startMyAudioEngine(signal),
  },
});

URL, ArrayBuffer, AudioBuffer, 옵션 객체, 사용자 플레이어 팩토리를 지원합니다. 오디오 오류는 시각 또는 DOM 작업을 중단하지 않습니다.