튜토리얼: Morphing & Sequenced 애니메이션

7 min read

모양 변환 및 choreographed multi-element 생기를 창조하십시오.

시간: 20분 어려움: 지원하다

당신이 만든 것

텍스트가 눈에 띄는 타이밍으로 밝혀지는 동안 서로 변종하는 동적 순서.

사이트맵 사이트맵 사이트맵 사이트맵 귀하의 브라우저는 비디오를 지원하지 않습니다. 비디오다운로드. 사이트맵

Shape morphing 와 staggered 텍스트 reveal
사이트맵

특징 적용

  • Shape morphing - 다른 모양 사이 매끄러운 전환
  • Staggered Animations — 여러 요소에 대한 엄격한 타이밍
  • 색상 전환 - 애니메이션 기온변화도 색상 변경
  • 마스크는 - Cinematic 와이퍼 효과
  • Choreographed sequences — 정확하게 타임 멀티 엘리먼트 댄스

부분 1: 모양 Morphing

1 단계 : 소스 모양 만들기

  1. 중심의 원 만들기:
    • 반경: 80
    • 색깔: #3b82f6 (파란색)
    • Position: (400, 300)
const circle = app.create('circle', {
  x: 400, y: 300,
  radius: 80,
  color: '#3b82f6'
});

Step 2: 대상 모양 만들기

  1. 별 만들기 (morph 대상이 될 것입니다) :
    • 점수: 5
    • 반경: 100
    • 색깔: #f59e0b (마이크로)
    • Position: (400, 300)
const star = app.create('star', {
  x: 400, y: 300,
  points: 5,
  radius1: 100,
  radius2: 40,
  color: '#f59e0b'
});

단계 3: Morph 관계 추가

morphs_to 관계는 매끄러운 모양 전환을 만듭니다:

app.addRelation(circle.data.id, star.data.id, 'morphs_to', {
  duration: 1.5,
  easing: 'easeInOut',
  morphColor: true,   // Also transition colors
  morphSize: true     // Also transition size
});

단계 4: 사슬 다수 Morphs

변형 순서 만들기: 원 → 별 → 삼각형 → 원

const shapes = [];

// Circle
shapes.push(app.create('circle', {
  x: 400, y: 300, radius: 80, color: '#3b82f6'
}));

// Star
shapes.push(app.create('star', {
  x: 400, y: 300, points: 5, radius1: 100, radius2: 40,
  color: '#f59e0b', opacity: 0
}));

// Triangle
shapes.push(app.create('triangle', {
  x: 400, y: 300, radius: 90,
  color: '#10b981', opacity: 0
}));

// Hexagon (back to geometric)
shapes.push(app.create('polygon', {
  x: 400, y: 300, sides: 6, radius: 85,
  color: '#8b5cf6', opacity: 0
}));

// Chain morphs with delays
for (let i = 0; i < shapes.length - 1; i++) {
  app.addRelation(shapes[i].data.id, shapes[i + 1].data.id, 'morphs_to', {
    duration: 1.2,
    delay: i * 1.5,  // Stagger start times
    easing: 'easeInOut',
    morphColor: true
  });
}

// Loop back to first shape
app.addRelation(shapes[shapes.length - 1].data.id, shapes[0].data.id, 'morphs_to', {
  duration: 1.2,
  delay: (shapes.length - 1) * 1.5,
  easing: 'easeInOut',
  morphColor: true
});

부분 2: 비틀어진 텍스트 Reveal

단계 5: 편지 교원질을 창조하십시오

const collage = app.letterCollage.create('TRANSFORM', {
  style: 'gradient',
  gradientPalette: 'cyberpunk',
  gradientDirection: 'horizontal',
  fontSize: 64,
  x: 400, y: 500
});

6 단계 : Staggered 애니메이션 적용

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.06,    // 60ms between letters
  duration: 0.5,
  sequence: 'center',     // Start from center, expand outward
  easing: 'easeOut'
});

Sequence 패턴

제품 정보 제품 정보
사이트맵 오른쪽으로
사이트맵 왼쪽으로
사이트맵 공지사항
사이트맵 무작위 순서
사이트맵 Sine 파 타이밍
사이트맵 자연 리듬

부품 3: 마스크 Reveals

단계 7: 드라마 공개 추가

Morphing 모양을 iris 효과 수정:

// Apply animated mask to the shape container
app.applyAnimatedMask(shapes[0], 'iris', {
  startTime: 0,
  duration: 0.8,
  easing: 'easeOut'
});

8 단계 : Wipe 텍스트에 대한 공개

// Reveal text with horizontal wipe
app.applyAnimatedMask(collage.group, 'wipeLeft', {
  startTime: 0.5,  // Start after shape reveals
  duration: 0.6,
  easing: 'easeInOut'
});

유효한 가면 Presets

공지사항 제품 정보
사이트맵 센터 확장
사이트맵 왼쪽에서 수평한 표시
사이트맵 수직은 바닥에서 밝혀
사이트맵 스타 모양 팽창
사이트맵 심장 모양 팽창
사이트맵 본문 바로가기
사이트맵 각도 표시

