Keyframe Editor

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

چارچوب های کلیدی چیست؟?

فریم های کلیدی ارزش های مالکیت خاص را در نقاط خاص در زمان مشخص تعریف می کنند. PinePaper به طور خودکار بین چارچوب های کلیدی برای ایجاد انتقال های نرم افزاری (interpolates) بین می رود.

باز کردن خط زمانی

پنل Timeline در پایین صفحه نمایش قرار دارد. اگر پنهان باشد:

1. Click View در منو
2. گزینه **Show Timeline

ایجاد چارچوب های کلیدی

روش 1: Properties Panel

1. انتخاب یک آیتم
2. بازی را به زمان دلخواه تنظیم کنید
3. تغییر اموال (موقعیت، مقیاس، opacity، رنگ)
4. یک چارچوب کلیدی به طور خودکار ایجاد می شود

روش دوم: Timeline Panel

1. انتخاب یک آیتم
2. روی جدول زمانی دلخواه کلیک کنید
3. • Add Keyframe ** یا Press K

ویژگی های کلیدی

ویرایش فریم های کلیدی

حرکت Keyframes

یک فریم کلیدی را در جدول زمانی قرار دهید تا زمان خود را تغییر دهید.

ویرایش ارزش ها

1. روی یک فریم کلیدی کلیک کنید تا آن را انتخاب کنید
2. تغییر ارزش ها در پنل Properties
3. تغییرات در این چارچوب کلیدی

حذف فریم های کلیدی

1. گزینه keyframe را انتخاب کنید
2. Press Delete یا راست کلیک کنید **Delete Keyframe

توابع Easing

سرعت انیمیشن بین فریم های کلیدی را کنترل کنید:

بازی Controls

۳- تغییر و تقسیم

هر آیتم Keyframe-animated در جدول زمانی به عنوان یک بلوک کلیپ کشیدن (در نوار Indigo پشت الماس های فریم کلیدی) ظاهر می شود. بلوک کلیپ به شما اجازه می دهد:

• • بدن را فعال کنید - کل انیمیشن را در زمان تغییر دهید (timeOffset).
• • لبه چپ را تنظیم کنید - شروع بازی زیر برد. لبه راست نوار لنگر می ماند، مطابق با کنوانسیون Premiere / Canva.
• • لبه راست را تنظیم کنید - انتهای زیر برد بازی را تنظیم کنید، تا آخرین زمان فریم کلید.
• Press S با سر بازی در داخل کلیپ - تقسیم در سر بازی. این قطعه جدید به ورودی رجیستری خود تبدیل می شود؛ تقسیم بندی زنجیره ای قطعات مستقل N+1 را تولید می کند.

زمینه های داده

نقشه های UI کلیپ بلوک به این زمینه ها در مورد:

در خارج از پنجره پچ کلیپ، آیتم از طریق visible=false پنهان شده است - opacity به تنهایی باقی مانده است، بنابراین چارچوب های کلیدی مبهم هنوز در داخل پنجره کار می کنند.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

آنچه تقسیم بندی به شما می دهد

تقسیم یک کپی عمیق است. آیتم Paper.js از طریق Zq0qqZ (قبل از نیاز به تبدیل + سبک)؛ آرایه های کلیدی (keyframes، contentKeyframes، propertyEasings) گرد JSON پاره پاره پاره پاره شده اند، بنابراین هر قطعه دارای داده های آن است. زنجیره بندی به صورت خطی تقسیم می شود: N قطعات مستقل N-1 را تقسیم می کند، هر کدام از ورودی های خود را ثبت می کنند. عواقب عملی:

• • کاهش جزئی - تغییر یک چارچوب کلیدی واحد easing در یک قطعه؛ دیگران دست نخورده اند.
• • رنگ یا ارزش تقسیم بندی * - ویرایش یک fillColor، strokeColor، یا هر ملک متحرک در یک قطعه برای اعمال یک تحول متفاوت در پنجره خود. رنگ های موجود و تقسیم کننده های گرادیان HSL/RGB را بدون تغییر اداره می کنند.
• ** مسیر فضایی دقیق - spatialHandles در داخل چارچوب های کلیدی فردی زندگی می کند، بنابراین تحریک مسیر انیمیشن یک قطعه بر دیگران تأثیر نمی گذارد.

قطعات به صورت بصری همپوشانی ندارند تا زمانی که پنجره های آنها همپوشانی نداشته باشند. هر قطعه را به یک موقعیت زمانی جدید بکشید، دوباره آن را برش دهید یا آن را تقسیم کنید.

مثال: Fade In Animation

1. انتخاب یک آیتم متن
2. در زمان 0: Opacity to 0
3. در زمان 1، Opacity را به 1 تنظیم کنید
4. دانلود آهنگ زیبای Ease Out
5. Press Play برای پیش نمایش

مثال: انتقال رنگ

1. انتخاب یک آیتم
2. در زمان صفر: رنگ را به #FF0000 (red) تنظیم کنید
3. در زمان 2، رنگ را به #0000FF (آبی) تنظیم کنید
4. رنگ به آرامی از طریق طیف انتقال می یابد

مثال: Camera Pan Effect

ساخت انیمیشن های سینمایی در سراسر تصاویر بزرگ با استفاده از بوم به عنوان یک Viewport.

چگونه کار می کند

هنگامی که شما یک تصویر بزرگتر از بوم خود دارید:

• *کانواس * به عنوان نمای دوربین عمل می کند
• حرکت **تصویر چپ * = دوربین # راست
• حرکت **تصویر بالا * = پلاک های دوربین **down

ساخت انیمیشن Pan Animation

1. • اندازه بوم را به خروجی دلخواه خود تنظیم کنید (به عنوان مثال، 1920×1080 برای ویدئو HD)
2. • یک تصویر بزرگ را منتشر کنید - (بزرگ تر از آن)
3. • ارسال تصویر * بنابراین دید شروع قابل مشاهده است
4. • ایجاد چارچوب های کلیدی * برای حرکت موقعیت تصویر

الگوی اسکن Row-by-Row

اسکن در سراسر یک تصویر در یک الگوی مارین:

جایگزین: Camera Follows

برای حرکت دوربین پویا که یک شیء را دنبال می کند:

1. ایجاد یک نشانگر کوچک یا مسیر
2. اضافه کردن رابطه camera_follows با نشانگر
3. موقعیت نشانگر را حفظ کنید
4. Viewport به طور خودکار

نکات کلیدی