2015-12-17 26 views
13

私は、その軸の周りに歯車を回転しようとしています。これは期待どおりに動作しますが、5000時間後に元の状態に戻ります。どのように私はそれを逆行から停止し、それを進めるだけですか?Velocity.js回転中心軸の周り

おかげ

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

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

誰もが任意のアイデアを持っていますか? –

答えて

8

これは速度の既知のバグであるとジュリアンは、彼がそれを固定されますが、私の知る限りでは全く知られているリリース日が存在しないと言う:

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> 

CSS:

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

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

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

JS:

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

loopMeLeft(); 

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

そして、ここではスピードアップして、もう少し複雑な例であり、歯車の減速dしかし、縁の周りに少し荒いですが、一般的なアイデアはそこにあります。

フィドル:https://jsfiddle.net/AtheistP3ace/znyLtfaf/4/

+0

こんにちは無神論者、助けてくれてありがとう!私はフィドルを実行しようとしたが、何もしない? 「スタート」ボタンを押した後でも? –

+0

私は速度を含む方法が好きではありません。それを1秒で修正する。 – AtheistP3ace

+0

OK @CamrinParnell新しいフィドルリンクを試してみてください。 – AtheistP3ace

関連する問題