使用 Javascript 设置动画的反向 SVG 路径

问题描述

第一：信用到期，此代码块由 Mary Lou here 创建，我只做了一些非常小的编辑。我想解决的问题是修改wipeDown 以反向动画路径，从顶部到底部。目前，wipeUp 和wipeDown 都为从窗口底部到顶部的SVG 路径设置动画。

我认为通过编辑 updatePath 方法中的 str 可能是可行的，希望有人可以确认并提供帮助或提供指导？

为了清晰起见，我已经包含了整个代码块。

export class ShapeOverlays {
  constructor(elm) {
    this.elm = elm;
    this.path = elm.querySelectorAll('path');
    this.numPoints = 11;
    this.duration = 360;
    this.delayPointsArray = [];
    this.delayPointsMax = 160;
    this.delayPerPath = 160;
    this.timeStart = Date.Now();
    this.isOpened = false;
    this.isAnimating = false;
  }

  //OG Methods

  toggle() {
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = Math.random() * this.delayPointsMax;
    }
    if (this.isOpened === false) {
      this.open();
    } else {
      this.close();
    }
  }

  //Updated Methods
  wipeUp() {
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = Math.random() * this.delayPointsMax;
    }
    this.isOpened = true;
    //this.elm.classList.add('is-opened');
    this.timeStart = Date.Now();
    this.renderLoop();
  }
  wipeDown() { <--- What I would like to modify to reverse the animation
    this.isAnimating = true;
    for (var i = 0; i < this.numPoints; i++) {
      this.delayPointsArray[i] = Math.random() * this.delayPointsMax;
    }
    this.isOpened = false;
    this.elm.classList.remove('is-opened');
    this.timeStart = Date.Now();
    this.renderLoop();
  }
  updatePath(time) {
    const points = [];
    for (var i = 0; i < this.numPoints; i++) {
      points[i] = (1 - ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i],0) / this.duration,1))) * 100
    }

    let str = '';
    <--- Below is where I THINK the change might need to occur --->
    str += (this.isOpened) ? `M 0 0 V ${points[0]}` : `M 0 ${points[0]}`; 
    for (var i = 0; i < this.numPoints - 1; i++) {
      const p = (i + 1) / (this.numPoints - 1) * 100;
      const cp = p - (1 / (this.numPoints - 1) * 100) / 2;
      str += `C ${cp} ${points[i]} ${cp} ${points[i + 1]} ${p} ${points[i + 1]} `;
    }
    str += (this.isOpened) ? `V 100 H 0` : `V 0 H 0`;
    return str;
  }
  render() {
    if (this.isOpened) {
      for (var i = 0; i < this.path.length; i++) {
        this.path[i].setAttribute('d',this.updatePath(Date.Now() - (this.timeStart + this.delayPerPath * i)));
      }
    } else {
      for (var i = 0; i < this.path.length; i++) {
        this.path[i].setAttribute('d',this.updatePath(Date.Now() - (this.timeStart + this.delayPerPath * (this.path.length - i - 1))));
      }
    }
  }
  renderLoop() {
    this.render();
    if (Date.Now() - this.timeStart < this.duration + this.delayPerPath * (this.path.length - 1) + this.delayPointsMax) {
      requestAnimationFrame(() => {
        this.renderLoop();
      });
    }
    else {
      this.isAnimating = false;
    }
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）