0

HTML5または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.25秒ごとにボールはこれらのキーフレームの1つを想定する必要があります。アニメーションにループはありません。

CSSまたはHTML5/Javascriptを使用してそれを行う方法の例を挙げていただけますか？（CPUをあまり使用しないアプローチを生成する方法）。ありがとう。

ここに画像の説明を入力してください

4

2 に答える 2

4

@keyframesこれは、、、およびを使用animationして純粋なCSS3で実行できます。transform: rotate(angle) translate(x,y);opacity

次に例を示します（最適な互換性のために-webkit-ベンダープレフィックスを使用-moz-し-o-、、を使用します）：http: //jsfiddle.net/QaPaK/コンパクトな例に他のプレフィックスを追加しなかったため、この例はChromeとSafariでのみ機能します。-ms-

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-23T17:14:26.327 に答える
1

さて、いくつかの方法があります。これが私が実際に行う方法です：

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アニメーションは、人気のあるWebサイトがあるにもかかわらず、CPUを集中的に使用することがあり、トゥイーンが不要なため、あまり意味がないため、使用しませんでした。

また、JSを使用することで、IE6から最新のWebkitまで、すべての一般的なブラウザーでこれを機能させることができます。

于 2012-06-23T17:34:38.370 に答える