Question

我正在尝试创建一个可点击的精灵动画，在第一次点击时向前播放（第0帧 - > X）并在第X帧停止。完成后，点击它将反向播放（第X帧 - ＆gt; 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>

Answer 1

基于this SO answer：

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

当你最初调用精灵时，它将播放第一（16）帧。什么时候   再次鼠标移出，它会回到（15）帧。到目前为止一切都很好。   但事情变得不同步，所以当你玩下一个（16）时，你就是   比预期更进一步。

因此，您必须在初次运行后将play_frames减少一个

$('.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;
    }   
});

Updated demo（我结合了点击功能）

至于在动画期间禁用它，你如何拥有它就像你能得到它一样好。我可能做的唯一不同的是禁用元素的click事件而不是更改显示，但它是个人偏好

Spritely - 单击时向前和向后播放CSS精灵

1 个答案: