web123456

Use Lottie to achieve front-end svg animation effect

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <title>svg animate</title>
  • <script src="/ajax/libs/bodymovin/5.10.1/" type="text/javascript"></script>
  • </head>
  • <body>
  • <div class="animation"></div>
  • </body>
  • <script>
  • const animation = bodymovin.loadAnimation({
  • container: document.querySelector('.animation'), // Dom elements that need to be rendered
  • path: './Oxygen.json', // Animation file
  • renderer: 'svg', // Rendering method
  • loop: true, // Whether to play it loop
  • autoplay: true, // Whether to play automatically
  • name: "New Year", // Animation reference name
  • })
  • </script>
  • </html>