HTML 5 - очень простая анимация

Question

Мне нужно понять, как создать простую анимацию в HTML 5 или CSS3.

Предположим, что у вас есть этот спрайт (см. Рисунок), и вам нужно создать анимацию с 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.25s мяч считать один из этих ключевых кадров. Нет цикла анимации.

Можете ли вы, ребята, привести пример того, как это сделать с помощью CSS или HTML5/Javascript? (метод, который обеспечивает менее интенсивный подход ЦП). Благодарю.

Answer 1

Это может быть сделано с чистым CSS3 с использованием @keyframes, animation, transform: rotate(angle) translate(x,y); и opacity.

Вот пример (с использованием префикса -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; 
    } 
} 

Answer 2

Ну, есть несколько способов. Вот как я на самом деле сделать это:

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, несмотря на то, что у нее был популярный сайт, потому что я обнаружил, что иногда они интенсивно занимаются процессором, и Так как вам не нужна анимация, нет особого смысла.

Также, используя JS, мы можем заставить это работать в каждом популярном браузере от IE6 до последних Webkits.