Vue3与CSS艺术: 实现数字流动画

开篇

最近在给我的个人小项目做注册页面，想的是反正是自己的页面，不妨加点动画特效进去，这样看起来更好看。在经过一番思索后，决定了做一个简单的“字符雨”动画出来。

思路分析

想做就做，打开IDE，接下来就是要如何做的问题了。

第1步，创建了字符集，包括数字和大小字母；

第2步，就是写一个函数，把它们可以随机组合（这就是后面要出现的字符流）；

第3步，想让这些字符流出现在页面上，我选择的做法是不断地创造div，并通过绝对定位的方式，让它们能够“漂浮”在页面上；

第4步，通过控制样式让这些div移动（表现的效果就是字符流在流动）；

第5步，别忘了及时销毁流下去的流，不然随着时间流失，数字流会越来越密集。

考虑到这些之后，我首先用js写出了第一款，代码和效果见下面“HTML版”及图一。至此，我感觉效果还不错，于是就迁移到了我的项目中，封装成了Matrix.vue组件，代码及实现效果见下面“Vue3版”和图二，以及演示视频。

不过需要注意的是，在vue3中，stream.setAttribute('data-v-d7f3c9f0', '');这一句代码要加上，不然在Vue项目中显示不出来的。

然后，把这个组件引入到我的注册页面中，效果看起来就还不错w

代码实现

HTML版

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matrix Digital Rain</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: black;
  }
  .matrix {
    position: relative;
    height: 100%;
  }
  .code-stream {
    color: limegreen;
    font-family: monospace;
    font-size: 16px;
    line-height: 1em;
    white-space: nowrap;
    position: absolute;
  }
</style>
</head>
<body>
<div id="matrix" class="matrix"></div>

<script>
  function createMatrixEffect(container, streamWidth) {
    const chars = '0123456789';
    const streamLength = 20;
    const interval = 100;

    function randomChar() {
      return chars.charAt(Math.floor(Math.random() * chars.length));
    }

    function createStream() {
      const stream = document.createElement('div');
      stream.className = 'code-stream';
      for (let i = 0; i < streamLength; i++) {
        stream.appendChild(document.createTextNode(randomChar()));
        stream.appendChild(document.createElement('br'));
      }
      return stream;
    }

    function animateStream(stream) {
      let posY = -streamLength * 16; 
      const posX = Math.floor(Math.random() * (container.offsetWidth - streamWidth));
      stream.style.left = `${posX}px`;

      function move() {
        posY += 2;
        stream.style.top = `${posY}px`;

        if (posY < container.offsetHeight) {
          requestAnimationFrame(move);
        } else {
          container.removeChild(stream);
        }
      }

      requestAnimationFrame(move);
    }

    setInterval(() => {
      const stream = createStream();
      container.appendChild(stream);
      animateStream(stream);
    }, interval);
  }

  // Setup matrix effect on the container
  document.addEventListener('DOMContentLoaded', () => {
    const matrixContainer = document.getElementById('matrix');
    createMatrixEffect(matrixContainer, 10);
  });
</script>
</body>
</html>

Vue3版

<template>
  <div ref="matrix" class="matrix">
    <!-- 静态的 code-stream 元素用于测试 -->
    <!-- <div class="code-stream" style="top: 20px; left: 20px">0123456789</div>
    <div class="code-stream" style="top: 50px; left: 100px">ABCDEFGHIJ</div>
    <div class="code-stream" style="top: 80px; left: 180px">KLMNOPQRST</div> -->
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const matrix = ref(null)

onMounted(() => {
  createMatrixEffect(matrix.value, 10)
})

const createMatrixEffect = (container, streamWidth) => {
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
  const streamLength = 20
  const interval = 100

  function randomChar() {
    return chars.charAt(Math.floor(Math.random() * chars.length))
  }

  function createStream() {
    const stream = document.createElement('div')
    stream.className = 'code-stream'
    // 在动态生成div时，这一句必须要加上，不然会出现原生页面中可以有正常的效果，但是放到vue页面就失效了，这样的问题
    stream.setAttribute('data-v-d7f3c9f0', '')
    for (let i = 0; i < streamLength; i++) {
      stream.appendChild(document.createTextNode(randomChar()))
      stream.appendChild(document.createElement('br'))
    }
    return stream
  }

  function animateStream(stream) {
    let posY = -streamLength * 16
    const posX = Math.floor(
      Math.random() * (container.offsetWidth - streamWidth)
    )
    stream.style.left = `${posX}px`

    function move() {
      posY += 10 // 动画流特效
      stream.style.top = `${posY}px`

      if (posY < container.offsetHeight) {
        requestAnimationFrame(move)
      } else {
        container.removeChild(stream)
      }
    }

    requestAnimationFrame(move)
  }

  setInterval(() => {
    const stream = createStream()
    container.appendChild(stream)
    animateStream(stream)
  }, interval)
}
</script>

<style scoped>
.matrix {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
  z-index: -1;
}
.code-stream {
  color: limegreen;
  font-family: monospace;
  font-size: 16px;
  line-height: 1em;
  white-space: nowrap;
  position: absolute;
}
</style>