עורך Keyframe

צור אנימציה מורכבת, בדיוק בזמן שימוש במערכי מפתח.

מה זה Keyframes?

Keyframes מגדירים ערכי רכוש ספציפיים בנקודות ספציפיות בזמן. PinePaper אוטומטית animates (interpolates) בין מסגרות מפתח ליצירת מעברים חלקה.

פתיחת ציר הזמן

לוח הזמנים נמצא בתחתית המסך. אם חבוי:

1. לחץ View בתפריט
2. תגית: Show Timeline

יצירת Keyframes

המונחים: Properties Panel

1. בחר פריט
2. הגדר את המשחק בפעם הרצויה
3. שינוי נכס (הצעה, גודל, דמיון, צבע)
4. מפתח נוצר באופן אוטומטי

המונחים: timeline Panel

1. בחר פריט
2. לחץ על ציר הזמן בזמן הרצוי
3. לחץ >Add Keyframe** או הקש K

תכונות חיוניות

עריכה Keyframes

פיתוח Keyframes

גרור מסגרת מפתח שמאלה או ימין בקו הזמן כדי לשנות את זמנו.

עריכה ערכים

1. לחץ על מפתח כדי לבחור אותו
2. שינוי ערכים בלוח הנכסים
3. שינויים חלים על מסגרת המפתח

קביעת Keyframes

1. בחרו את המפתח
2. הקש Delete או Right-click

המונחים:

לשלוט בהאצה של האנימציה בין מרכזי מפתח:

שליטה

הטרים והפיצול

כל פריט בעל מבנה מפתח מופיע על ציר הזמן כבלוק קליפ גורר (בר אינדיגו שמאחורי היהלומים המרכזיים). חסימת הוידאו מאפשרת לך:

• Drag the Body - לשנות את כל האנימציה בזמן הבד (timeOffset).
• Drag the left Edge - 3m the Beginning of the Play sub-range. הקצה הימני של הבר נשאר מעוגן, תואם את אמנת Premiere / Canva.
• Drag the Right Edge - trim the end of the game sub-range, מוקרן עד לעידן האחרון של מערכת המפתח.
• הקש S עם השחקנית בתוך הקליפ - פיצול על ראש המשחק. היצירה החדשה הופכת לכניסת הרישום שלה; פיצולי שרשרת מייצרים פריטים עצמאיים של N+1.

שדות נתונים

חסימה של UI מפות לתחומים אלה על הפריט:

מחוץ לחלון הבד של הקליפ, הפריט מוסתר באמצעות visible=false – השפע נותר לבדו כך שאבני מפתח בעלות חיים עדיין פועלות בתוך החלון.

// 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 מועתק באמצעות Item.clone() (preserves להפוך + סגנון); מערך מסגרת המפתח (keyframes, contentKeyframes, propertyEasings) הם JSON עגול-tקרוע כך שכל חתיכה מחזיקה בנתונים שלה. שרשרת פיצולים בקנה מידה לינארי: N פיצולs ⇒ N1 עצמאי חתיכות, כל כניסה משלו למרשם. השלכות מעשיות:

• **ה-Per-piece-piece-Break-S easing על חתיכה אחת; האחרים אינם קשורים.
• צבע קצה או ערך אינטרפולציה - לערוך את fillColor של מסגרת מפתח, strokeColor, או כל נכס אנימציה על חתיכה אחת כדי ליישם טרנספורמציה שונה על החלון שלה. הצבע הקיים ו- gradient אינטרפולטורים מטפלים ב- HSL/RGB lerp ללא שינוי.
• • דרך מרחבית מושלמת** - spatialHandles חיה בתוך מסגרת מפתח אינדיבידואלית, כך מרפאה את הנתיב של אנימציה אחת לא משפיעה על האחרים.

חתיכות אינן חופפות מבחינה ויזואלית כל עוד חלונות הבד שלהם אינם חופפים. להזיז כל חתיכה לעמדה חדשה בבד, ללוש אותה שוב, או לחלק אותה הלאה.

דוגמה: Fade in Animation

1. בחר פריט טקסט
2. בזמן 0s: Set Opacity to 0
3. שם הסרטון: Set Opacity to 1
4. תגית: Ease Out
5. משחק תצוגה מקדימה

המונחים: Color Transition

1. בחר פריט
2. בזמן 0s: Set Fill Color to #FF0000 (אדום)
3. בזמן 2s: Set Fill Color to #0000FF (כחול)
4. הצבע עובר בצורה חלקה דרך הספקטרום

תגית: מצלמה Pan Effect

יצירת אנימציה קולנועית על פני תמונות גדולות באמצעות הבד כתצוגה.

איך זה עובד

כאשר יש לך תמונה גדולה יותר מהבד שלך:

• ה- canvas Limits מתנהג כמו ה- Camera Viewport
• מעבר ל-תמונה שמאלה = מחבתות מצלמה**
• מעבר ל-תמונה למעלה*= מצלמות**down

יצירת Pan Animation

1. ** גודל הבד* לפלט הרצוי שלך (למשל, 1920×1080 עבור וידאו HD)
2. Import תמונה גדולה (גדול יותר מבד)
3. הגדרת התמונה כך שמבט ההתחלה גלוי
4. Create keyframes כדי להעביר את מיקום התמונה

Row-by-Row Scanning Pattern

לסרוק את התמונה בדפוס נחש:

אפשרויות ל: Camera Follows

עבור תנועת מצלמות דינמיות שעוקבות אחר אובייקט:

1. ליצור סימן קטן או נתיב
2. הוסף יחס camera_follows לסימן
3. עקבו אחרי Marker Place
4. התצוגה באופן אוטומטי עוקב

טיפים