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 答案：

这是因为运行 Sprite 时的 play_frames 值不同。诚然，这很令人困惑。我会试着解释一下。

当您最初调用 sprite 时，它​​将播放前 (16) 帧。当您再次将鼠标移出时，它将返回 (15) 帧。到目前为止一切都很好。但是事情变得不同步，所以当你播放下一个 (16) 时，你比预期的多一帧。

因此，您必须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 回答