Original Article: Spritely Documentation
Author: spritely.net

Spritely é um plugin simples com apenas dois métodos-chave, sprite() e pan() ambos os quais simplesmente animam o background-image propriedade css de um elemento. A diferença entre os dois é que uma imagem 'sprite' contém dois ou mais 'frames' de animação, enquanto que uma imagem 'pan' contém uma imagem contínua que se desloca para a esquerda ou para a direita e, em seguida, repete. Normalmente, em ambos os casos, você usaria um arquivo png (com ou sem transparência) para isso. Você pode querer usar um gif transparente para o Internet Explorer 6, embora provavelmente não seja tão bom. Seus elementos html já devem ser o tamanho correto que deseja que o sprite apareça, mas a imagem de plano de fundo geralmente será maior do que o elemento html e os métodos sprites reposicionar a imagem de fundo no elemento html.

 

Para documentação em idiomas diferentes do inglês, consulte Documentação não oficial.

 

Começo rápido

Se você é impaciente para experimentar Spritely e quer ver alguns exemplos de trabalho autônomos, você pode baixe algum código de amostra de 0,4 como um arquivo zip.

 

O que há de novo na versão 0.6?

Clique aqui para ver o que há de novo na versão 0.6

 

Animando uma imagem com o método 'sprite ()'

Aqui está um exemplo rápido para você começar ... O seguinte método anima um dos "sprites" de pássaros que voam em torno desta página. O 'sprite' é composto de três frames em uma imagem png transparente, onde cada frame está lado a lado:


Agora, simplesmente precisamos criar um div chamado 'pássaro', escreva-o exatamente para o tamanho correto (180x180 pixels neste caso) e animá-lo com o método sprite (). As duas opções que precisamos usar são 'fps' (frames por segundo) e 'no_of_frames', e. três frames para a imagem acima:

$('#bird').sprite({fps: 12, no_of_frames: 3});


Para fazer o mouse atrair o sprite quando você clicar na tela, use isso:

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();


O método active() faz deste sprite o sprite ativo no lançamento - caso contrário, um sprite com activeOnClick() torna-se ativo somente quando você clicou nele (ou toque-o usando um iPhone / iPad).

O método $('body').flyToTap() observa um clique na página em que ponto, após a conclusão de qualquer movimento atual, o sprite se move para o local clicado. Após alguns segundos, se um método de movimento aleatório tiver sido aplicado (veja abaixo), ele se afasta de novo.

Para que o sprite se mova de forma aleatória, dentro das restrições de pixels (as velocidades são em milissegundos), use isso:

$('#bird')
.sprite({fps: 8, no_of_frames: 3})
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 4000,
pause: 3000
});

 

Panning uma imagem de fundo com o método 'pan()'

Veja como você pode "pan" uma imagem de fundo, como as colinas na demo no topo desta página:

 

 

Para tornar a imagem de fundo deslocada continuamente para a esquerda, crie um elemento html div menor do que a própria imagem e use css para colocar sua imagem como a imagem de plano de fundo, certificando-se de configurar a repetição da imagem de fundo para 'repeat-x', por exemplo, ele se repete continuamente no eixo horizontal.

Agora, anime-o com o método spritely's 'pan()' :

$('#trees').pan({fps: 30, speed: 2, dir: 'left'});


Você pode ajustar a velocidade (pixels por frame) e frames por segundo independentemente um do outro. Por quê? Como uma velocidade menor resultará em uma panela mais suave, no entanto, um frame maior por segundo pode resultar em um desempenho mais lento (especialmente em dispositivos como o iPhone). Você precisará experimentar para obter o equilíbrio certo entre animação suave e desempenho da página.

Para capturar imagens de fundo uma sobre a outra, basta colocar as imagens html abaixo uma outra ou ajustar a propriedade css "z-index", então defina as propriedades fps e speed para dar a ilusão de profundidade. Uma imagem de fundo mais distante deve se mover mais devagar (fps inferior) do que um close-up.

 

