การ สอน: สร้าง โพสต์ แบบ เคลื่อน ไหว

เรียนรู้ที่จะสร้างภาพเคลื่อนไหวที่กระตุ้นการมองเห็น สําหรับเรื่องอินสตาแกรม โดยใช้แอนิเมชันของตัวหนังสือ.

เวลา: ~ 10 นาที

~ ความแตกต่าง: ~ มือใหม่~

สิ่งที่คุณจะสร้าง

การ ยก ข้อ ความ ที่ กระตุ้น ความ สนใจ ขึ้น มา กล่าว ด้วย สาม วลี ที่ น่า ทึ่ง แต่ ละ คํา ใช้ ตัว อักษร ที่ ต่าง กัน และ ทํา ให้ เกิด ภาพ เคลื่อนไหว.

คุณสมบัติที่ลูกจะได้เรียนรู้

• ~รูปแบบการตัดกระดาษของเล็ตเตอร์~ — กระเบื้อง, การตัดนิตยสาร, ผลการตัดกระดาษ
• ~แอนิเมชันที่เคลื่อนไหว~ — จดหมายที่ปรากฏทีละฉบับ
• ~เครื่องกําเนิดไฟฟ้าใต้ดิน~ — พื้นหลังที่เคลื่อนไหวของดวงอาทิตย์
• ~การ์ตูนกรอบ Key Proups ~ — การแปลงสีและผลลัพท์

ขั้น ที่ 1: ตั้ง แคน วา

1. เปิดเครื่องมือแก้ไข PinePaper
2. คลิกที่ช่อง BOOWS
3. เลือก~Instagram Story (1080×1920) ~

Zqqzzes เลือกรายการในสมภพ Story ขนาด

ขั้น ที่ 2: เพิ่ม ภูมิ หลัง ที่ เปลี่ยน ไป

1. คลิกที่ ~sens ~ แท็บในถาดด้านขวา
2. ตั้งค่าโหมดพื้นหลังเป็น ~ ผู้จัดทํา~
3. เลือก~
4. ปรับแต่งสี:
   • สี 1: #FF6B6B (สีแดง)
   • สี 2: ซก. ค
   • สี 3: ซก. ค
5. เซ็ท! เคานต์เรย์ : 16
6. เปิดใช้งาน~~~~ และตั้งค่าสปีด: 0.5
7. คลิ๊ก **

ขั้นที่ 3: สร้าง “ใหญ่” อักษร

1. คลิ้กที่ < letter cullage * ปุ่มในแถบเครื่องมือ (หรือกด L)
2. ประเภท: ~Dream ใหญ่~
3. ปรับแต่งรูปแบบ:
   • สไตล์: ~Tile~
   • จานสี: ~ ออน~
   • ขนาดตัวอักษร: ~72~
   • มุม: 8
   • เปิดการใช้เงา
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: เพิ่มความแปลกใหม่เป็น “ใหญ่”

1. ด้วยรายการที่เลือก เปิดช่อง # Timeline ~ ~
2. คลิ้ก~
3. ปรับแต่ง:
   • ผลกระทบ: ~ Pop in ~
   • หน่วงจับ: ~0.08s~
   • เวลา: ~0.5s~
   • Sequest: ** (ซ้ายไปขวา)
   • ♪ ถอนตัว ♪

รหัสเทียบเท่า:

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

Zqqz letters language with pop-in value

ขั้นที่ 5 สร้าง “Work Reader” อักษร

1. ที่อยู่ติดต่ออื่น ๆ ด้วย:

   • ข้อความ: ~Work Regress~
   • สไตล์: ~ มากาซีน~
   • จานสี: ~ มากาซีน ~
   • ขนาดตัวอักษร: ~60~
   • ตําแหน่ง: (540, 920)

2. เพิ่มแอนิเมชันที่ถูกเลื่อน:

   • ลูกเล่น: ** ภาพนิ่งขึ้น~
   • หน่วงจับ: ~.1s~

   • WWE#

