آموزش: Morphing & Sequenced Animations

ایجاد تغییرات شکل و انیمیشن های چند مرحله ای.

• زمان: 20 دقیقه *سختی: ** پیشرفته پیشرفته پیشرفته

آنچه شما ایجاد می کنید

یک توالی پویا که در آن شکل به یکدیگر در حالی که متن با زمان بندی روشن نشان می دهد.

ویژگی های Covered

• • مورفینگ شکل - انتقال آهسته بین اشکال مختلف
• ** انیمیشن های فشرده - زمان بندی برای عناصر متعدد
• انتقال رنگی تغییر رنگ گرادی متحرک
• Mask نشان می دهد - اثرات محو و عنفاتیک
• • توالی های تنظیم شده * - دقیقا زمان بندی رقص چند نفره

قسمت 1: شکل مورفین

مرحله 1: ایجاد منبع شکل

1. ایجاد یک دایره در مرکز:
   • رادیو: **80
   • رنگ: #3b82f6 (آبی)
   • Position: (400, 300)

const circle = app.create('circle', {
  x: 400, y: 300,
  radius: 80,
  color: '#3b82f6'
});

مرحله دوم: Create Target Shape

1. ساخت یک ستاره (هدف مورفی خواهد بود):
   • امتیاز: 5
   • رای گیری: 100
   • رنگ: #f59e0b (amber)
   • Position: (400, 300)

const star = app.create('star', {
  x: 400, y: 300,
  points: 5,
  radius1: 100,
  radius2: 40,
  color: '#f59e0b'
});

مرحله 3: Add Morph relationship

رابطه 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
});

مرحله ۴: RNA Multi Morphs

یک توالی مورفینگ ایجاد کنید: Circle → Star

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
});

قسمت دوم: Staggered Text Reveal

مرحله پنجم: ایجاد نامه Collage

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

مرحله 6: استفاده از Staggered Animation

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'
});

الگوهای توالی

قسمت 3: ماسک Reveals

مرحله 7: اضافه کردن درامتیک Reveal

شکل مورفینگ را با اثر ایریس بازسازی کنید:

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

مرحله 8: Wipe Reveal for Text

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

ماسک های موجود

قسمت چهارم: Full Choreography

Full Animation Script

// === 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);

تنظیمات صادرات

برای بهترین نتایج با انیمیشن های مورفینگ:

نکات مقدماتی

• اضافه کردن زمان بندی - انیمیشن بعدی 0.1-0.2 را قبل از پایان قبلی برای جریان بدون درز شروع کنید.

• استفاده از رنگ های مکمل ** Shape مورفس بهترین زمان برای انتقال بین رنگ هایی است که به خوبی با هم کار می کنند.

** توالی مرکزی برای تاثیر - الگوی center stagger توجه را به وسط متن جلب می کند.

**Match به محتوا نشان می دهد - از iris برای شکل های دایره ای، wipeLeft برای متن استفاده کنید.

تغییرات

Data Visualization 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'
});

انیمیشن های Logo Animation 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' }
  ]);
});

گام های بعدی

• [Physics Animation] (/tutorials/physics-animation) - پرش و اثرات الاستیک
• [Map Animations] (/tutorials/map-animation) - داستان سرایی داده های جغرافیایی
• [سیستم حمل و نقل] (/features/masking) - تکنیک های پیشرفته آشکار