HTML 5 - 非常簡單的動畫

我需要了解如何在HTML 5或CSS3中創建簡單的動畫。HTML 5 - 非常簡單的動畫

假設你有這個精靈（見圖），你需要創建一個4幀的動畫。動畫必須持續1秒。我不希望幀之間有一個平滑的動畫，我希望它從一個狀態跳到另一個狀態而沒有插值。這些球是4幀：

    X  Y  ROTATION  OPACITY (%) 
First frame:  100  220  10   5 
Second frame: 150  240  18   25 
Third frame:  160  280  32   55 
Fourth frame: 170  290  47   78

在恢復中，每0.25秒球就必須假定其中一個關鍵幀。動畫沒有循環。

你們可以舉例說明如何使用CSS或HTML5/Javascript來做到這一點嗎？（產生較少CPU密集型方法的方法）。謝謝。

enter image description here

來源

2012-06-23 SpaceDog

在css3中使用'transform：rotate'並在javascript中使用setTimeout。 –

這可以使用@keyframes，animation，transform: rotate(angle) translate(x,y);和opacity純CSS3來完成。

下面是一個例子（使用-webkit-供應商名稱，使用-moz-，-o-，-ms-最佳兼容性）：http://jsfiddle.net/QaPaK/ 的例子只適用於Chrome和Safari，因爲我沒有添加其他前綴一個簡潔的例子。

HTML（動畫的<img>元素，例如）：

<img src="http://i.stack.imgur.com/KLNOU.png" id="test">

CSS：

/* Replace -webkit- with moz-, -o-, -ms- for cross-browser compatibility */ 
#test { 
    -webkit-transform-origin: top left; 
    -webkit-animation-name: foo; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-iteration-count: 1; 
} 
@-webkit-keyframes foo { 
    0%, 25% { /* State 1 */ 
        -webkit-transform: rotate(10deg) translate(100px, 200px); 
        opacity: 0.05; 
    } 
    25%, 50% { /* State 2 */ 
        -webkit-transform: rotate(18deg) translate(150px, 240px); 
        opacity: 0.25; 
    } 
    50%, 75% { /* State 3 */ 
        -webkit-transform: rotate(32deg) translate(160px, 280px); 
        opacity: 0.55; 
    } 
    75%, 100% { /* State 4 */ 
        -webkit-transform: rotate(47deg) translate(170px, 290px); 
        opacity: 0.78; 
    } 
}

來源

2012-06-23 17:14:26

小心舉個例子？ CSS3能夠處理精確顯示每個關鍵幀的準確時刻嗎？ – SpaceDog

@完全添加一個示例。「動畫」從狀態1跳到2跳到3到4. –

@Truth是的，我問了關於旋轉，平移，不透明度變化和比例尺 – SpaceDog

嗯，有幾種方法。下面是我真正做到這一點的方式：

http://jsfiddle.net/NcuZC/1/

從本質上講，我使用的是：

var changeFrame = function(elem, i) { 
    elem.removeClass().addClass('frame'+i); 
}; 

$(function() { 
    var ball = $('#ball'), 
     i = 1, 
     timer = window.setInterval(function() { 
      changeFrame(ball, i); 
      i++; 
      if (i > 4) { 
       clearInterval(timer); 
      }   
     }, 250);  
});

然後在CSS中的每一幀的一類：

.frame1 { 
    left: 100px; 
    top: 220px; 

    -webkit-transform: rotate(10deg); 
    -moz-transform: rotate(10deg); 
    -o-transform: rotate(10deg); 
    /* In IE10 there is no prefix. */ 
    transform: rotate(10deg); 

    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
        M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand'); 

    opacity: 0.05; 
    filter: alpha(opacity=5); /* IE8 down */ 
}

儘管有一個關於它的流行網站，但我沒有使用CSS3動畫，因爲我發現它們有時是CPU密集型的，而且因爲你不需要補間，所以沒有多少意義。另外，通過使用JS，我們可以將它應用於從IE6到最新Webkits的所有流行瀏覽器。

來源

2012-06-23 17:34:38

HTML 5 - 非常簡單的動畫

回答

相關問題