1

最初のクリックで順方向に再生 (フレーム 0 --> X) し、フレーム X で停止するクリック可能なスプライト アニメーションを作成しようとしています。完了したら、クリックすると逆方向に再生され (フレーム X --> 0)、フレーム 0 で停止します。リンス/繰り返し。

この jsFiddle にはかなり近いものがあります: http://jsfiddle.net/ahainen/njHAC/3/

しかし、問題があります。中央の円をクリックすると、順方向に再生されます。しかし、完了時に円をクリックすると再生されますが、間違ったフレームで終了します。そこから、壊れたままです。

私はこれを学んでいるので（ここではグラフィックデザイナー）、クリックしてアニメーション化して巻き戻すことでCSSスプライトアニメーションを理解しようとしています。これよりも良い方法があれば教えてください。

また、現在、アニメーション中にクリックできないようにするタイマーがあります。ユーザーがクリック (またはホバー) すると、方向が逆になり、フレーム 0 またはフレーム X で停止するようになれば幸いです。

さらに情報を提供できる場合はお知らせください。

関連するコード:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/spritely.js"></script>
<style>
body {background:#181818;}
.spriteContainer {
    margin: 0 auto;
    width:320px;
    height:240px;
    position:relative;
    padding-top:120px;
    display:block;}
.clickButton {
    width:320px;
    height:240px;
    position:absolute;
    z-index:2;}
.animatedSprite {
    width: 320px;
    height: 240px;
    background-image: url("http://i.imgur.com/aBlIGEh.png");
    display:block;
    position:absolute;
    z-index:1;}
</style>
</head>
<body>
<div class="spriteContainer">
    <div class="clickButton"></div>
    <div class="animatedSprite"></div>
</div>

<script type="text/javascript">
$(document).ready(function() {

var play_index = 0;

$('.clickButton').click(function(){
$('.clickButton').css("display", "none");
    setTimeout(function(){
        $('.clickButton').css("display", "block");
    }, 940);
});


$('.clickButton').click(function(){
    console.log('second function start');

    if(play_index == 0) {
        $('.animatedSprite').sprite({fps: 24, no_of_frames:16, play_frames:16});
        play_index = 1;
    }
    else {
        $('.animatedSprite').sprite({fps: 24, no_of_frames:16, play_frames:16, rewind:true});
        play_index = 0;
    }
});
});
</script>
</body>
</html>
4

1 に答える 1

2

このSOの回答に基づいて:

これは、スプライトの実行時に異なる play_frames 値が原因で発生しています。確かに、それはかなり混乱しています。説明してみます。

スプライトを最初に呼び出すと、最初の (16) フレームが再生されます。もう一度マウスアウトすると、(15) フレーム戻ります。これまでのところ、すべて順調です。しかし、物事が同期しなくなるため、次の (16) を再生すると、予想よりも 1 フレーム進んでいます。

play_framesその結果、最初の実行後に を 1減らす必要があります。

$('.clickButton').click(function(){
    $('.clickButton').css("display", "none");
    setTimeout(function(){
        $('.clickButton').css("display", "block");
    }, 940);

    if(play_index == 0) {
        $('.animatedSprite').sprite({fps: 24, no_of_frames:16, 
                                     play_frames:playFrames});
        play_index = 1;
        playFrames = 15;
    }
    else {
        $('.animatedSprite').sprite({fps: 24, no_of_frames:16, 
                                     play_frames:playFrames, rewind:true});
        play_index = 0;
    }   
});

更新されたデモ(クリック機能を組み合わせました)

アニメーション中にそれを無効にすることに関しては、それをどのように手に入れることができるかはあなた次第です. 私が別の方法で行う唯一のことは、表示を変更する代わりに要素のクリックイベントを無効にすることですが、それは個人的な好みです

于 2013-12-04T04:50:01.520 に答える