HTML 5 - zeer eenvoudige animatie

Ik moet begrijpen hoe ik een eenvoudige animatie in HTML 5 of CSS3 kan maken.

Stel dat je deze sprite hebt (zie afbeelding) en je een animatie met 4 frames moet maken. De animatie moet exact 1 seconde duren. Ik wil geen vloeiende animatie tussen de frames, ik wil dat het van de ene staat naar de andere springt zonder interpolatie. Dit zijn de bal 4 frames:

                  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

In cv moet elke bal van 0.25s een van deze keyframes aannemen. Geen lus in de animatie.

Kunnen jullie een voorbeeld geven over hoe dat te doen met CSS of HTML5/Javascript? (de methode die de minder CPU-intensieve benadering produceert). Bedankt.

enter image description here

0
Gebruik transform: roteer in css3 en setTimeout in javascript.
toegevoegd de auteur Larry Battle, de bron

2 antwoord

Dit kan gedaan worden met pure CSS3 met behulp van @keyframes , animation , transformeren: roteren (hoek) vertalen (x, y); en opacity .

Here's an example (using the -webkit- vendor prefix, use -moz-, -o-, -ms- for optimal compatibility): http://jsfiddle.net/QaPaK/ The example only works in Chrome and Safari, because I did not add the other prefixes for a compact example.

HTML (bijvoorbeeld een element animeren):

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;
    }
}
4
toegevoegd
geef je een voorbeeld? kan CSS3 omgaan met de precisie van het tonen van elk keyframe op het exacte moment?
toegevoegd de auteur SpaceDog, de bron
@Truth ja, ik vroeg naar rotatie, vertaling, dekkingsverandering en schaal
toegevoegd de auteur SpaceDog, de bron
ahhh, bedankt. Slechts één ding: hoe "bevestig" ik de animatie aan het object? Stel dat ik een <div class = "ball"> </div> heb en deze .ball-klasse definieert het balbeeld als achtergrond. Nu, hoe bevestig ik deze div met "ball" klasse aan deze keyframes, zodat de bal ze zal uitvoeren?
toegevoegd de auteur SpaceDog, de bron
nee, wat ik vraag is dit: ik begrijp je code. Wat ik niet zie, is dat je deze code verbindt met het bal-object.
toegevoegd de auteur SpaceDog, de bron
ah ... bedankt !!!!
toegevoegd de auteur SpaceDog, de bron
@Otterly Een voorbeeld toegevoegd. De "animatie" springt van toestand 1 naar 2 naar 3 naar 4.
toegevoegd de auteur Rob W, de bron
@Otterly "foo" is de naam van je animatie. Dit kan elke geldige ID zijn. Gebruik vervolgens de eigenschap animation-name om de animatie toe te voegen. Zie mijn voorbeeld, ik heb echt de minimaal noodzakelijke code gebruikt, en alle eigenschappen zijn door mensen leesbaar ("naam", "duur", "iteratietelling").
toegevoegd de auteur Rob W, de bron
@Otterly In de JSFiddle heb ik de bal gedefinieerd als . Dat is jouw "bal-object".
toegevoegd de auteur Rob W, de bron

Welnu, er zijn een paar manieren. Dit is de manier waarop ik het eigenlijk zou doen:

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

In wezen gebruik ik:

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);    
});​

Dan in CSS een klasse voor elk frame:

.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 */
}

Ik heb geen CSS3-animaties gebruikt, ondanks dat ik er een populaire website over heb, omdat ik heb ontdekt dat ze soms CPU-intensief zijn en ook omdat je geen tweening nodig hebt, heeft het weinig zin.

Door JS te gebruiken, kunnen we dit in elke populaire browser laten werken, van IE6 tot de nieuwste Webkits.

1
toegevoegd