التعليم: مورفينج

إحداث تحولات في الشكل وتصويرات متعددة العناصر.

** 20 دقيقة صعوبة: السلف

ما ستصنعه

سلسلة دينامية حيث يتحول المورف إلى بعضها البعض بينما يكشف النص بتوقيت مذهل.

المعالم المشمولة

• المورفين الشبيه - الانتقال السلس بين مختلف الأشكال
• تقديرات مبالغ فيها - توقيت متعاقب للعناصر المتعددة
• تحولات الكولور - تغيرات اللون المتحرك
• يكشف ماسك - الممسحة السينمائية وآثار الأهوار
• تسلسلات مصورة - رقصة متعددة العناصر محددة زمنياً

الجزء 1: شارب مورفينج

الخطوة 1: إنشاء نموذج المصدر

1. إنشاء دائرة في المركز:
   • Radius: 80
   • Color: #3b82f6 (blue)
   • Position: (400, 300)

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

الخطوة 2: إيجاد الهدف

1. إنشاء نجم (سيكون هدف المورف):
   • النقاط: 5
   • Radius: 100
   • Color: #f59e0b (amber)
   • Position: (400, 300)

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

الخطوة 3: إضافة ربط المورف

The morphs_to relation creates smooth shape transitions:

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: المورف المتعددة الجوانب

Create a morphing sequence: Circle Star Triangle Circle

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: تنقيح النص

الخطوة 5: إعداد رسالة تجميعية

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

الخطوة 6: التقدير المطبق

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: استعراضات ماسك

الخطوة 7: إضافة ريفية درامية

اعيدي تشكيلة المورفين مع تأثير ايريس:

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

الخطوة 8: إعادة تأهيل الزوجات

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

Mask Presets

الجزء 4: التخصيص الكامل

التضحية الكاملة

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

ضوابط التصدير

لأفضل النتائج مع تقديرات المورفين:

Pro Tips

التوقيت المتوسط - بدء المحاكاة التالية من 0.1 إلى 0.2 قبل النهاية السابقة للتدفق غير المستقر.

استخدام الألوان التكميلية المورف المشابهة تبدو أفضل عندما تتحول بين الألوان التي تعمل بشكل جيد معاً.

تسلسل مركزي للتأثير - يوجّه نمط الخيول في المقر إلى منتصف النص.

تكشف شركة ماتش عن محتواها - استخدام iris للتشكيلات الدائرية، wipeLeft للنص.

الفرق

رمز رؤية البيانات

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

الخطوات التالية

• ]تقديرات فيزياء[ )/tutorials/physics-animation( - التأثيرات المرنة
• )المقر الرئيسي( - قصة البيانات الجغرافية
• ]نظام المواصلة[ )المعيار /features/masking( - تقنيات كشف متقدمة