Question

我想要一些文本，假设经典的“ hello world”将被转换为其他字符串，例如随机的“谢谢”。我希望通过一些动画来完成，这些动画可以分解字母的行并将其重新组装为我需要的新单词/句子。我想知道是否有一些库可以做到这一点，或者我是否只能通过动画svg来做到这一点。在这种情况下，您有什么建议吗？

我想用它来用英语写东西，然后用韩文字母转换单词。

我一直在网上寻找，但是我只发现了CSS或文本旋转等经典的文本转换动画。

即使这是一个愚蠢的示例，预期的结果也可能与此URL类似：http://seoi.net/penint/

Answer 1

检查是否正在寻找

var ml4 = {};
ml4.opacityIn = [0, 1];
ml4.scaleIn = [0.2, 1];
ml4.scaleOut = 3;
ml4.durationIn = 800;
ml4.durationOut = 600;
ml4.delay = 500;

anime.timeline({
  loop: false
}).add({
  targets: '#letter',
  opacity: ml4.opacityIn,
  scale: ml4.scaleIn,
  duration: ml4.durationIn
});

function changeText() {
  document.getElementById('letter').innerHTML = document.getElementById('letterInput').value;
  anime.timeline({
    loop: false
  }).add({
    targets: '#letter',
    opacity: ml4.opacityIn,
    scale: ml4.scaleIn,
    duration: ml4.durationIn
  });
}

.ml4 {
  position: relative;
  font-weight: 900;
  font-size: 4.5em;
}

.ml4 .letters {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0.3em;
  right: 0;
  opacity: 1;
}

<input type="text" id="letterInput" value="Thank you" />
<button onclick="changeText()">Click Me</button>
<h1 class="ml4">
  <span class="letters" id="letter">Hello World</span>
</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

如何通过动画将一个字母转换为另一个字母

1 个答案: