फैब्रिक जेएस

Question

में दो ऑब्जेक्ट्स के बीच एनीमेशन जोड़ें मेरे पास एक बहुत ही बुनियादी अनुप्रयोग है जो आप आकार बनाते हैं और उन्हें लाइन से कनेक्ट करते हैं। ऐसा करने के लिए आप निम्नलिखित करेंगे।

Example 

1. Click new animation 
2. add rectangle 
3. add child 
4. add circle 

आप आकृतियों को चारों ओर खींच सकते हैं, खींच सकते हैं और आकार बदल सकते हैं। मैं सोच रहा था कि दो ऑब्जेक्ट्स के बीच एनीमेशन जोड़ना संभव है या नहीं। तो उदाहरण के लिए एक छोटी गोल सर्कल बॉल दो वस्तुओं के बीच रेखा पर एनिमेट करेगा। मैंने कपड़े जेएस में एनीमेशन पेज पर डेमो की जांच की है लेकिन यह सुनिश्चित नहीं है कि ऑब्जेक्ट बी से करना संभव है या नहीं।

यहां FIDDLE है।

Answer 1

मुझे नहीं पता कि क्या आप कपड़े में निर्मित एनीमेशन फ़ंक्शन का उपयोग कर सकते हैं क्योंकि आप कहते हैं कि ये ऑब्जेक्ट्स स्वयं के चारों ओर घूम रहे हैं। लेकिन आप काफी आसानी से मैन्युअल रूप से गणित के एक बिट का उपयोग कर कुछ इस तरह बना सकते हैं:

आप इस समारोह के लिए 0 और 1. सही सूत्र के बीच एक लहर दोलन की तरह यह इलाज कर ऐसा कर सकता है:

• जब "कोण" 0, या 2π आयाम 0 है की एक बहु है, इसलिए गेंद object1 के केंद्र में है
• जब "आंग le "π का गुणज है, आयाम 1 है और गेंद object2 के केंद्र
• जब आयाम 0.5 है पर है, गेंद दो वस्तुओं

तुम बस कोण के आधार पर वृद्धि कर सकते हैं के बीच में है समय, जो भी अवधि, या अवधि आप चाहते हैं।

var animateBallBetweenObjects = function (obj1, obj2) { 

    // Add the "ball" 

    var circle = new fabric.Circle({ 
     radius: 10, 
     fill: 'blue', 
     left: obj1.getCenterPoint().x, 
     top: obj1.getCenterPoint().y, 
     originX: 'center', 
     originY: 'middle', 
     selectable: false 
    }); 

    canvas.add(circle); 

    var period = 1000; 
    var amplitude = 0; 
    var angle = 0; 
    var prevTime = Date.now(); 

    var loop = function() { 

     // Calculate the new amplitude 

     var now = Date.now(); 
     var elapsed = now - prevTime; 
     prevTime = now; 
     angle += Math.PI * (elapsed/(period * 0.5)); 
     amplitude = 0.5 * (Math.sin(angle - (0.5 * Math.PI)) + 1); 

     // Set the new position 

     var obj1Center = obj1.getCenterPoint(); 
     var obj2Center = obj2.getCenterPoint(); 

     circle.setLeft(obj1Center.x + (amplitude * (obj2Center.x - obj1Center.x))); 
     circle.setTop(obj1Center.y + (amplitude * (obj2Center.y - obj1Center.y))); 
     canvas.renderAll(); 

     requestAnimationFrame(loop); 
    } 

    // Animate as fast as possible 

    requestAnimationFrame(loop); 
}; 

FIDDLE इसके साथ यहां।