用 snap.svg.js 做一个笑脸头像变化效果

其实这是最近在做的一个网站其中一个小效果(网站因为各种原因搁置了 (:3」∠)   我的原因 要死)

先看一下设计小哥小春哥给的 AI 图标,要求头像正常是左边那样,鼠标放上去变成右边高兴脸(哎呀 你要点我啦 的感觉)

看见那眼睛没?那嘴巴没?那红红的脸蛋没?

是不是想跟着 啊~~ 张大嘴?

接下来准备开始码,这次打算用 snap.svg.js 来实现,具体 API 可看链接 Snap.svg 官方文档

大概想法就是改变 path 里的 d 属性,他的值就是路径上的关键点的信息集合

但导出 svg 时发现问题了

svg 代码里出现了圆 circle 和椭圆 ellipse ,没法变 path ,再看一下 AI 文件

一开始以为建立完复合路径后就可以,因为复合路径有 path 嘛,但代码写出来后眼睛和嘴巴变化时很不自然。

我猜有可能是正常图标眼睛是用圆画的,而 hover 后的眼睛是用矩形加的圆角,path 的关键点不对

当我把图标重画后还真可以了

下面是具体代码部分

;($Mouth = Snap.select('#mouth')),
  ($LeftEye = Snap.select('#left-eye')),
  ($RightEye = Snap.select('#right-eye')),
  ($LeftFace = Snap.select('#left-face')),
  ($RightFace = Snap.select('#right-face'))

window.onload = function () {
  $('#avatar')
    .mouseenter(function () {
      $LeftEye.animate({ d: 'M-152,204L-152,204c-1.7,0-3-1.3-3-3v-2c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3v2C-149,202.7-150.3,204-152,204z', fill: '#434A53' }, 150, mina.ease)
      $RightEye.animate({ d: 'M-126,204L-126,204c-1.7,0-3-1.3-3-3v-2c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3v2C-123,202.7-124.3,204-126,204z', fill: '#434A53' }, 150, mina.ease)
      $LeftFace.animate({ fill: '#E47948' }, 150, mina.ease)
      $RightFace.animate({ fill: '#E47948' }, 150, mina.ease)
      $Mouth.animate({ d: 'M-133,205c0,4.4-2.7,8-6,8s-6-3.6-6-8c0-0.5,0.5-1,1-1h10C-133.5,204-133,204.5-133,205z', fill: '#93A3A2' }, 150, mina.ease)
    })
    .mouseleave(function () {
      $LeftEye.animate({ d: 'M-152,204L-152,204c-1.7,0-3-1.3-3-3l0,0c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3l0,0C-149,202.7-150.3,204-152,204z', fill: '#434A53' }, 150, mina.ease)
      $RightEye.animate({ d: 'M-126,204L-126,204c-1.7,0-3-1.3-3-3l0,0c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3l0,0C-123,202.7-124.3,204-126,204z', fill: '#434A53' }, 150, mina.ease)
      $LeftFace.animate({ fill: '#CBCFD8' }, 150, mina.ease)
      $RightFace.animate({ fill: '#CBCFD8' }, 150, mina.ease)
      $Mouth.animate({ d: 'M-133,205c0,3.3-2.7,6-6,6s-6-2.7-6-6c0-0.5,0.5-1,1-1h10C-133.5,204-133,204.5-133,205z', fill: '#93A3A2' }, 150, mina.ease)
    })
}

效果如下:

目录