image-animator
v1.0.3
Published
A Simple image seqence player
Downloads
1
Maintainers
technicolorenvyReadme
Image Animator
I once worked on a site for an animated movie that required this low-res style image animation component. I figure if it was good enough for a high-traffic, webby-recognized site; it was good enough to share.
Weighing in at 2.2K (uncompressed), ImageAnimator has zero dependencies, with the exception of the DOM, so you can pretty much plug and play.
Install
npm i image-animator --saveor using yarn
yarn add image-animatorNote: If using a package manager (recommended) you will likely want to integrate w/ your own build tools. However, the dist directory contains prebuilt versions of the project for easy inclusion in a web page.
Usage
Create a imageAnimator instance, by passing an opts object like so.
let imageAnimator = new imageAnimator({el: SOME_DOM_NODE_THAT_CONTAINS_IMAGES});Valid options are
el: Object (required)
The DOM node that contains the images that we will be using in the imageAnimator.
Accept a native JS element like document.getElementById('image-animator-image-sequence').
fps: Number (optional)
The target frames per second of the imageAnimator animation
default value: 24
delay: Number (optional)
Amount of time (in milliseconds) that should pass between retarting the imageAnimator sequence (only evaluated if isLooping is set to true)
default value: false
isLooping: Boolean (optional)
Set to true if the imageAnimator sequence should restart after finishing
default value: false
loops: Number (optional)
The max number of times the imageAnimator sequece should restart
default value: null
onInit: Object (optional)
Optional function that is called when the imageAnimator object is initialized.
onComplete: Object (optional)
Optional function that is called when the imageAnimator object is done animating.
Examples
Check Here for more in-depth examples.
Consider the following.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="browserified-image-animator.min.js"></script>
</head>
<body>
<h1>imageAnimator example</h1>
<div id="image-animator-image-sequence">
<img src="img1.png" alt="some alt"/>
<img src="img2.png" alt="some alt"/>
<img src="img3.png" alt="some alt"/>
<img src="img4.png" alt="some alt"/>
<img src="img5.png" alt="some alt"/>
...
</div>
</body>
<script type="text/javascript">
(function(){
var imageAnimator = new imageAnimator({
el: document.getElementById('image-animator-image-sequence'),
isLooping: true,
fps: 30
});
})();
</script>
</html>The JS bit above does three things
- Creates an instance of
imageAnimatornamedimageAnimatorand passes the the#image-animator-image-sequencediv as theelproperty. - Sets the
isLoopingtotrue, so the image sequence will restart when it has completed - Sets the
fpsto30frames per second.
Contributing
If you have a bug fix or feature proposal, submit a pull request with a clear description of the change, plus tests.
License
MIT © Joseph (Jos) Smith