Question

我想产生一种类似于“单击并按住” of this page的效果，但是通过svg表单进行了一些更改，目的是要执行两个功能，这些功能可以很好地完成我想做的事情，但是在介绍另一种svg形式的那一刻，效果的数据已转移到另一种svg形式，影响了功能的执行，问题是，如何防止这种情况发生？

注意：查看正在发生的事情的最佳方法是让这两者之一完成。

Here is an example of what I have programmed

我当然会把我一直在工作的所有代码留给你

//Efect Drivers
class EffectValues {
    constructor(count, time, initOffset, label) {
        this.count = count;
        this.time = time;
        this.initOffset = initOffset;
        this.label = label;
    }
}

//Controlers
let counter; //it will be interval controller
let globalCount = 0;

//Call objects DOM
const loader = document.querySelector('.loader');
const circle = document.querySelector('.circle');
const svgText = document.querySelector('.svgText');
const textSvg = document.querySelector('.textSvg');

//Preloader svg
const startCircle = new EffectValues(0, 3, 1300, circle);
const showEffect = new EffectValues(0, 3, 500, svgText);
//Mouse events

// Circle
loader.addEventListener('mousedown', e => {
    increase(e, startCircle);
});

loader.addEventListener('mouseup', e => {
    decrease(e, startCircle);
});

// Text SVG

textSvg.addEventListener('mousedown', e => {
    increase(e, showEffect);
});

textSvg.addEventListener('mouseup', e => {
    decrease(e, showEffect);
});

//main functions
const increase = (e, { count, initOffset, time, label }) => {
    let flag = true;
    // console.log(flag);
    clearInterval(counter);
    while (e.type == 'mousedown') {
        counter = setInterval(() => {
            if (globalCount < initOffset) {
                count = initOffset - globalCount;
                label.style.strokeDashoffset = count;
                globalCount++;
            }
        }, time);
        break;
    }
    return flag;
};

const decrease = (e, { count, initOffset, time, label }) => {
    let flag = true;
    // console.log(flag);
    clearInterval(counter);
    while (e.type == 'mouseup') {
        counter = setInterval(() => {
            if (globalCount >= 0 && globalCount < initOffset) {
                count = -globalCount + initOffset;
                label.style.strokeDashoffset = count;
                globalCount--;
            } else {
                flag = false;
            }
        }, time);
        break;
    }
    return flag;
};

:root {
    --dark: #2f3640;
    --dark-light: #353b48;
    --blue: #192a56;
    --blue-dark: #273c75;
    --cian: #0097e6;
    --cian-light: #00a8ff;
    --orange: #c23616;
    --orange-light: #e84118;
}

* {
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    background-color: var(--dark);
    display: flex;
    justify-content: center;
    align-content: center;
}
.loader {
    position: relative;
    width: 50%;
    height: 100vh;
}
.loader svg {
    position: absolute;
    width: 550px;
    height: 550px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke: var(--cian);
    stroke-linecap: round;
    transform: translate(5px, 5px);
    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;
}

.textSvg {
    position: relative;
    width: 40%;
}

.textSvg svg text {
    stroke: var(--orange-light);
    fill: none;
    stroke-width: 3;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>Loader</title>
    </head>
    <body>
        <div class="loader">
            <svg>
                <circle class="circle" cx="200" cy="200" r="200"></circle>
            </svg>
        </div>
        <div class="textSvg">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="1413"
                height="274"
                viewBox="0 0 1413 274"
            >
                <text
                    class="svgText"
                    transform="translate(0 198)"
                    fill="#c6e0ee"
                    font-size="100"
                    font-family="MonotypeCorsiva, Monotype Corsiva"
                >
                    <tspan x="0" y="0">David Figueroa</tspan>
                </text>
            </svg>
        </div>
    </body>
    <script src="main.js" defer></script>
</html>

我一直在寻找信息，但没有任何帮助。

事先非常感谢

Answer 1

您可以通过在类内部移动全局变量和函数来实现您的要求。 Codepen here

//Efect Drivers
class EffectValues {
    constructor(time, initOffset, label) {
        this.time = time;
        this.initOffset = initOffset;
        this.label = label;
    this.counter;
    this.globalCount = 0;
    }

  increase(e) {
    let flag = true;
    // console.log(flag);
    clearInterval(this.counter);
    while (e.type == 'mousedown') {
      this.counter = setInterval(() => {
        if (this.globalCount < this.initOffset) {
          const count = this.initOffset - this.globalCount;
          this.label.style.strokeDashoffset = count;
          this.globalCount++;
        }
      }, this.time);
      break;
    }
    return flag;
  };

  decrease(e) {
    let flag = true;
    // console.log(flag);
    clearInterval(this.counter);
    while (e.type == 'mouseup') {
      this.counter = setInterval(() => {
        if (this.globalCount >= 0 && this.globalCount < this.initOffset) {
          const count = -this.globalCount + this.initOffset;
          this.label.style.strokeDashoffset = count;
          this.globalCount--;
        } else {
          flag = false;
        }
      }, this.time);
      break;
    }
    return flag;
  };
}

//Call objects DOM
const loader = document.querySelector('.loader');
const circle = document.querySelector('.circle');
const svgText = document.querySelector('.svgText');
const textSvg = document.querySelector('.textSvg');

//Preloader svg
const startCircle = new EffectValues(3, 1300, circle);
const letterEffect = new EffectValues(3, 500, svgText);
//Mouse events

// Circle
loader.addEventListener('mousedown', e => {
    startCircle.increase(e);
});

loader.addEventListener('mouseup', e => {
    startCircle.decrease(e);
});

// Text SVG

textSvg.addEventListener('mousedown', e => {
    letterEffect.increase(e);
});

textSvg.addEventListener('mouseup', e => {
    letterEffect.decrease(e);
});

如何重用代码javascript的功能？

1 个答案: