前端moa gif json显示动画

JSON动画

第三方库或插件：

• 使用lottie-web库：将JSON文件导入，并在HTML中添加一个空的div作为容器，再调用lottie.loadAnimation()方法加载JSON文件，然后将其渲染到div容器中。
• 使用bodymovin插件：将JSON文件导入后，在HTML文件中添加一个canvas元素，并通过bodymovin.loadAnimation()方法加载JSON文件，然后将其渲染到canvas元素中。

通过JS的API

requestAnimationFrame()

使用requestAnimationFrame()方法创建一个动画函数，将JSON文件的数据传递给该函数，使用Web动画API创建一个SVG动画，并将JSON数据渲染到SVG动画中。

animate()

animate(keyframes, options)

const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});