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>
秒客网

SVG 文字sin型曲线动画

相关文章
