Velocity.js घूर्णन केंद्र Axis

Question

मैं अपने जेड अक्ष के चारों ओर एक गियर घूमने की कोशिश कर रहा हूं। यह अपेक्षित के रूप में काम करता है, लेकिन फिर 5000 अवधि के बाद उलट जाता है। मैं इसे उलटा करने से कैसे रोकूं और केवल इसे आगे बढ़ाऊं?

धन्यवाद

var gear_width = $('.gear').width(); 
var gear_height = $('.gear').height(); 

$('.gear').velocity({ rotateZ:-360 }, { duration: 5000, easing: "linear", loop: true,}); 

Answer 1

इस वेग में एक ज्ञात बग है और जूलियन कहते हैं कि वे यह तय किया जाएगा, लेकिन कोई ज्ञात रिलीज की तारीख के रूप में जहाँ तक मुझे पता है:

https://github.com/julianshapiro/velocity/issues/453 (ऋणात्मक मान घूमता घुमाएँ घड़ी की दिशा में वापस)

चूंकि घड़ी की दिशा में लूपिंग वास्तव में काम करती है, तो विपरीत दिशा में अनंत लूपिंग प्राप्त करने के लिए चारों ओर एक त्वरित कार्य कुछ ऐसा होता है जब तक कि बग ठीक नहीं हो जाता:

फिडल: https://jsfiddle.net/znyLtfaf/2/

HTML:

<div class="gear gearRight">rotate right</div> 
<div class="gear gearLeft">rotate left</div> 

सीएसएस:

.gear { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    background: red; 
} 

.gearRight { 
    top: 100px; 
    left: 100px; 
} 

.gearLeft { 
    top: 300px; 
    left: 100px; 
} 

जे एस:

$('.gearRight').velocity({ rotateZ: "+=360" }, { duration: 5000, easing: "linear", loop: true}); 

loopMeLeft(); 

function loopMeLeft() { 
    $('.gearLeft').velocity({ rotateZ: "-=360" }, { duration: 5000, easing: "linear", complete: loopMeLeft}); 
} 

और यहाँ है को तेज करने के साथ में थोड़ा और अधिक जटिल उदाहरण और गियर डी धीमा हालांकि, किनारों के चारों ओर थोड़ा मोटा हो लेकिन सामान्य विचार वहां है।

फिडल: https://jsfiddle.net/AtheistP3ace/znyLtfaf/4/