AnimateImage

Index

• Introduction
  • Features
  • Usage
• Download
• Demos
• Code Samples
• API Specification
• FAQ
• Alternative Scripts
• Animation Specification
• Support Me?

Introduction

AnimateImage is a JavaScript code which displays various images like animated GIF.

Features

• Displays various images successively like animated GIF
  • Continuous images whose filename is sequential number
  • Any images whose filename is non-sequential number
• Supports all image formats supported by Web browser
  • PNG, JPEG, GIF, BMP, etc.
  • Transparent PNG: Transparent background of animated images
  • High-quality images: more than 256 colors photos and illustrations
• To Specify animation interval (default is 0.5 seconds)
• To Specify repeat count of animation (default is infinite iteration)
• To control (play/stop/replay) animation at any time
• Simple Slide-Show with not continuous images
• Stand-alone script and only just 2.5 KB file size
  • JS libraries such as jQuery is not required

Usage

Write the following code in "head" or "body" element to load AnimateImage script.

<script type="text/javascript" src="animateImage.js"></script>

If you want to animate Image1.png, Image2.png, … Image10.png, write the following code.

<script type="text/javascript">
    animateImage('Image[1-10].png');
</script>

* animateImage() function accepts the following arguments. See Code Samples and API Specification for more information.

• Zero-padding filenames (01, 02, …, 001, 002, …)
• Non-sequential filenames
• Image title
• ID string to apply styles (CSS)
• Animation delay (interval)
• Repeat count of animation
• Whether rewinds to first image at the end of animation

* Using ImageAnimator object, you can play/stop/replay animation at any time. And using Animations object, you can change common settings of all animations. See Code Samples and API Specification for more information.

Download

• animateImage.js
• animateImage.min.js (Minified)

Version

0.8.0.3 (2011-08-29)

Author

attosoft

License

MIT License

Supported Browsers

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera

* AnimateImage is coded with JavaScript 1.4 / JScript 5.0 (IE5). So AnimateImage may support most browsers.

Demos

Transparent PNG

Transparent background of animated images with transparent PNGs. In this demo, background color changes on mouse hover.

Simple Slide-Show

High-quality photos and illustrations which is more than 256 colors. In this demo, 24-bit colors JPEGs are animated.

Non-sequential filenames

Any files whose filename is non-sequential number. In this demo, "blank.png", "website.png", "blog.png", and "download.png" are animated.

Animation Control (Play/Stop/Replay)

Animation control (play/stop/replay) at any time. In this demo, [Start] button starts (restarts) animation, [Stop] button stops (pauses) animation, and [Replay] button replays animation from the beggining.

Code Samples

Here is code samples when animates the following images.

• Foo1.png, Foo2.png, … Foo5.png (5 PNGs)
• Bar0.png, Bar1.png, … Bar9.png (10 PNGs)
• Baz01.jpg, Baz02.jpg, … Baz15.jpg (15 JPEGs, zero-padding)

Code Sample 1

Animations with image title.

animateImage('Foo[1-5].png', 'Image Foo');
animateImage('Bar[0-9].png', 'Image Bar');
animateImage('Baz[01-15].png', 'Image Baz');

* The sequence number of Image Foo starts from 1, the number of Image Bar starts from 0, and the number of Image Baz starts from 01. Then animation delay is 0.5 seconds (default), repeat count of animation is infinite iteration (default).

Code Sample 2

Animation with 5 images. In only Image Foo, image title and ID string are specified.

animateImage('Foo[1-5].png', 'Image Foo', 'id-foo');
animateImage('Bar[0-4].png', '', null);
animateImage('Baz[01-05].png', null, null);

* In Image Bar, alt attribute with empty string is added to img element (img@alt=""). This represents that alternative text of image is unnecessary. In Image Baz, img@alt and img@title are not added. In both Imabe Bar and Image Baz, ID string is generated automatically.

Code Sample 3

Animation with different animation delay and repeat count. Image Bar is rewinded to first image at the end of animation.

animateImage('Foo[1-5].png', 'Image Foo', null, 1000, 5);
animateImage('Bar[0-9].png', 'Image Bar', null, 500, 10, true);

* At the end of animation, Image Foo remains last image (Foo5.png), while Image Bar is rewinded to first image (Bar0.png).

Code Sample 4

