Spritely - Воспроизведение CSS-спрайта вперед и назад по щелчку

Я пытаюсь создать анимацию с щелчком, которая воспроизводится вперед (кадр 0 -> X) при первом нажатии и остановке в кадре X. После завершения нажмите воспроизведите его в обратном направлении (рамка X -> 0) и остановите рамку 0. Промойте/повторите.Spritely - Воспроизведение CSS-спрайта вперед и назад по щелчку

Это 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>

источник

2013-12-04 ahainen

на основе this SO answer:

Это происходит из-за различных значений 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 (я совмещал функцию Click)

Что касается его отключения во время анимации, как вам это так хорошо, как вы можете это получить. Единственное, что я могу сделать по-другому, это отключить событие click для элемента вместо изменения отображения, но это личное предпочтение

источник

2013-12-04 04:50:01

Ahhh! Большое вам спасибо, теперь это работает отлично. И спасибо за ссылку на другое сообщение SO! – ahainen

Spritely - Воспроизведение CSS-спрайта вперед и назад по щелчку

ответ

Смежные вопросы