O que há de novo na versão 0.6?

Estamos entusiasmados com a versão 0.6. Por quê? Porque Spritely agora tem eventos!

Spritely 0.6 introduz a capacidade de chamar uma função quando um sprite atinge o primeiro, o último ou qualquer outro frame. Três novas opções são introduzidas para isso: on_first_frame, on_last_frame e on_frame. Isso é extremamente útil, porque significa que você pode mudar o "estado" de um sprite em qualquer frame dado, ou interromper a animação completamente.

 

Aqui está um exemplo:

$('#sprite').sprite({
fps: 9,
no_of_frames: 24,
on_first_frame: function(obj) {
obj.spState(1); // change to state 1 (first row) on frame 1
},
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
},
on_frame: { // note - on_frame is an object not a function
8: function(obj) { // called on frame 8
obj.spState(2); // change to state 2 (row 2) on frame 8
},
16: function(obj) { // called on frame 16
obj.spState(3); // change to state 3 (row 3) on frame 16
}
}
});

Também novo em 0.6:

Agora você pode dizer um sprite para começar a jogar em um frame específico:

$('#sprite').sprite({fps: 9, no_of_frames: 24, start_at_frame: 8}); 

 

O que foi novo na versão 0.5?

Novo método: destroy()

Spritely 0.5 introduz o método destroy(). Isso redefine completamente um elemento e remove toda a animação dele.

Por exemplo,

$('#balloons').destroy();

 

 

O que foi novo na versão 0.4?

Dois novos recursos estão disponíveis na versão 0.4:

Vertical Panning

A panada vertical muito aguardada está agora disponível. Isso significa que você pode especificar 'up' ou 'down' como direções ao chamar pan().

Por Exemplo,

$('#balloons').pan({fps: 30, speed: 3, dir: 'up', depth: 70});

 

Animar sprites para trás

Agora é possível jogar um sprite no sentido inverso (por exemplo, rebobinar). Isto é conseguido com a opção 'rewind'. Por exemplo,

    $('#bird')
        .sprite({fps: 1, no_of_frames: 3, rewind: true})
        .spRandom({top: 50, bottom: 200, left: 300, right: 320})
        .isDraggable()
        .activeOnClick()
        .active();

 

 

Alterando frames por Segundo

Agora você pode alterar os frames por segundo com o método fps():

 

$('#bird').fps(30);
$('#hills').fps(12);

 

Mudando as velocidades de fundo em relação à sua profundidade

Agora que nossos antecedentes têm uma profundidade, podemos facilmente mudar sua velocidade, em relação um ao outro com o método $.spRelSpeed().

 

Mova o controle deslizante na demonstração acima para ver a profundidade do efeito na velocidade dos objetos de fundo, comparando-o com esta imagem:

 

Depth explained

 

Para alterar as velocidades de fundo relativamente, combine todos os fundos em um único seletor jQuery e use o spRelSpeed() method:

 

$('#clouds, #hills').spRelSpeed(30);

 

... onde o valor 'spRelSpeed' é a quantidade de pixels para mover, por frame, tendo em mente que é relativo à profundidade do item. Assim, spRelSpeed (30) aplicado a um objeto em profundidade 100 moverá o objeto a 30 pixels por frame. Aplicado a um objeto em profundidade 50, o objeto se moverá em 15 pixels por frame. Você pode alterar frames por segundo separadamente - veja acima.

 

Mudando a velocidade de fundo absolutamente

O método $.spSpeed() permite que você altere uma velocidade de fundo absolutamente (isso equivale a uma profundidade de 100):

 

$('#hills').spSpeed(20); 

 

Mais uma vez, o valor da velocidade é o número de pixels a serem movidos, por frame.

 

Mudando a direção das animações de fundo

Os methods spChangeDir('left') e spChangeDir('right') pode ser usado em uma animação de fundo para mudar a direção esquerda ou direita, respectivamente:

 