Animation once at 1 second interval. But in only Image Baz, animation iterates infinitely at 0.5 seconds interval.

Animations.delay = 1000;
Animations.repeat = 1;
animateImage('Foo[1-5].png', 'Image Foo');
animateImage('Bar[0-9].png', 'Image Bar');
animateImage('Baz[01-15].jpg', 'Image Baz', null, 500, -1);

Code Sample 5

Animation with any images whose filename is non-sequential number.

var files = ['Foo1.png', 'Bar0.png', 'Baz01.jpg'];
animateImage(files);

animateImage(['Foo5.png', 'Bar9.png', 'Baz15.jpg']);

Code Sample 6

Animation control (start/stop/replay). Repeat count of animation is once.

var animator = new ImageAnimator('Foo[1-5].png', null, null, null, 1);

* If you control animation with buttons, write the following code.

<input type="button" value="Start" onclick="animator.animate()" />
<input type="button" value="Stop" onclick="animator.stopAnimate()" />
<input type="button" value="Replay" onclick="animator.animate(true)" />

Code Sample 7

To apply styles (CSS) to animation images. In only Image Bar, ID string to apply individual style is specified.

animateImage('Foo[1-5].png', 'Image Foo');
animateImage('Bar[0-9].png', 'Image Bar', 'id-bar');

Write class selector (img.animation) for common styles, and write id selector (img#id-bar) for individual style.

img.animation {
    border: solid medium silver;
}

img#id-bar {
    border: dashed medium blue;
}

API Specification

animateImage() Function

Animates images.

Syntax

animator = animateImage(files, title, id, delay, repeat, rewind)

Arguments

files (required)

Image files. Sequenctial part of filename is "[x-y]" format (x: first sequence number, y: last sequence number). If sequence number is zero-padding, use "[0x-yy]" format. And if files are non-sequential, use Array object.

title

Image title. This is value of img@alt, img@title attribute. (attributes are not added in null or default)

id

ID string of img element. This is unique value for each animation. (automatically generated in null or default)

delay

Animation delay (Animations.delay in null or default)

repeat

Repeat count of animation (Animations.repeat in null or default)

rewind

Whether rewinds to first image at the end of animation. This is boolean (true/false). (Animations.rewind in default)

Return Value

animator

ImageAnimator object. you can stop/replay animation using this object.

Animations Object

Common settings of all animations.

* The value is reflected at calling animateImage() function. If you change the value, you should set before the start of animation.

Properties

Animations.delay

Animation delay. This is on the millisecond (ms). Default is 500 ms.

Animations.repeat

Repeat count of animation. -1 means infinite iteration, and 0 means no animation (only displays first image). Default is -1.

Animations.rewind

Whether rewinds to first image at end of animation. Default is false.

Animations.className

class name of img element (img@class attribute value). Default is "animation". class attribute is not added if the value is undefined.

ImageAnimator Object

Controls animation of images.

Constructor Function

ImageAnimator(files, title, id, delay, repeat, rewind)

* See animateImage() function about arguments specification.

animate(replay) Method

Plays (Replays) animation.

If argument "replay" is true or you call this function after the end of animation, animation is replayed from the beggining.

stopAnimate() Method

Stops (Pauses) running animation.

FAQ

Differences between ImageAnimator object and animateImage() function

ImageAnimator Object

Use when you want to control the start timing of animation.

• In creating object, first image is displayed.
• Animation does not start until calling animate() method.

animateImage() Function

Use when you do not care about starting animation automatically.

• In calling the function, first image is displayed and animation starts.

Alternative Scripts

• Square Goldfish ≫ AnimatedPNG
• jQuery Cycle Plugin

Animation Specification

• Animated GIF
• MNG (Multiple-image Network Graphics)
• APNG (Animated Portable Network Graphics)
• Motion JPEG
• SVG Animation

Support Me?

• If you have any feedbacks or questions, visit Contact Me
• If you like this script, please consider making a donation to support the development

Any comments will be very helpful and appreciated. Thank you for your support!

---

"keyboard keys" by chromatix is licensed under Creative Commons License.

Related Posts

1. JavaScript: 複数の画像をアニメーション GIF のように表示する AnimateImage (旧バージョン)
2. AnimateImage Script 0.8 released
3. AnimateImage version 0.6.5 公開
4. AnimateImage version 0.7 公開
5. AnimateImage version 0.6.2 公開