Keyframe संपादक

Keyframes का उपयोग करके जटिल, ठीक समयबद्ध एनिमेशन बनाएं।.

कीफ्रेम क्या हैं?

कीफ्रेम समय में विशिष्ट बिंदुओं पर विशिष्ट संपत्ति मूल्यों को परिभाषित करते हैं। PinePaper स्वचालित रूप से चिकनी संक्रमण बनाने के लिए keyframes के बीच (interpolates) animates।.

टाइमलाइन खोलना

टाइमलाइन पैनल स्क्रीन के नीचे है। यदि छिपा हुआ है:

1. क्लिक करें
2. चयन करें **

कीफ्रेम बनाना

विधि 1: गुण पैनल

1. एक आइटम चुनें
2. वांछित समय के लिए प्लेहेड सेट करें
3. संपत्ति बदलें (स्थिति, पैमाने, अपारदर्शिता, रंग)
4. एक कुंजीफ्रेम स्वचालित रूप से बनाया गया है

विधि 2: समयरेखा पैनल

1. एक आइटम चुनें
2. वांछित समय पर समयरेखा पर क्लिक करें
3. क्लिक करें

प्रमुख गुण

संपादन कीफ्रेम

मूविंग कीफ्रेम

अपने समय को बदलने के लिए टाइमलाइन पर एक कीफ्रेम बाएं या दाएं खींचें।.

संपादन मूल्य

1. इसे चुनने के लिए एक कुंजीफ्रेम पर क्लिक करें
2. गुण पैनल में मूल्यों को संशोधित करें
3. परिवर्तन उस keyframe पर लागू होते हैं

Deleting keyframes

1. कुंजीफ्रेम चुनें
2. प्रेस Delete या राइट-क्लिक → Delete Keyframe

कार्य करना

कुंजीफ्रेम के बीच एनिमेशन के त्वरण को नियंत्रित करें:

प्लेबैक नियंत्रण

ट्रिम और स्प्लिट

प्रत्येक कुंजीफ्रेम एनिमेटेड आइटम टाइमलाइन पर एक ड्रैगेबल क्लिप ब्लॉक (कीफ्रेम हीरे के पीछे इंडिगो बार) के रूप में दिखाई देता है। क्लिप ब्लॉक आपको देता है:

• ** शरीर को खींचें* - पूरे एनीमेशन को कैनवास टाइम (timeOffset) में बदल दें।.
• बाएं किनारे को खींचें - प्लेड सब-रेंज की शुरुआत को ट्रिम करें। बार का दाहिने किनारे एंकर रहता है, जो प्रीमियर / कैंवा कन्वेंशन से मेल खाता है।.
• दाहिने किनारे को खींचें - अंतिम कुंजीफ्रेम के समय के लिए क्लैंप किए गए, प्लेड सब-रेंज के अंत को ट्रिम करें।.
• प्रेस S क्लिप के अंदर प्लेहेड के साथ - प्लेहेड पर विभाजित। नया टुकड़ा अपने स्वयं के रजिस्ट्री प्रविष्टि बन जाता है; चेनिंग विभाजन एन + 1 स्वतंत्र टुकड़े पैदा करता है।.

डेटा फ़ील्ड

आइटम पर इन क्षेत्रों के लिए क्लिप-ब्लॉक यूआई के नक्शे:

क्लिप के कैनवास विंडो के बाहर आइटम visible=false के माध्यम से छिपा हुआ है - opacity अकेले छोड़ दिया जाता है इसलिए opacity-animating keyframes अभी भी खिड़की के अंदर काम करते हैं।.

// 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() के माध्यम से क्लोन किया जाता है (प्रेरित + शैली को बदल देता है); कीफ़्रेम सरणी (keyframes, contentKeyframes, propertyEasings) JSON राउंड-ट्रिप किया जाता है ताकि प्रत्येक टुकड़ा अपने डेटा का मालिक हो। चेनिंग स्प्लिट्स स्केल रैखिक रूप से: एन स्प्लिट्स ⇒ एन + 1 स्वतंत्र टुकड़े, प्रत्येक अपनी रजिस्ट्री प्रविष्टि। व्यावहारिक परिणाम:

• Per-piece easing - एक टुकड़ा पर एक एकल keyframe के easing को बदल दें; दूसरों को untouched हैं।.
• Per-piece रंग या मूल्य interpolation - अपनी विंडो पर एक अलग परिवर्तन लागू करने के लिए एक टुकड़ा पर एक keyframe के fillColor, strokeColor, या किसी भी एनिमेटेड संपत्ति को संपादित करें। मौजूदा रंग और ढाल इंटरपोलेटर HSL / RGB lerp unchanged संभालते हैं।.
• *Per-टुकड़ा स्थानिक पथ - spatialHandles व्यक्तिगत keyframes के अंदर रहते हैं, इसलिए एक टुकड़ा के एनीमेशन के रास्ते को ठीक करना दूसरों को प्रभावित नहीं करता है।.

जब तक उनकी कैनवास की खिड़कियां ओवरलैप नहीं करती हैं तब तक टुकड़े दृश्य रूप से ओवरलैप नहीं करते हैं। किसी भी टुकड़े को नए कैनवास-टाइम स्थिति में खींचें, इसे फिर से ट्रिम करें, या इसे आगे विभाजित करें।.

उदाहरण: Fade in Animation

1. एक टेक्स्ट आइटम चुनें
2. समय 0: 0 करने के लिए सेट अपारदर्शिता 0
3. समय 1s: 1 के लिए सेट अपारदर्शिता
4. ईज़ी आउट
5. प्रेस प्ले पूर्वावलोकन करने के लिए

उदाहरण: रंग संक्रमण

1. एक आइटम चुनें
2. समय 0: सेट करने के लिए रंग भरने के लिए #FF0000 (लाल)
3. समय 2s: सेट करने के लिए रंग भरने के लिए #0000FF (नीला)
4. स्पेक्ट्रम के माध्यम से रंग आसानी से संक्रमण

उदाहरण: कैमरा पैन इफेक्ट

बड़े चित्रों में सिनेमाई पैन एनिमेशन बनाएं, कैनवास का उपयोग करके व्यूपोर्ट के रूप में करें।.

यह कैसे काम करता है

जब आपके पास अपने कैनवास से बड़ा छवि होती है:

• कैनावास बाध्य कैमरा व्यूपोर्ट के रूप में कार्य करें
• image left* = कैमरा pan right
• छवि ऊपर = कैमरा पैन नीचे

पैन एनिमेशन बनाना

1. ** सेट कैनवास आकार* अपने वांछित आउटपुट के लिए (उदाहरण के लिए, 1920 × 1080 HD वीडियो के लिए)
2. ** एक बड़ी छवि* ( कैनवास से बड़ा)
3. स्थिति छवि इसलिए प्रारंभिक दृश्य दिखाई देता है
4. Create keyframes

पंक्ति-by-Row स्कैनिंग पैटर्न

एक पैटर्न में एक छवि को पार करने के लिए:

वैकल्पिक: कैमरा फ़ॉलो

गतिशील कैमरा आंदोलन के लिए जो एक वस्तु का अनुसरण करता है:

1. एक छोटा मार्कर या पथ बनाएँ
2. मार्कर के लिए camera_follows संबंध जोड़ें
3. मार्कर स्थिति को अंकित करें
4. स्वचालित रूप से viewport

टिप्स