javascript - Css 动画 - 显示/隐藏带有手写 svg 效果的标志

Question

我正在模拟 svg 的手写动画，当用户按住鼠标时它会被激活。根据这个source ，为了创建这种效果，我将 Logo 与一个 svg 重叠，它是 Logo 本身的 stroke 行，并且我将颜色变为 transparent 以显示它。

Logo 应在 mousedown 上显示，并通过以下脚本在 mouseup 上再次隐藏:

var logoElements = document.querySelectorAll('#first svg *');
var down = false;

function checkMousePosition() {
  for (i = 0; i < logoElements.length; i++) {
    if (down == true) {
      console.log(logoElements[i].getTotalLength());
      logoElements[i].classList.add("animation-forward");
      logoElements[i].classList.remove("animation-backward");
    } else {
      logoElements[i].classList.remove("animation-forward");
      logoElements[i].classList.add("animation-backward");
    }
  }
}

这是一个fiddle与完整的代码。它似乎有效，但目前我遇到以下问题:

• console.log(logoElements[i].getTotalLength()); 抛出一个错误，指出它不是一个函数。
• Logo 应该在开始时隐藏，然后在点击时显示，而不是反之，响应速度慢。

你知道我做错了什么吗？

预先感谢您的回复!

Answer 1

首先，getTotalLength 仅适用于宽度路径，因此您必须编写自己的函数来获取其他元素的长度或将它们转换为路径(应该很简单，因为它们只是线)。

然后使用这个js:

var logoElements = document.querySelectorAll('#first svg path');
for (i = 0; i < logoElements.length; i++) {
    logoElements[i].style["strokeDasharray"] = logoElements[i].getTotalLength();
    logoElements[i].style["strokeDashoffset"] = 0;
}

function checkMousePosition(down) {
  for (i = 0; i < logoElements.length; i++) {
    if (down) logoElements[i].style["strokeDashoffset"] = logoElements[i].getTotalLength();
    else logoElements[i].style["strokeDashoffset"] = 0;
  }
}

document.addEventListener('mousedown', function mouseState(e) {
  checkMousePosition(true);
});

document.addEventListener('mouseup', function mouseState(e) {
  checkMousePosition(false);
});

并添加例如 transition: stroke-dashoffset 1s; 到 #first path