AnimateImage Old Version (v0.7 – v0.8.3)

• By attosoft
• Posted in AnimateImage
• On August 18, 2012
• No Comments.

* This post is for information about older AnimateImage (version 0.8.x).

Index

• Introduction
  • Features
• Download
• Code Samples
• API Specification

Introduction

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

* See AnimateImage Official Site for latest information.

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.

ダウンロード

This is the source code of old version (v0.8.3).

animateImage-0.8.3.min.js

• v0.8.3, 2012-08-16, 2.3 KB
• Free license (for personal & non-commercial, donate to support)
• Optimized and compressed code

animateImage-0.8.3.js

• v0.8.3, 2012-08-16, 8.8 KB
• Commercial license ($5.00)
• Uncompressed code with comments
• Paid support (technical questions, customization, etc.)

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. Sequential 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.pauseAtFirst

Whether pauses at the first image in animation. Default is false.

Animations.pauseAtLast

Whether pauses at the last image in animation. Default is false.

Animations.showBlank

Whether displays blank image between animation cycles. Default is false.

If this option is true, animation images are fixed to the size of the first image. This is not availabe in IE7 or earlier because it uses transparent GIF image with data:url.

Animations.cycleDelay

Animation cycle delay. To specify on the millisecond (ms). Default is 0.

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.

---

“keyboard keys” by chromatix is licensed under Creative Commons License.