รหัสเทียบเท่า:

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: สร้างอักษร “TATY Humble”

1. สร้างส่วนเขียนตัวพิมพ์ตัวที่สาม:

   • ข้อความ: “TAY Humble”
   • รูปแบบ: ~Packer tut~ (3D fadow value)
   • ขนาดตัวอักษร: ~68~
   • ตําแหน่ง: (540, 1100)

2. เพิ่มแอนิเมชันที่ถูกเลื่อนด้วยการเด้ง:

   • ผลกระทบ: ~ Pop in ~
   • 06s
   • Sequest: ** Center ~ (เสียงจากตรงกลางข้างนอก)

   • ปลดปล่อย

รหัสเทียบเท่า:

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

Zqqzza ทั้งหมดสามวลีที่มีรูปแบบ ที่แตกต่างกัน

ขั้น ที่ 7: เพิ่ม ข้อ แนะ

1. สร้างสี่เหลี่ยมผืนผ้าสําหรับตัวแบ่งของวงเล็บ:

   • ความกว้าง: 500, ความสูง: 8
   • สี: ขาว (zqcz)
   • ตําแหน่งใต้วลี

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: แสดงตัวอย่างและเล่น

1. กด Zqqz เพื่อเล่นแอนิเมชัน
2. เส้นเวลาแสดงวน 6 วินาที
3. จง เฝ้า ดู สิ่ง ที่ ถูก โซเซ เผย:
   • “Dream ใหญ่” ปรากฏในตัวอักษรโดยตัวอักษร
   • “WORK Reader” สไลด์ขึ้นด้วยคลื่น
   • “STAY Humble” เด้งจากตรงกลางด้านนอก

ขั้นที่ 9: ส่งออก

สําหรับเรื่องอินสตาแกรม (วิดีโอ)

1. คลิ้ก~. eptate~
2. เลือก ~WebM ~ (แนะนําให้ใช้) หรือ ~MP4~
3. ปรับแต่ง:
   • ระยะเวลา: ~9 วินาที~
   • อัตราเฟรม: ~30 fps~
   • คุณภาพ: ~/~
4. คลิก # เอ็กซ์พอร์ต ~ และรอการดาวน์โหลด

สําหรับแพลตฟอร์มอื่น ๆ

รหัสสมบูรณ์

นี่คือรหัสเต็มในการสร้างแอนิเมชันนี้ขึ้นใหม่

// 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. เปิด **
2. เลือกหมวดหมู่: ~ สื่อโซเชียล~
3. คลิก # ข้อความอ้างถึงการย้าย #
4. โหลดเอกสารต้นแบบพร้อมทั้งหมด

อ้างอิงรูปแบบตัวอักษร

รูปแบบการเรียงแถว

ข้อ แนะ

– ข้อความบนพื้นหลังที่มืดมน (หรือในทางกลับกัน) เป็นสิ่งจําเป็นสําหรับการอ่านได้.

~เวลาจับสลาก~ — 0.05-0.1s ระหว่างตัวอักษร รู้สึกเป็นธรรมชาติ~ เร็วเกินไป.

~สไตล์ Mix ~ — ใช้รูปแบบอักษรต่าง ๆ สําหรับแต่ละวลี เพิ่มความสนใจทางภาพ.

~สัญญาณสําหรับการเน้น~ — The bounce Out on “STAY Humble” ให้ความสนใจเป็นพิเศษ.

ขั้นถัดไป

• [ ข้อ อ้างอิง เล็ตเตอร์ คอลเลจ [ZqqZ] — ทุกรูปแบบและทางเลือก
• [ตัวแก้ไขกรอบเค (/features/keyframes) — การควบคุมเวลาเอง
• [Effects] (/features/effects) — เพิ่มแสงจ้าและแสงจ้า
• [Physicals activism] [/tutorials/physics-animation] — ผลกระทบขั้นสูงการปล่อย