svg-character-animation

ساخت انیمیشن روان و قابل‌کنترل برای ریگ‌های کاراکتر SVG با GSAP و Remotion

این اسکیل برای جان‌بخشی به کاراکترهایی ساخته شده است که از قطعه‌های SVG تشکیل شده‌اند. با GSAP می‌توانید حرکت دست‌وپا، چرخش سر، پلک‌زدن، نگاه و تغییر حالت دهان را با timelineهای دقیق هماهنگ کنید.

برای رندرهای ویدیویی، انیمیشن به‌صورت deterministic و بر اساس فریم فعلی Remotion کنترل می‌شود؛ بنابراین پیش‌نمایش مرورگر و خروجی نهایی همگام می‌مانند. قواعد مربوط به pivot، transform و کنترل کیفیت نیز از جداشدن قطعات و یخ‌زدگی حرکت جلوگیری می‌کنند.

چه چیزی می‌گیرید

  • الگوی آماده برای انیمیشن قطعه‌های SVG با GSAP
  • کنترل دقیق timeline و acting beatهای چندبخشی
  • اتصال انیمیشن به frame در Remotion بدون استفاده از requestAnimationFrame
  • پشتیبانی از پیش‌نمایش‌های سازگار با HyperFrames و اعتبارسنجی CLI
  • چک‌لیست کنترل pivot، پلک‌زدن، نگاه، دهان و تغییرات واقعی بین فریم‌ها

برای چه کاری خوب است

  • توسعه‌دهندگانی که کاراکترهای دوبعدی SVG را برای ویدیو یا محتوای تعاملی متحرک می‌کنند
  • پروژه‌های Remotion که به انیمیشن فریم‌محور و قابل‌بازسازی نیاز دارند
  • تیم‌هایی که می‌خواهند حرکت اجزای بدن، حالت چهره و مکث‌های نمایشی را با timeline مدیریت کنند

برای چه کاری نیست

  • انیمیشن‌های سه‌بعدی یا ریگ‌هایی که بر پایه SVG ساخته نشده‌اند
  • پروژه‌هایی که به شبیه‌سازی فیزیک پیچیده یا موشن‌کپچر نیاز دارند

دربارهٔ این اسکیل

SVG Character Animation

Use this skill when animating character rigs made from SVG parts.

Runtime Rules

  • Animate transforms (x, y, scale, rotation) rather than layout.
  • Use timelines for multi-part acting beats.
  • For SVG elements, use stable pivots (svgOrigin or correctly scoped transform origins).
  • In Remotion, do not let GSAP advance with requestAnimationFrame; drive a paused timeline from the current frame.

Browser Pattern

gsap.set("#arm_right", { svgOrigin: "390 310" });
const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
tl.to("#head", { rotation: -8, duration: 0.2 })
  .to("#arm_right", { rotation: 35, duration: 0.4 }, "<");

Remotion Pattern

const frame = useCurrentFrame();
const progress = frame / durationInFrames;
timeline.progress(progress);

HyperFrames Pattern

Use HTML/SVG/GSAP components with deterministic timelines and validate via the
HyperFrames CLI before final render.

Quality Checklist

  • Parts stay connected at pivots during motion.
  • Blinks, gaze, and mouth shapes are separate enough to read.
  • Pose holds are long enough to communicate emotion.
  • Frame sampling shows meaningful deltas, not frozen animation.

Sources

  • GSAP core transform properties and SVG handling: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/
  • GSAP timelines and sequencing: https://gsap.com/docs/v3/GSAP/Timeline/
  • Remotion useCurrentFrame: https://www.remotion.dev/docs/use-current-frame

دانلود ZIP