從CSS3的最後位置隨機旋轉圖像

我想要一個「財富之輪」效果。當用戶點擊圖像時，它會從最後一個位置隨機旋轉（180至540度之間）。旋轉應該用CSS3完成。這裏是我到目前爲止的代碼：從CSS3的最後位置隨機旋轉圖像

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
#pic { 
    position: absolute; 
    top: 200px; 
    left: 200px; 
} 
@-webkit-keyframes spin 
{ 
100% {-webkit-transform: rotateZ(300deg);} 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript"> 
function animRes() { 
    var $element = $("#pic").bind("webkitAnimationEnd", function(){ 
    this.style.webkitAnimationName = ""; 
    }); 
} 
function doSpin() { 
    animRes(); 
    $("#pic").css('-webkit-animation', 'spin 1s ease-out'); 
    $("#pic").css('-webkit-animation-fill-mode', 'forwards'); //doesn't work when using AnimRes() 
} 
</script> 
</head> 
<body> 
<img id="pic" src="picture.jpg" alt="pic" onclick="doSpin();"/> 
</body> 
</html>

的問題是：
如何隨意改變旋轉的關鍵幀的價值？
如何從最後位置繼續旋轉？

目前animRes（）正在重置動畫，所以-webkit-animation-fill-mode: forwards不起作用，但沒有animRes（）我無法重置動畫以獲得更多自旋。用jQuery和純JS編寫答案非常感謝。

來源

2011-08-30 nqw1

你需要進入一些數學達到你想要做什麼，希望這不是太難理解...

var degrees=0, seconds=0, previousRotation=0; 

$("#spinner").click(function(){ 
previousRotation = degrees; 
degrees+= parseInt(Math.random() * 360 + 180); 
    //you should adjust this formula 
    miliseconds = parseInt((degrees - previousRotation)) * 5; 
    $(this).css({ 
     "-webkit-transform" : "rotate("+ degrees +"deg)", 
     "-webkit-transition-duration" : miliseconds + "ms" 
    }); 
});

我使用的動畫CSS過渡，而不是因爲他們更簡單。

如果有更多的度數需要轉換，則miliseconds = ...公式使得轉換時間更長。希望您可以將所有這些都集成到您已經編寫的代碼中。

您可以在這裏看到演示：http://jsfiddle.net/XkNrf/

來源

2011-08-30 19:28:06 Duopixel

這是完美的我的需求。花了一段時間瞭解它，但我現在做:)謝謝你！ – nqw1

我不會這樣處理。

我做了一個小例子here

它使用-moz性質，但他們都有一個WebKit的等價物，所以它應該是罰款。

想法如下：你的圖像以無限的方式旋轉但大部分時間都是暫停的（using -moz-animation-play-state。當用戶點擊它時，它開始運行，在a和b之間生成一個隨機數然後它旋轉X * Y + Z毫秒（在這個例子中a和b有一個1和11的值，Y是1000，Z是0）然後它再次暫停

這樣你可以很容易地自定義數量可能的結果和最短的輪換時間

而且您還可以將當前值與外部變量一起存儲，該外部變量從0開始，每當用戶單擊時，該值就會增加X.

來源

2011-08-30 11:30:35

感謝您的幫助和快速回復！解決這個問題的好方法。但是，我想在每個新的旋轉中使用定時功能，以使旋轉更加真實。它應該有快速啓動，然後慢慢下降到最後。 – nqw1

這可能很難用css來完成。你有沒有考慮過使用畫布？如果你願意，你可以嘗試使用rapahel.js。隨着圖像，旋轉和動畫的組合，它應該是好的。請參閱http://raphaeljs.com/reference.html獲取文檔。 –

我會看看它。我需要有CSS3動畫，因爲我也需要這個在iPad上順利運行。我很久以前就嘗試過Raphael.js，但我不記得iPad上的動畫是否平滑。我會檢查的。 – nqw1

從CSS3的最後位置隨機旋轉圖像

回答

相關問題