文字动态渲染（打字效果等）

效果图

js部分

// 文字动态渲染
import React, { useEffect, useState } from "react";
import styles from './index.less';
import PropTypes from 'prop-types';

const text = `素胚勾勒出青花笔锋浓转淡
瓶身描绘的牡丹一如你初妆
冉冉檀香透过窗心事我了然
宣纸上走笔至此搁一半
釉色渲染仕女图韵味被私藏
而你嫣然的一笑如含苞待放
你的美一缕飘散
去到我去不了的地方
天青色等烟雨 而我在等你
炊烟袅袅升起 隔江千万里
在瓶底书汉隶仿前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨 而我在等你
月色被打捞起 晕开了结局
如传世的青花瓷自顾自美丽
你眼带笑意
色白花青的锦鲤跃然于碗底
临摹宋体落款时却惦记着你
你隐藏在窑烧里千年的秘密
极细腻犹如绣花针落地
帘外芭蕉惹骤雨门环惹铜绿
而我路过那江南小镇惹了你
在泼墨山水画里
你从墨色深处被隐去
天青色等烟雨 而我在等你
炊烟袅袅升起 隔江千万里
在瓶底书汉隶仿前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨 而我在等你
月色被打捞起 晕开了结局
如传世的青花瓷自顾自美丽
你眼带笑意
天青色等烟雨 而我在等你
炊烟袅袅升起 隔江千万里
在瓶底书汉隶仿前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨 而我在等你
月色被打捞起 晕开了结局
如传世的青花瓷自顾自美丽
你眼带笑意
`

function DynamicTextRendering(props) {
  const { type } = props;

  useEffect(() => {
    smoothscroll();
  }, [])

  const renderCharacter = () => { // 渲染字符
    let Dom = [];
    for (let i = 0; i < text.length; i++) {
      console.log(text[i])
      if (text[i] === " ") {
        Dom.push(<span className={styles[type]} key={i} style={{ animationDelay: `${i * 0.05}s` }}> </span>)
      } else if (text[i] === "
") {
        Dom.push(<br />)
      } else {
        Dom.push(<span className={styles[type]} key={i} style={{ animationDelay: `${i * 0.05}s` }}>{text[i]}</span>)
      }
    }
    Dom.push(<br />)
    return Dom
  }

  const smoothscroll = () => {
    const dom = document.querySelector("#text_center");
    const scrollDom = document.querySelector("#text_center_scroll");
    if (dom && scrollDom) {
      // console.log(getComputedStyle(scrollDom).height.replace(/[A-Z,a-z]+/g, ""))
      const num = Number(getComputedStyle(scrollDom).height.replace(/[A-Z,a-z]+/g, "")) - Number(dom.offsetHeight);
      let timer = null;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(fn, 5000)
      function fn() {
        const currentScroll = dom.scrollTop;
        if (currentScroll <= num) {
          window.requestAnimationFrame(fn);
          dom.scrollTo(0, currentScroll + 1);
        } else {
          clearTimeout(timer);
          timer = null;
        }
      }
    }
  };

  return (
    <div className={`${styles.DynamicTextRendering}`} id="text_center" >
      <div id="text_center_scroll">
        {
          renderCharacter()
        }
      </div>
    </div>
  )
}

DynamicTextRendering.defaultProps = {
  type: "landIn" // "landIn" | "typing"
}

DynamicTextRendering.prototype = {
  type: PropTypes.string,
  // s: PropTypes.object,
}

export default DynamicTextRendering

less部分

.DynamicTextRendering{
  text-align: center;
   100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px 0;
  span{
    display: inline-block;
    line-height: 1.8;
    font-family: Lora, serif;
    white-space: pre;
    // white-space: pre-line;
  }

  .landIn{
    animation: landIn 0.5s ease-out both;
    @keyframes landIn {
      0% {
        opacity: 0;
        transform: translate(0%, -100%) rotate(0deg) scale(0);
      }
      100% {
        opacity: 1;
        transform: translate(0, 0%) rotate(0deg) scale(1);
      }
    } 
  }

  .typing{
    border-right: 1px solid;
    animation: showText 0.5s ease-out both;
    @keyframes showText {
      0% {
        visibility: hidden;
        border-color: #333;
      }
      80% {
        visibility: hidden;
        border-color: #333;
      }
      100% {
        visibility: visible;
        border-color: #fff;
      }
    }
  }
}