0

我使用了 [ skylake ] 库 == svg 变形动画菜单，并想做类似的菜单动画（svg 变形动画）：http: //jemimahbarnett.com。当您的鼠标进入时，svg 菜单打开 && 鼠标离开时关闭。我做到了，但在我的 chrome 控制台中，我得到了： Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

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

https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

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

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
4

1 回答 1

0

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

在getArrfunction(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连接（with（+））并期望一个数组（使用方法 split（））的数字，但找到了一个字符串，为什么我得到了错误：Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

现在效果很好！

于 2017-07-20T15:15:49.620 回答