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

【问题标题】：Spritely - Play CSS sprite forward and backward on clickSpritely - 单击时向前和向后播放 CSS 精灵
【发布时间】：2013-12-04 04:31:48
【问题描述】：

我正在尝试创建一个可点击的精灵动画，该动画在第一次单击时向前播放（第 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>

【问题讨论】：

标签： jquery css animation sprite spritely

【解决方案1】：

基于this SO answer:

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

当您最初调用 sprite 时，它将播放前 (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（我结合了点击功能）

至于在动画期间禁用它，你如何拥有它几乎是你能得到的。我唯一可能做的不同是禁用元素的点击事件而不是更改显示，但这是个人喜好

【讨论】：

啊！非常感谢，现在完美了。并感谢其他 SO 帖子的链接！