前端moa gif json显示动画

jsPao

已于 2024-01-18 15:53:10 修改

阅读量752

点赞数 7

文章标签：前端 json

于 2024-01-11 17:15:34 首次发布

本文链接：https://blog.csdn.net/array__/article/details/135532549

版权

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);
});

swift-Gif动画和JSON动画分析 - 简书

前端动画的另一种方式 json动画-CSDN博客

https://www.cnblogs.com/chonglu/p/16923789.html