Trợ lý: Hoạt ảnh & đa chiều

Tạo ra sự chuyển hóa hình dạng mê hoặc và biên đạo múa nhiều động tác.

Time: 20 phút Difficulty: Cấp cao

Những gì bạn sẽ tạo ra

Một chuỗi động mà hình dạng biến dạng thành nhau trong khi văn bản cho thấy thời gian đã đổi.

Những đặc điểm được che đậy

• Shape biến dạng — chuyển đổi mịn giữa các hình dạng khác nhau
• Staggered hoạt hình — Hai chuỗi thời gian cho nhiều nguyên tố
• Chuyển đổi màu — chuyển đổi màu chuyển động
• Mask tiết lộ — Hiệu ứng tẩy não và nhãn cầu
• Choregraphed chuỗi - chính xác thời gian để nhảy đa bài

Phần 1: Hình dạng Morphing

Bước 1: Tạo hình nguồn

1. Tạo một vòng tròn ở giữa:
   • Bán kính: 80
   • Màu: #3b82f6 (xanh)
   • Position: (400, 300)

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

Bước 2: Tạo hình mục tiêu

1. Tạo một ngôi sao (sẽ là mục tiêu biến hình):
   • Điểm: 5
   • Bán kính: 100
   • Màu:
   • Position: (400, 300)

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

Bước 3: Thêm lượng morphine

Quan hệ XQQ tạo sự chuyển đổi hình dạng mịn:

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

Bước 4: Chuỗi nhiều Morph

Tạo một chuỗi biến dạng: hình tròn Sao tam giác hình tròn

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

Phần 2:

Bước 5: Tạo bảng chọn chữ

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

Bước 6: Áp dụng hình ảnh hoạt hình

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

Mẫu chuỗi

Phần 3: Hiển thị mặt nạ

Bước 7 tiết lộ một cách ấn tượng

Hiển thị hình dạng biến dạng với hiệu ứng mắt:

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

Bước 8: Hiển thị Văn bản

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

Mặt nạ sẵn sàng

Phần 4: Toàn bộ lựa chọn

Văn lệnh hoạt hình đầy đủ

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

Thiết lập Xuất

Kết quả tốt nhất với biến dạng hoạt hình:

Mẹo

overlap time — Khởi động hoạt họa kế tiếp là 1.99.2 trước khi kết thúc cho dòng chảy liên tục.

Dùng màu bổ sung — Hình dạng hình dạng trông tốt nhất khi chuyển đổi giữa các màu sắc hoạt động tốt với nhau.

Center chuỗi tác động — Đường biến động XQQ khiến người ta chú ý đến giữa văn bản.

Match tiết lộ nội dung — Dùng iris cho hình tròn, wipeLeft cho văn bản.

Biến thế

Comment

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

Name

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

Bước kế

• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương
• Dịch bởi Vũ Hạnh, Mai Linh, Nga, Huy Tô, Yuki, Ann, Phương
• [ Hệ thống máy tính] (/features/masking) — Các kỹ thuật tiết lộ cấp cao