$('#hills').spChangeDir('left'); // change background direction left (travel right!)
$('#hills').spChangeDir('right'); // change background direction right (travel left!)

 

Alterando direção ou 'estado' de animações de sprite

Para alterar a direção dos sprites, você precisa usar um método diferente, $.spState(), e você precisa de uma imagem diferente, com várias linhas de frames, uma linha para cada estado, conforme o exemplo a seguir:

 

Two-state sprite image

 

A segunda linha (voando para trás) representa o segundo "estado" do sprite, e você, portanto, altera sua direção com:

 

$('#bird').spState(2); // fly backwards (row 2 of the sprite)
$('#bird').spState(1); // fly forwards (row 1 of the sprite)

 

Parando e iniciando animações

Para parar e iniciar as animações de sprite e fundo, use os métodos spStop(), spStart() e spToggle():

 

$('#bird').spStop(); // pare um sprite ou animação em segundo plano no frame atual
$('#bird').spStop(true); // pare um sprite ou animação de fundo, retornando ao frame 1
$('#bird').spStart(); // comece uma animação de sprite ou de plano de fundo
$('#bird').spToggle(); // ativar ou desativar um sprite ou animação em segundo plano

 

Make a sprite draggable

O método isDraggable() permitirá que um sprite seja arrastado para qualquer ponto da tela. Existem também três parâmetros que podem ser usados com este método; start, stop, e drag. Essas devoluções de chamada opcionais serão disparadas no início, no final ou enquanto você está arrastando o item. Veja o exemplo abaixo:

$('#bird').isDraggable({
start: function() {
// Fade sprite to 70% opacity when at the start of the drag
$('#bird').fadeTo('fast', 0.7);
},
stop: function() {
// Return sprite to 100% opacity when finished
$('#bird').fadeTo('fast', 1);
},
drag: function() {
// This event will fire constantly whilst the object is being dragged
}
});

 

Observe que o método isDraggable () requer jQueryUI.

 

Combinando ações para produzir uma única ação

Você pode, naturalmente, combinar ações em um único método, para que você possa controlar o movimento de toda a sua cena. O código a seguir, por exemplo, define um método 'fly_forwards_quickly()' que você pode controlar com um único clique:

 

var fly_quickly_forwards = function() {
$('#bird')
.fps(20)
.spState(1);
$('#clouds, #hills')
.spRelSpeed(30)
.spChangeDir('left');
};

 

Note que você é recomendado para criar todos os seus métodos em um único objeto, em vez de criar variáveis de página, no entanto, incluímos o exemplo acima por causa da simplicidade.

 

Fazendo um jogo de sprite para um número fixo de frames

Outro novo método disponível na versão 0.2, embora não demonstrado na demo, é a capacidade de criar um sprite que joga para um número fixo de frames e, em seguida, pára:

 

// play a sprite for a maximum of 30 frames
$('#my_sprite').sprite({fps: 9, no_of_frames: 3, play_frames: 30});

 

Mais exemplos

Mais exemplos de código podem ser encontrados lendo o código-fonte desta página - e não se esqueça de poder combinar Spritely com outros métodos jQuery para produzir animações complexas.

 

Wordpress

Nós implantamos Spritely no tema TwentyEleven Wordpress padrão como exemplo para mostrar como você pode adicionar Spritely aos seus temas personalizados do Wordpress.

 

TwentyEleven - Spritely

 

Uma última palavra de cautela...

Use Spritely com moderação. Um pouco Spritely vai um longo caminho, mas o uso excessivo dessas técnicas pode levar a um desempenho fraco, especialmente em dispositivos móveis. Um pequeno movimento em uma página grande pode ser melhor do que um monte de movimento em uma pequena. Por favor, teste Spritely cuidadosamente para o seu público alvo / plataformas antes de desenvolver seu site, pois o desempenho pode variar de plataforma para plataforma.

 

Documentação não oficial

Nós listamos documentação e recursos não oficiais aqui. Isso também inclui traduções da documentação oficial.