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

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

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

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

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值