javascript - 在所有浏览器中悬停时动画 svg 路径

Question

我是 SVG 和 HTML5 上的路径的新手，我在尝试制作动画时遇到了一些问题:

在下一个链接中，它预览了我正在尝试做的事情:http://jsfiddle.net/fxwL68hr/1/

问题是:仅适用于 Google Chrome 和 Firefox Developer Edition。

总结:当我将鼠标悬停在 SVG 上时，所有三 Angular 形都会播放动画。然而，三 Angular 形 3 和 4 实际上改变了路径坐标以创建更大的三 Angular 形。我如何在不使用 css d: path() 的情况下为这些三 Angular 形中的坐标变化设置动画，以便它可以在所有(或至少大多数)浏览器中工作。

Answer 1

下一个链接是:CodePen with my solution我不太确定你会喜欢它。

在 HTML 中，我添加了一个 defs 元素，其中包含三 Angular 形 3 和 4 的目标路径:

<svg id="svg" class="svg_bg" width="50%" viewBox="0 0 100 75">
  <defs>
    <path id="t3Target" d="M 100 75 L 0 0 L 0 75 Z" />
    <path id="t4Target" d="M 100 75 L 100 0 L 0 0 Z" />
  </defs>
    <path id="triangle1" class="triangle1" d="M 17.5 28.5 L 55 75 L 81 75 Z"></path>
    <path id="triangle2" class="triangle2" d="M 36.5 8 L 54.5 75 L 87 75 Z"></path>
    <path id="triangle3" class="triangle3" d="M 110 -25 L 38 75 L 77 75 Z"></path>
    <path id="triangle4" class="triangle4" d="M 49 75 L 84 75 L 120 41.5 Z"></path>
</svg>

对于三 Angular 形 3 和 4，我使用的是 JavaScript。

let rid = null;
let shapesRy = [];

class Shape{
  constructor(path_a,path_b,morphingPath){
    this.target = getArgsRy(path_a);
    this.vals = getArgsRy(path_b);
    this.morphingPath = morphingPath;
    this.memory = [];
    for(let i=0; i < this.vals.length; i++){
    this.memory[i] = [];
    this.memory[i][0] = this.target[i].slice();
    this.memory[i][1] = this.vals[i].slice();     
    this.updatePath();
    }
  }

 updateValues() {
 for(let i = 0;i < this.memory.length; i++){ 
    let dist_x = this.target[i][1] - this.vals[i][1]; 
    let vel_x = dist_x/10;
    this.vals[i][1] += vel_x;

    let dist_y = this.target[i][2] - this.vals[i][2];
    let vel_y = dist_y/10;
    this.vals[i][2] += vel_y;
 }

    let dist_x = this.target[0][1] - this.vals[0][1]; 
    if (Math.abs(dist_x) < .01) {
    if(rid){window.cancelAnimationFrame(rid);
    rid = null;
    }

  }
}

 updatePath() {  
  let d=`M${this.vals[0][1]},${this.vals[0][2]}`;
  for(let i = 1;i < this.vals.length -1; i++){
  d += `L${this.vals[i][1]},${this.vals[i][2]}`
  }
  d +="Z"; 
  this.morphingPath.setAttributeNS(null, "d", d);
}
}


shapesRy.push(new Shape(t3Target,triangle3,triangle3));
shapesRy.push(new Shape(t4Target,triangle4,triangle4));



function Frame() {
  rid = window.requestAnimationFrame(Frame);
  shapesRy.map((s) => {
      s.updateValues();
      s.updatePath();
  })
}

svg.addEventListener(
  "mouseover",
  function() {
    if (rid) {
      window.cancelAnimationFrame(rid);
      rid = null;
    }   
    shapesRy.map((s) => {
     for(let i = 0;i < s.memory.length; i++){
       s.memory[i].reverse();
       s.target[i] = s.memory[i][1].slice();
     }
    })
    Frame();
  },
  false
);

svg.addEventListener(
  "mouseout",
  eAction,
  false
);

function eAction(){
  {
    if (rid) {
      window.cancelAnimationFrame(rid);
      rid = null;
    }

    shapesRy.map((s) => {
     for(let i = 0;i < s.memory.length; i++){
       s.memory[i].reverse();
       s.target[i] = s.memory[i][1].slice();
     }
    })
    Frame();
  }
}

function getArgsRy(path) {
    let d = path.getAttribute("d").replace(/\r?\n|\r/g, ""); //remove breaklines
    if (d.charAt(0) == "m") {
      d = "M" + d.slice(1);
    }
    let argsRX = /(?=[a-zA-Z])/;
    let args = d.split(argsRX);

    let ArgsRy = [];

    args.map(arg => {
      let argRy = arg
        .slice(1)
        .replace(/\-/g, " -")
        .split(/[ ,]+/);
      argRy.map((p, i) => {
        if (p == "") {
          argRy.splice(i, 1);
        }
      });

      for (let i = 0; i < argRy.length; i++) {
        argRy[i] = parseFloat(argRy[i]);
      }

      argRy.unshift(arg[0]);
      ArgsRy.push(argRy);
    });

    return ArgsRy;
  }

这是一篇解释代码的博文:Morphing in SVG - first steps

三 Angular 形 1 和 2(您的 CSS)的 CSS 动画还有一个问题，因为 SVG 元素上的 CSS 转换非常有问题。

您可能想阅读这篇文章:Transforms on SVG Elements

或者，您可能希望对所有 4 个三 Angular 形使用 JavaScript。