Creating a dynamic 2D image using HTML5 animation

Question

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button.

I have come across libraries that allow me to move images but what I really need is a way to change the images as the rabbit moves within a div on the webpage.

In my 'imgs/' folder, I have the following rabbit images: rabbit-image1.jpg, rabbit-image2.jpg, rabbit-image3.jpg, rabbit-image4.jpg, rabbit-image5.jpg, and rabbit-image6.jpg.

When moving the rabbit from one point to another on the page, I want the images to loop seamlessly until the rabbit reaches its final position, creating the illusion of a running motion.

Any suggestions or tips would be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

To create an animation with images, you simply need to provide the images in order as an array and set a timer.

function ImageAnimation(images, timePerImage) {
    this.images = images;                     
    this.currentTime = 0;                    
    this.currentImage = 0;                   
    this.imageCount = images.length;          
    this.timePerImage = timePerImage || 100;  
};

ImageAnimation.prototype.constructor = ImageAnimation;

ImageAnimation.prototype.tick = function(elapsed) {
    this.currentTime += elapsed;
    if(this.currentTime >= this.timePerImage) {
        this.currentImage++;
        if(this.currentImage >= this.imageCount) {
            this.currentImage = 0;
        }
        this.currentTime = 0;
    }
};

ImageAnimation.prototype.getImage = function() {
    return this.images[this.currentImage];
};

var imageArray = [];
for(var i = 0; i < 6; i++) {
    imageArray[i] = new Image();
    imageArray[i].src = "imgs/image" + (i+1) + ".jpg";
}

var animation = new ImageAnimation(imageArray);

var time = Date.now();
function loop() {
    requestAnimationFrame(loop);
    var elapsed = Date.now() - time;
    time += elapsed;

    animation.tick(elapsed); 
    var image = animation.getImage(); 
    
}

If not using canvas, you can use strings instead of images in the array.

Answer 2

To create an animation with images, you simply need to provide the images in order as an array and set a timer.

function ImageAnimation(images, timePerImage) {
    this.images = images;                     
    this.currentTime = 0;                    
    this.currentImage = 0;                   
    this.imageCount = images.length;          
    this.timePerImage = timePerImage || 100;  
};

ImageAnimation.prototype.constructor = ImageAnimation;

ImageAnimation.prototype.tick = function(elapsed) {
    this.currentTime += elapsed;
    if(this.currentTime >= this.timePerImage) {
        this.currentImage++;
        if(this.currentImage >= this.imageCount) {
            this.currentImage = 0;
        }
        this.currentTime = 0;
    }
};

ImageAnimation.prototype.getImage = function() {
    return this.images[this.currentImage];
};

var imageArray = [];
for(var i = 0; i < 6; i++) {
    imageArray[i] = new Image();
    imageArray[i].src = "imgs/image" + (i+1) + ".jpg";
}

var animation = new ImageAnimation(imageArray);

var time = Date.now();
function loop() {
    requestAnimationFrame(loop);
    var elapsed = Date.now() - time;
    time += elapsed;

    animation.tick(elapsed); 
    var image = animation.getImage(); 
    
}

If not using canvas, you can use strings instead of images in the array.

Creating a dynamic 2D image using HTML5 animation

Answer №1

Similar questions

The screen is cloaked in a dark veil, rendering it completely inaccessible with no clickable

Which specific file is being requested when a forward slash (/) is placed immediately after the website URL?

Align a component vertically in a FlexBox using Material UI

clearing all input fields upon submission in React Native

The XML response from Ajax is returning as empty

Mastering the CSS Art of Working with Sprite Images and Their Positioning

Scroll sideways with AJAX content replacement

Activate automatic selection when the input field is disabled

Trouble locating DOM element in Angular's ngAfterViewInit()

Only display entries with no content

How can NodeJS implement ThreadLocal variable functionality without relying on req and res.locals?

Attempting to use tabs within a tab does not function correctly

Learning to monitor for incoming messages in a Discord channel from the ground up

Retrieve data from a JSON array using either JavaScript or PHP

Having trouble with the filtering feature in Material UI Datagrid

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

"Encountering a hang while using the .save() function and only

Filtering dynamically generated table rows using Jquery

Having issues with npm python-shell integration within electron framework

Is it better to have Angular and Laravel as separate applications or should Laravel serve the Angular app?