链接:Lottie简介 + 结合到vue3中使用_vue lottie-CSDN博客
知识常学常新,今天看同事写的项目,全部用svg实现的,太酷炫了。然后就发现一个宝藏插件Lottie,利用它就可以不用自己手搓svg实现svg酷炫动图效果。
小伙伴快来看下吧
<!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="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.1/lottie.min.js" type="text/javascript"></script>
</head>
<body>
<div class="animation"></div>
</body>
<script>
const animation = bodymovin.loadAnimation({
container: document.querySelector('.animation'), // 需要渲染动画的dom元素
path: './氧气.json', // 动画文件
renderer: 'svg', // 渲染方式
loop: true, // 是否循环播放
autoplay: true, // 是否自动播放
name: "New Year", // 动画参考名称
})
</script>
</html>
文中json文件链接:【免费】svg动图所需json文件资源-CSDN文库
(资源上传还在审核,如果审核不通过大家也可以自己找网站下载) 这里推荐iconfont有很多免费图片可以下载iconfont-阿里巴巴矢量图标库