npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-spriteanimator

v1.0.8

Published

Create fancy sprite animations with this jQuery plugin

Downloads

3

Readme

Jquery spriteAnimator plugin

Create fancy sprite animations with this jQuery plugin

Demo's:

Also check out https://galaxy.fili.nl, an animating website fully based on this library. The source for it can be found here

Simple looping animation example

reading spritesheet

Define a html-tag on the page and give it a sprite-sheet as the background-image. Then attach the spriteAnimator plugin on the jQuery wrapper, giving it some information about the sprite-sheet and where to put it on the page. Finally call .play() on it with some optional parameters.

<div id="sprite" style="background-image:url(reading.png)"></div>
<script>
     var spriteAnim = $('#sprite').spriteAnimator({
        top: 200,
        left: 100,
        cols: 3,
        rows: 9
    });
    spriteAnim.play({
        run: -1,
        delay: 100
    });
</script>

.spriteAnimator( Object options )

When attaching the spriteAnimator plugin you can define the following options

Property | Required | Default value | Explanation :------------- |:-------------:| :-------------:| :------------- debug | no | false | Show debug logging in console url | no | null | url to spriteSheet, if not set the css background-image will be used cols | yes | null | Number of columns in the spritesheet rows | yes | null | Number of rows in the spritesheet cutOffFrames | no | 0 | Number of sprites not used in the spritesheet, for example the last sprite in a sheet might be blank top bottom left right | no | | Starting offset position, will take current positions if not defined startSprite | no | 1 | Sprite number to show when done loading onLoaded | no | null | Callback function that will be called when loading has finished

The spriteAnimator returns a reference to the plugin on which you can call the methods below.

.addScript( String name, Array script)

Add a named animation sequence. The script parameter should be an array consisting of frame objects. These frame objects can have the following properties:

Property | Required | Default value | Explanation :------------- |:-------------:| :-------------:| :------------- sprite | yes | | Which sprite number to show delay | no | global delay time | Time in ms to wait after this frame has been rendered top bottom left right | no | 0 | Move the position of the placeholder to any direction after frame has been rendered

Example:

spriteAnim.addScript('paw', [
    { sprite:22, delay:100 },
    { sprite:23, delay:100 },
    { sprite:24, delay:3000 },
    { sprite:23, delay:100 }
]);

.play( Object options )

Plays a named animation sequence or resume if not playing. If no options object is given, it resumes the current animation script or starts playing all frames.

Property | Required | Default value | Explanation :------------- |:-------------:| :-------------:| :------------- play | no | true | Start playing the animation right away run | no | 1 | The number of times the animation should run, -1 = infinite delay | no | 50 | Default delay for all frames that don't have a delay set tempo | no | 1 | Timescale for all delays, double-speed = 2, half-speed = .5 reversed | no | false | Direction of the animation head, true == backwards outOfViewStop | no | false | Stop animation if placeholder is no longer in view script | no | all frames | New animation array or named script that has been previously been defined, see .addScript() onPlay | no | | Callback called when animator starts playing onStop | no | null | Callback called when animator stops playing onFrame | no | null | Callback called when the new frame is rendered

.setTempo( Integer tempo )

Set a new tempo for the animation

.reverse()

Reverse direction of play

.stop()

Stop the animation and reset the playhead

.reset()

Reset playhead to first frame

.nextFrame()

Go forward one frame in script

.previousFrame()

Go back one frame in script

.goToFrame( Integer frameNumber )

Jump to certain frame within current animation sequence

.showSprite( Integer spriteNumber )

Show certain sprite (circumvents the current animation sequence)

.currentFrame()

Get the current frameNumber from script

.currentSprite()

Get the current spriteNumber that is shown

Controlling playback using jQuery events

The built-in jQuery .trigger() method can be used to trigger the following methods:

  • play()
  • reverse()
  • setTempo()
  • stop()
  • reset()
  • nextFrame()
  • previousFrame()
  • goToFrame()
  • showSprite()

This allows for some advanced interaction between multiple sprite animations to take place, for example:


var spriteAnim1 = $('#sprite1').spriteAnimator({
    cols: 3,
    rows: 9
});

var spriteAnim2 = $('#sprite2').spriteAnimator({
    cols: 3,
    rows: 9
});

spriteAnim1.trigger('play', {
    run: 3,
    script: [
        { sprite:1 },
        { sprite:2 },
        { sprite:3, delay:350} ,
        { sprite:4 }
    ],
    onStop: function() {
        spriteAnim2.trigger('play');
    }
});

In this example sprite1 will trigger play() on sprite2 after it's animation has been completed.

License

The artwork in this repository is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Meaning you are free to:

  • Share — copy and redistribute the material in any medium or format
  • Adapt — remix, transform, and build upon the material

Under the following terms:

  • Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
  • NonCommercial — You may not use the material for commercial purposes.