Home  Web-development   The web ani ...

The Web Animations API example in browser

The Web Animations API provides a powerful way to create and control animations in web applications using JavaScript. It allows you to animate DOM elements, control their timing, and create complex animation sequences with ease. Below is a basic example demonstrating how to use the Web Animations API to animate a DOM element.

Example: Animating a Box Element

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Animations API Example</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Web Animations API Example</h1>
  <div id="box"></div>
  <button id="startAnimation">Start Animation</button>
  <button id="stopAnimation">Stop Animation</button>
  <button id="pauseAnimation">Pause Animation</button>
  <button id="resumeAnimation">Resume Animation</button>
  
  <script src="script.js"></script>
</body>
</html>

2. JavaScript Code (script.js)

const box = document.getElementById('box');
const startButton = document.getElementById('startAnimation');
const stopButton = document.getElementById('stopAnimation');
const pauseButton = document.getElementById('pauseAnimation');
const resumeButton = document.getElementById('resumeAnimation');

let animation;

// Define the keyframes and options for the animation
const keyframes = [
  { transform: 'translateX(0px)', backgroundColor: 'blue' },
  { transform: 'translateX(300px)', backgroundColor: 'red' }
];

const options = {
  duration: 2000,
  iterations: Infinity,
  easing: 'ease-in-out'
};

// Function to start the animation
function startAnimation() {
  animation = box.animate(keyframes, options);
}

// Function to stop the animation
function stopAnimation() {
  if (animation) {
    animation.cancel();
  }
}

// Function to pause the animation
function pauseAnimation() {
  if (animation) {
    animation.pause();
  }
}

// Function to resume the animation
function resumeAnimation() {
  if (animation) {
    animation.play();
  }
}

// Event listeners
startButton.addEventListener('click', startAnimation);
stopButton.addEventListener('click', stopAnimation);
pauseButton.addEventListener('click', pauseAnimation);
resumeButton.addEventListener('click', resumeAnimation);

Explanation

  1. HTML Structure:

    • The HTML includes a <div> element with an ID of box which will be animated.
    • Four buttons control the animation: "Start Animation", "Stop Animation", "Pause Animation", and "Resume Animation".

  2. JavaScript Code:

    • Keyframes and Options: The keyframes array defines the start and end states of the animation. In this example, the box element will move horizontally and change color. The options object specifies the duration, iterations, and easing function for the animation.
    • Start Animation: The startAnimation function creates and starts the animation using the animate method on the box element.
    • Stop Animation: The stopAnimation function stops the animation and resets it using cancel.
    • Pause Animation: The pauseAnimation function pauses the animation, which can be resumed later.
    • Resume Animation: The resumeAnimation function resumes the paused animation.
Published on: Jul 25, 2024, 03:06 AM  
 

Comments

Add your comment