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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.07.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读