100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

html使用lottie-web渲染AE动画数据

js yekong 1235℃

首选导出数据

AE 安装Bodymovin插件并导出JSON数据

html渲染

<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
    <script crossorigin="anonymous"
            integrity="sha512-yAr4fN9WZH6hESbOwoFZGtSgOP+LSZbs/JeoDr02pOX4yUFfI++qC9YwIQXIGffhnzliykJtdWTV/v3PxSz8aw=="
            src="https://lib.baomitu.com/lottie-web/5.9.6/lottie.min.js"></script>
</head>
<body style="background-color:#fff; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">

<div style="width:50%;height:50%;background-color:#000;" id="bodymovin"></div>

<script>

    var animData = {
        wrapper: document.getElementById('bodymovin'),
        animType: 'html',
        loop: true,
        prerender: true,
        autoplay: true,
        path: 'data.json'

    };
    var anim = bodymovin.loadAnimation(animData);
</script>
</body>
</html>

github

lottie-web

更多资源

如果没有 AE 的话，动画效果的 JSON 文件可以通过 LottieFiles 网站获取。

LottieFiles 网站还是一个动画设计师分享作品的平台，每个动画效果的 JSON 文件都可下载使用。所以，如果你现在没有动画设计师配合的话，可以到这个网站去查找并下载一个 Bodymovin 生成的 JSON 文件.

也可以通过阿里云的犸良动画平台制作自己想要的动画效果。

喜欢 (1)