Question

我使用[ skylake ]库== svg变形动画菜单，并希望像这样执行相同的菜单动画（svg变形动画）：{{3} }。当你的鼠标进入svg菜单打开＆amp;＆amp;鼠标离开时关闭。我做到了但是在我的Chrome控制台中我得到了： Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

如何正确解决？在那里，是带有svg路径的动画菜单的morph.js指令文件：

http://jemimahbarnett.com

以下是我在项目中使用它的方式：

import S from 'skylake'

class HomeSvg {
  constructor() {
    S.BindMaker(this, ["menuOpen", "menuClose"])
  }
  init(t) {
    this.first = !1
    this.listeners("add")
  }
  listeners(t) {
    S.Listen("#nav-link-submenu", t, "mouseenter", this.menuOpen)
    S.Listen("#nav-link-submenu", t, "mouseleave", this.menuClose)
  }
  menuOpen(t) {
    this.first = !0
    this.isOver = !0
    S.Geb.id("nav-container").className = "active"
    this.isOver && !this.isAnimated && this.open()
  }
  menuClose(t) {
    this.first && (this.isOver = !1, S.Geb.id("nav-container").className = "", this.isOver || this.isAnimated || this.close())
  }
  open(t) {
    let i = this
    function s() {
      i.morph1Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z",
        duration: 600,
        ease: "ExpoOut",
        callback: t => {
          i.isAnimated = !1
          i.isOver || i.close()
        }
      })
      i.morph1Animation.play()
    }
    this.isAnimated = !0
    S.Geb.id("nav-wrap").className = "active"
    S.Geb.id("nav-morph-path").setAttribute("d", "M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z")
    this.morphAnimation = new S.Morph({
      type: "path",
      element: S.Geb.id("nav-morph-path"),
      end: "M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z",
      duration: 300,
      ease: "Power3In",
      callback: s
    })
    const tl = new S.Timeline()
    tl.from("#nav-submenu-extend-bottom", "3dy", -200, 0)
    tl.from("#nav-submenu-extend-left", "3dy", -200, 0)
    tl.from(".nav-submenu-link-title", "3dy", -100, 0, 500, "Power4Out", {delay: 400})
    tl.from(".nav-submenu-link-no", "opacity", -100, 0, 500, "Power4Out", {delay: 50})
    tl.play()
    this.morphAnimation.play()
  }

  close(t) {
    let i = this
    function s() {
      i.morph3Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,0 Z",
        duration: 600,
        ease: "ExpoOut",
        callback: t => {
          i.isAnimated = !1
          i.isOver && i.open()
        }
      })
      i.morph3Animation.play()
    }
    this.isAnimated = !0
    S.Geb.id("nav-wrap").className = ""
    S.Geb.id("nav-morph-path").setAttribute("d", "M 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 L 0,0 Z")
    this.morph2Animation = new S.Morph({
      type: "path",
      element: S.Geb.id("nav-morph-path"),
      end: "M 10,0 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 L 0,0 Z",
      duration: 300,
      ease: "Power3In",
      callback: s
    })
    const tl = new S.Timeline()
    tl.from("#nav-submenu-extend-left", "3dy", 0, -200)
    tl.from(".nav-submenu-link-title", "3dy", 0, -100, 160, "Power2In")
    tl.from(".nav-submenu-link-no", "3dy", 0, -100, 160, "Power2In")
    tl.from("#nav-submenu-extend-bottom", "3dy", 0, -200, {delay: 160})
    tl.play()
    this.morph2Animation.play()
  }

  destroy(t) {
    // console.log(homesticky.destroy)
    this.listeners("remove")
    this.morphAnimation && this.morphAnimation.pause()
    this.morph1Animation && this.morph1Animation.pause()
    this.morph2Animation && this.morph2Animation.pause()
    this.morph3Animation && this.morph3Animation.pause()
  }
}


let homesvg = new HomeSvg()
homesvg.init()
export default HomeSvg

Answer 1

我修复了它，错误发生在库代码中：https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

getArr函数（t）所在的位置存在隐式强制，将字符串威胁为数字：

S.Morph.prototype = {
  .............
  .............
  getArr: function(t) {
    for (var i = t.split(" "), e = [], s = 0; s < i.length; s++)
      for (var n = i[s].split(","), r = 0; r < n.length; r++) e.push(+n[r]); //this one causes the error
    return e
  },
  isLetter: function(t) {
    return "M" === t || "L" === t || "C" === t || "Z" === t
  },
  ...............
}

因此e.push(+n[r])变为e.push(n[r])。在javascript中，如果可能，可以使字符串成为数字（仅字符串中的字符为0-9）。如果这不可能，则结果为 NaN ...在我的情况下，它尝试push连接（带（+））并期望数组（使用方法split（））编号，但找到了一个字符串，说明我收到错误的原因：Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

现在运作良好！

SVG路径d：我预期（'M'或'm'），但得到“NaN 0,0..100”

1 个答案: