آموزش: ایجاد یک پست انگیزشی متحرک

یاد بگیرید که یک نقل قول انگیزشی متحرک چشم نواز برای داستان های اینستاگرام با استفاده از انیمیشن های Collage ایجاد کنید.

• زمان: 10 دقیقه
• دشوار: ** مبتدی

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

یک نقل قول انگیزشی متحرک خیره کننده با سه عبارت، هر کدام با استفاده از سبک های مختلف دایره نامه و انیمیشن های آشکار.

Zq0q Studal نقل قول با حروف کلاژ اثراتZq1q

ویژگی هایی که خواهید آموخت

• • سبک های Collage - کاشی های نئون، برش مجله، اثرات برش کاغذ
• ** انیمیشن های شگفت انگیز - نامه هایی که یکی از آنها به نظر می رسد
• ** سازندگان Background – Animated Sunburst
• • انیمیشن های کلیدی فریم - انتقال رنگ و اثرات جرقه

مرحله 1: Set Up Canvas

1. Open PinePaper Editor
2. بر روی ** کاهش اندازه can در پا
3. گزینه **Instagram Story (1080×1920)

مرحله 2: Add Animated background

1. روی برگه Scenes در پانل راست کلیک کنید
2. گزینه Background Mode to **Generator
3. گزینه Sunburst
4. رنگ ها را شکل دهید:
   • رنگ 1: #FF6B6B (کلید قرمز)
   • رنگ دوم: #4ECDC4 (teal)
   • رنگ 3: #FFE66D ( زرد)
5. دانلود بازی Ray Count - 16
6. *Animate ** و تنظیم سرعت: 0.5
7. Click **Generate

Zq0q Studing Sunburst با رنگ های پر جنب و جوش Zq1q

مرحله 3: ایجاد نامه بزرگ “DREAM”

1. روی دکمه *Letter Collage ** در نوار ابزار (یا مطبوعات L) کلیک کنید
2. نوع: **DREAM بزرگ
3. شکل دادن به سبک:
   • سبک: Tile
   • برچسب ها: **Neon
   • اندازه فونت: **72
   • دانلود زیرنویس فارسی فیلم Corner Radius 8
   • گزینه Shadow
4. موقعیت در منطقه مرکزی (x: 540، Y: 750)

معادل کد:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

مرحله 4: اضافه کردن انیمیشن به “DREAM BIG”

1. با کلاژ انتخاب شده، پنل **Timeline را باز کنید
2. • Add Staggered Animation
3. شکل:
   • اثر: **Pop In
   • دانلود زیرنویس فارسی فیلم Stagger Delay
   • مدت زمان: ** 0.5٪
   • نام انگلیسی: Linear (چپ به راست)
   • دانلود موسیقی متن فیلم | Easing

معادل کد:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

مرحله پنجم: ایجاد نامه “مشارکت”

1. نامه دیگری را با:

   • بایگانی برچسب ها: ** Extensions
   • سبک: Magazine (نگاه یادداشت برداری)
   • برچسب ها: **Magazine
   • اندازه فونت: ** 60
   • موقعیت: (۴۰, 920)

2. اضافه کردن انیمیشن:

   • اثر: **Fade Slide Up
   • دانلود بازی Stagger Delay
   • دانلود بازی Sequence: **Wave

معادل کد:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

مرحله 6: ایجاد نامه “STAY HUMBLE”

1. نامه سوم را ایجاد کنید:

   • بایگانی برچسب ها: **STAY HUMBLE
   • سبک: ** اثر سایه (3D)
   • اندازه فونت: **68
   • موقعیت: (530, 1100)

2. اضافه کردن انیمیشن با پرش:

   • اثر: **Pop In
   • دانلود زیرنویس فارسی فیلم Stagger Delay
   • دانلود زیرنویس فارسی فیلم Squence: Center
   • بایگانی برچسب ها: **Bounce

معادل کد:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

مرحله 7: اضافه کردن خط مشی مقدماتی

1. ایجاد یک مستطیل برای یک تقسیم کننده تزئینی:

   • عرض: 500، ارتفاع: 8
   • رنگ: سفید (#FFFFFF)
   • موقعیت زیر عبارت ها

2. اضافه کردن انیمیشن کلیدی برای تپ اختر رنگی:

معادل کد:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

مرحله 8: Preview و Play

1. Press Space برای بازی انیمیشن
2. Timeline یک حلقه 6 ثانیه ای را نشان می دهد
3. مشاهده کنید:
   • “DREAM BIG” در نامه با حروف
   • “Media HARD” با یک اثر موج بالا می رود
   • “STAY HUMBLE” از مرکز خارج می شود

مرحله 9: صادرات

برای Instagram Story (Video)

1. Click Export Button
2. گزینه WebM (recommend) یا MP4
3. شکل:
   • مدت زمان: **6 ثانیه
   • نرخ فریم: **30 fps
   • کیفیت: ** بالا
4. Click Export و منتظر دانلود

برای پلتفرم های دیگر

کد کامل

این کد کامل برای بازسازی این انیمیشن است:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

شروع سریع: از قالب استفاده کنید

به جای ساخت از ابتدا، قالب قبل ساخته شده را بارگذاری کنید:

1. باز ** پانل * (right sidebar)
2. انتخاب دسته: رسانه های اجتماعی
3. گزینه **Motivational Citation
4. قالب با تمام انیمیشن های آماده می شود

نامه Collage Styles مرجع

الگوی صعود

نکات مقدماتی

** برخلاف مسائل - متن نور در زمینه های تاریک (یا برعکس) برای قابل خواندن ضروری است.

• زمان بندی دقیق - 0.05-0.1s بین نامه ها طبیعی است. خیلی سریع مکانیکی به نظر می رسد.

• سبک های Mix ** استفاده از سبک های مختلف Collage برای هر عبارت، علاقه بصری را اضافه می کند.

• برای تاکید - bounce کاهش در “STAY HUMBLE” توجه اضافی را جلب می کند.

گام های بعدی

• [Letter Collage Reference] (/features/letter-collage) - تمام سبک ها و گزینه ها
• [Xframe Editor] (/features/keyframes) - کنترل زمان بندی سفارشی
• (/features/effects) – جرقه ها و برجسته ها را اضافه کنید
• [Physics Animation] (/tutorials/physics-animation) - اثرات کاهش پیشرفته