[JavaScript] 繪圖: Scene.js

日期：
Scene.js

Scene.js web

Scene.js 庫：創建基於時間軸的動畫

Scene.js 是一個基於 JavaScript 時間軸的動畫庫，用於創建動畫網站，作為一個動畫時間軸庫，它允許你創建對象的移動和位置的時間順序。此外，由於 Scene.js 的語法類似於 CSS 動畫，同時還支援 JavaScript 和 CSS 的播放方法，因此使用起來簡單又方便。


以下為單html檔測試範例︰
<html>
    <head>
        <title>Scene.js demo</title>
        
        <script src="https://cdn.jsdelivr.net/npm/scenejs@1.1.7/dist/scene.min.js"></script>
        
        <style>
            .circles .circle {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 200px;
                height: 200px;
                border: 100px solid black;
                border-radius: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
        
    </head>
    <body>
    
        <div data-iterationcount="infinite">
            <h5>iterationCount: infinite</h5>
            <div class="circles">
                <div
                    class="circle"
                ></div>
                <div
                    class="circle"
                ></div>
                <div
                    class="circle"
                ></div>
            </div>

        </div>

        <script>
        
            let at = {
                "[data-iterationcount='infinite'] .circle": function(i) {
                    return {
                        0: {
                            transform: "translate(-50%, -50%) scale(0)",
                            "border-width": "100px",
                            opacity: 1
                        },
                        1: {
                            transform: "scale(1)",
                            "border-width": "0px",
                            opacity: 0.3
                        },
                        options: {
                            delay: i * 0.3
                        }
                    };
                }
            };

            let ss = {
                selector: true,
                iterationCount: "infinite"
            };

            let vs = new Scene(at, ss);
            //console.log('vs',vs)
            vs.play();
            
        </script>
    </body>
</html>


載入後畫面為︰



#Scene.js, CSS, animation, 繪圖, 動畫

留言

張貼留言