bodymovin實現將AE動畫轉換成HTML5動畫

時間 2019-12-11

標籤 bodymovin 現將動畫轉換 html5 html 欄目 HTML5 简体版

原文原文鏈接

作一個簡單的記錄，直接貼代碼吧，主要仍是設計師提供的那個jsonhtml

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                background-color: #f7f7f7;
            }
            
        </style>
        <script src="https://www.twobike.cn/static/lib/bodymovin/bodymovin.min.js"></script>
    </head>
    <body>
    
        <div class="body-movin" id="bodyMovin">
            
        </div>
    </body>

    <script>
        var animData = {
              wrapper: document.getElementById('bodyMovin'),
              animType: 'svg',
              loop: true,
              prerender: true,
              autoplay: true,
              path: "https://www.twobike.cn/static/lib/bodymovin/loading-bike.json"
          };
          bodymovin.loadAnimation(animData);
    </script>
</html>