<!--
 * 飞行文本动画效果 
  -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import anime from 'animejs/lib/anime.es.js';

const textRef = ref<any>(null);

onMounted(() => {
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
  // `\S`匹配一个非空白字符。
  textRef.value.innerHTML = textRef.value.textContent.replace(
    /\S/g,
    '<span>$&</span>'
  );

  const animation = anime.timeline({
    targets: '.text span',
    easing: 'easeInOutExpo',
    loop: true,
  });
  animation
    .add({
      rotate: function () {
        return anime.random(-360, 360);
      },
      translateX: function () {
        return anime.random(-500, 500);
      },
      translateY: function () {
        return anime.random(-500, 500);
      },
      duration: 5000,
      delay: anime.stagger(20),
    })
    .add({
      rotate: 0,
      translateX: 0,
      translateY: 0,
      duration: 5000,
      delay: anime.stagger(20),
    });
});
</script>
<template>
  <div class="box">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section -->
    <section>
      <p class="text" ref="textRef">
        你说我在做梦吗？人生如梦，我投入的却是真情。世界先爱了我，我不能不爱它。
        只记花开不记人，你在花里，如花在风中。
        那一年，花开得不是最好，可是还好，我遇到你；那一年，花开得好极了，好像专是为了你；那一年，花开得很迟，还好，有你。、“什么事都轻描淡写，毫不装腔作势。说话自然也流露出得意，可是得意中有还有一点对于自己的嘲讽。这是一点本事。可是人最好没有这点本事。他正因为有这些本事，才种种不如别人。”
      </p>
    </section>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  height: 100%;
}

section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #130e23;

  .text {
    position: relative;
    text-align: center;
    color: #00cefe;
    margin: 40px;
    max-width: 650px;
  }
}

:deep(section .text span) {
  position: relative;
  display: inline-block;
}
</style>