用html写文本变形动画

作者：weixin_40725706 | 2024-04-18 20:12:38

踩

用html写文本变形动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本变形动画</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 两个文本部分 -->
<div id="container">
    <span id="text1"></span>
    <span id="text2"></span>
</div>

<!-- 用于创建合并效果的 svg 过滤器 -->
<svg id="filter">
    <defs>
        <filter id="threshold">
            <!-- 这里只是一个阈值效果--像素足够高的地方不透明度设置为完全不透明，其他地方像素设置为完全透明。 -->
            <feColorMatrix in="SourceGraphic"
                    type="matrix"
                    values="1 0 0 0 0
                                    0 1 0 0 0
                                    0 0 1 0 0
                                    0 0 0 255 -140" />
        </filter>
    </defs>
</svg>

<!-- partial -->
  <script src="./script.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/* 引用文字 */
@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');

body {
    margin: 0px;
}

#container {
    /* 将文本在视口里居中 */
    position: absolute;
    margin: auto;
    width: 100vw;
    height: 80pt;
    top: 0;
    bottom: 0;

    /* 这个过滤器很神奇哦~可以试着注释一下，看变形是如何工作的~ */
    filter: url(#threshold) blur(0.6px);
}

#text1, #text2 {
    position: absolute;
    width: 100%;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 80pt;
    text-align: center;
    user-select: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/*
	巧妙地利用SVG过滤器来创建“变形文本”效果。
  从本质上讲，它将两个文本元素层叠在一起，并根据哪个文本应该更突出来模糊它们。
  一旦应用了模糊，两个文本一起通过一个阈值过滤器，产生“胶粘”效果。
*/

const elts = {
  text1: document.getElementById("text1"),
  text2: document.getElementById("text2") };


/* 要在其中变形的字符串。你可以把这些换成你想要的任何东西！ */
const texts = [
"Can",
"I",
"have",
"one",
"click",
"triple?"
];


/* 控制变形的速度。 */
const morphTime = 1;
const cooldownTime = 0.25;

let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;

elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];

function doMorph() {
  morph -= cooldown;
  cooldown = 0;

  let fraction = morph / morphTime;

  if (fraction > 1) {
    cooldown = cooldownTime;
    fraction = 1;
  }

  setMorph(fraction);
}

/* 将模糊过滤器应用于文本 */
function setMorph(fraction) {
  // fraction = Math.cos(fraction * Math.PI) / -2 + .5;

  elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

  fraction = 1 - fraction;
  elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

  elts.text1.textContent = texts[textIndex % texts.length];
  elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}

function doCooldown() {
  morph = 0;

  elts.text2.style.filter = "";
  elts.text2.style.opacity = "100%";

  elts.text1.style.filter = "";
  elts.text1.style.opacity = "0%";
}

/* 动画循环 */
function animate() {
  requestAnimationFrame(animate);

  let newTime = new Date();
  let shouldIncrementIndex = cooldown > 0;
  let dt = (newTime - time) / 1000;
  time = newTime;

  cooldown -= dt;

  if (cooldown <= 0) {
    if (shouldIncrementIndex) {
      textIndex++;
    }

    doMorph();
  } else {
    doCooldown();
  }
}

/* 启动动画。 */
animate(); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/447987