专栏首页Android知识点总结SVG 文字sin型曲线动画

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android自定义控件辅助利器之EventParser

    张风捷特烈
  • Java总结IO篇之File类和Properties类

    打开颜色选择器 :读流I-->字符串分割-->字符串存入Map-->使用Map对象还原用户配置 修改配置时 :写流O-->创建Map对象-->字符...

    张风捷特烈
  • Flutter从静态界面到抽取封装

    张风捷特烈
  • “万汇”上线,万达也玩大数据

    大数据文摘
  • 深入理解面向对象中的原始类型和引用类型

    我们先前学过的数据类型可以划分成两类:原始类型和引用类型。原始类型的数据都是一些比较简单数据,比如字符串,数字等。引用类型的数据稍微复杂一点,比如对象。

    小周sri的码农
  • C#(VB.NET)操作Windows自带的防火墙 之 启用(开启)/禁用(关闭)防火墙

    在上一篇 C#(VB.NET)操作Windows自带的防火墙 之 综述篇 里,我们提到了下面这幅图

    跟着阿笨一起玩NET
  • canvas绘制切片并导出图片

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    lzugis
  • 【小家Spring】Spring事务相关的基础类打点(spring-jdbc和spring-tx两个jar),着重讲解AnnotationTransactionAttributeSource

    本篇博文定位为为事务相关的其余博文的工具博文,属于Spring事务相关的基础类的打点、扫盲篇。

    BAT的乌托邦
  • 10大PHP比特币开源项目

    如果你是一个Phper,如果你希望学习区块链,那么本文列出的 10个开源的Php比特币项目,将有助于你了解在自己的应用中 如何加入对比特币的支持。

    用户1408045
  • 前端-纯CSS实现波浪效果!

    当然,借助其他力量(SVG、CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果。

    grain先森

扫码关注云+社区

领取腾讯云代金券