天天看點

SVG 文字sin型曲線動畫

先上圖:

未命名項目.gif

代碼實作:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-image:url(ubw.png);">

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <text id="txt" x="100" y="100" style="font-size:25px;">
        http://www.toly1994.com----張風捷特烈
    </text>
</svg>
<script src="jquery-3.3.1.js"></script>
<script>

    var num = $('#txt').text().trim().length;//文字數目
    var x = [];//x值的數組
    var s = 40;//波峰/谷
    var w = 1;//
    var y = null;//y值的數組
    var t = 0;

    for (let i = 0; i < num; i++) {
        x.push(20);
    }

    /**
     * 确定y值
     */
    function arrange(t) {
        y = [];
        var ly = 0, cy;
        for (let i = 0; i < num; i++) {
            cy = -s * Math.sin(w * i + t);
            y.push(cy - ly);
            ly = cy;
        }
    }

    /**
     * 渲染函數,動态改變
     */
    function render() {
        $('#txt').attr("dx", x.join(' '));
        $('#txt').attr("dy", y.join(' '));

    }

    /**
     * 動畫
     */
    function frame() {
        t += 0.03;
        arrange(t);
        render();
        requestAnimationFrame(frame);//動畫
    }

    frame();
</script>
</body>
</html>
           

繼續閱讀