부분 4: 완전한 Choreography

전체 애니메이션 스크립트

// === SETUP ===
app.setCanvasSize({ width: 800, height: 600 });
app.setBackgroundColor('#0f172a');

// === MORPHING SHAPES ===
const shapeColors = ['#3b82f6', '#f59e0b', '#10b981', '#8b5cf6'];
const shapeTypes = ['circle', 'star', 'triangle', 'polygon'];

const mainShape = app.create('circle', {
  x: 400, y: 250,
  radius: 80,
  color: shapeColors[0]
});

// Keyframe the shape through color transitions
app.addAnimation(mainShape.data.id, [
  { time: 0, properties: { fillColor: '#3b82f6', scale: 1 } },
  { time: 1.5, properties: { fillColor: '#f59e0b', scale: 1.2 }, easing: 'easeInOut' },
  { time: 3, properties: { fillColor: '#10b981', scale: 0.9 }, easing: 'easeInOut' },
  { time: 4.5, properties: { fillColor: '#8b5cf6', scale: 1.1 }, easing: 'easeInOut' },
  { time: 6, properties: { fillColor: '#3b82f6', scale: 1 }, easing: 'easeInOut' }
]);

// Add rotation for visual interest
app.addAnimation(mainShape.data.id, [
  { time: 0, properties: { rotation: 0 } },
  { time: 6, properties: { rotation: 360 }, easing: 'linear' }
]);

// === IRIS REVEAL FOR SHAPE ===
app.applyAnimatedMask(mainShape, 'iris', {
  startTime: 0,
  duration: 0.6,
  easing: 'easeOut'
});

// === STAGGERED TEXT ===
const title = app.letterCollage.create('TRANSFORM', {
  style: 'tile',
  palette: 'neon',
  fontSize: 56,
  x: 400, y: 480
});

app.letterCollage.applyStaggeredAnimation(title.collageId, {
  effect: 'popIn',
  staggerDelay: 0.05,
  duration: 0.4,
  sequence: 'center',
  easing: 'elastic'
});

// === ORBITING ACCENTS ===
const orbitColors = ['#f472b6', '#34d399', '#fbbf24'];
orbitColors.forEach((color, i) => {
  const dot = app.create('circle', {
    x: 400, y: 250,
    radius: 6,
    color: color
  });

  app.addRelation(dot.data.id, mainShape.data.id, 'orbits', {
    radius: 120 + i * 25,
    speed: 0.4 - i * 0.1,
    phase: i * (Math.PI * 2 / 3)
  });

  // Fade in the orbiting dots
  app.addAnimation(dot.data.id, [
    { time: 0.8 + i * 0.2, properties: { opacity: 0, scale: 0 } },
    { time: 1.2 + i * 0.2, properties: { opacity: 1, scale: 1 }, easing: 'elastic' }
  ]);
});

// === CAMERA MOVEMENT ===
app.addRelation('camera', null, 'camera_animates', {
  duration: 6,
  loop: true,
  keyframes: [
    { time: 0, zoom: 1, center: [400, 300] },
    { time: 1.5, zoom: 1.15, center: [400, 280], easing: 'easeOut' },
    { time: 3, zoom: 1.05, center: [400, 320], easing: 'easeInOut' },
    { time: 4.5, zoom: 1.1, center: [400, 300], easing: 'easeInOut' },
    { time: 6, zoom: 1, center: [400, 300], easing: 'easeOut' }
  ]
});

// === PLAY ===
app.playKeyframeTimeline(6, true);

수출 설정

Morphing 생기를 가진 제일 결과를 위해:

설치하기 제품정보 레아슨
지원하다 사이트맵 Gradients에 대 한 최고의 품질
프레임 속도 60 fps 연락처
이름 * 6 초 풀 루프 사이클
품질 관리 사이트맵 보존 색상 전환

Pro 팁

Overlap 타이밍 - 이전의 끝 앞에 다음 애니메이션 0.1-0.2s를 시작하십시오.

보완 색상 사용 — 모양 morphs는 잘 작동하는 색깔 사이에서 전환할 때 베스트를 봅니다.

충격을 위한 중심 순서 — center stagger 본은 텍스트의 중간에 주의합니다.

컨텐츠에 표시 — iris를 원형 모양, 텍스트 wipeLeft를 사용합니다.

관련 기사

데이터 시각화 Morph

// Bar chart to pie chart transition
const bars = createBarChart(data);
const pie = createPieChart(data);

app.addRelation(bars.data.id, pie.data.id, 'morphs_to', {
  duration: 2,
  easing: 'easeInOut'
});

로고 애니메이션 Sequence

// Logo parts appear in sequence
const logoParts = [shape1, shape2, shape3, text];

logoParts.forEach((part, i) => {
  app.addAnimation(part.data.id, [
    { time: i * 0.3, properties: { opacity: 0, scale: 0.5 } },
    { time: i * 0.3 + 0.4, properties: { opacity: 1, scale: 1 }, easing: 'elastic' }
  ]);
});

다음 단계