تراویح (انگریزی: Morphing & Sequenced Animations) ہے۔

شکل میں تبدیلی پیدا کریں اور بار بار پیدا کریں.

مسئلہ : 20 منٹ کے بعد غلط‌فہمی : نیچے اعلی

آپ کیا بنائیں گے

ایک ایسا عمل جس میں ایک دوسرے میں مُصوّر کی شکلیں ملتی ہیں جبکہ عبارت وقت کے ساتھ ظاہر کرتی ہے ۔.

پوشیدہ چیزوں

• [ تصویر کا حوالہ ]
• کئی عناصر کے لئے وقت
• [ تصویر کا حوالہ ]
• [ تصویر کا حوالہ ]
• [ تصویر کا حوالہ ]

حصہ 1: شاپنگ

پہلا قدم : صابن بنانا

1. مرکزی سطح پر حلقہ بنائیں:
   • حدیث: حدیث 80 نیچے ہے۔
   • رنگ : #3b82f6 (G)
   • Position: (400, 300)

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

ہدایت ۲ : ۷ - ۹

1. ستارہ بنائیں (جو مربوط ہدف ہو):
   • متناسقات:
   • حد سے زیادہ پانی
   • رنگ : #f59e0b (mber)
   • Position: (400, 300)

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

اِس ہدایت پر عمل کریں :

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

اِس ہدایت پر عمل کریں :

ماورافنگ رسم بنائیں: حلقہ این اے سی آرک آئی ڈی:

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

حصہ ۲ : ٹھوس متن آشکارا کرتا ہے

اِس ہدایت پر عمل کریں :

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

ہدایت : اِس ہدایت پر عمل کریں :

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

تعصب

۳ تیسرا حصہ

ہدایت 7 : ڈرامائی انکشاف

مریخ کی شکل کو ایک باریک اثر سے ظاہر کریں:

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

اِن آیتوں کو پڑھیں ۔

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

دستیاب مَیں

حصہ ۴ : مکمل کریں

مکمل انیمیشن اسکرپٹ

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

ترتیبات محفوظ کریں

ماورافنگ انیمیشن کے ساتھ بہترین نتائج کے لئے:

پرنٹ

[ صفحہ ۷ پر تصویر ].

غیر واضح طور پر رنگوں کا مرکب — شاپنگ مورف جب رنگوں کے درمیان عبور کرتے ہیں تو اچھا لگتا ہے کہ ایک دوسرے کے ساتھ اچھی طرح کام کرتے ہیں۔.

اِس سے ظاہر ہوتا ہے کہ اِس آیت میں لکھا ہے : ” [ یہوواہ ] . . .

[ تصویر کا حوالہ ].

جمع

اعداد و شمار معارف

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

اگلے قدم

• physics Animation — Bounce and effective اثرات
• Map Anymations — Geographical data نگاری
• Mosstrial System — پروڈیوس کردہ تکنیکوں کو ظاہر کرتا ہے۔