SVG舌头

下载代码

html

css

分享到微信朋友圈

html

<defs>
<path id="_mouth"  d="
M0,-75 
C65,-75 100,-100 125,-63 
C151,-23 125,55 0 55 
C-125,55 -150,-23 -125,-63 
C-100,-100 -75,-75 0,-75z"></path>
  
<path id="_tongue" d="
M0,-51 
Q0,-58 17,-58 
C38,-58 63,9 50,34
Q35,59 0,59
Q-35,59 -50,34
C-63,9 -38,-58 -17,-58                     
Q0,-58 0,-51z" />   
<clipPath id="clipT">
<use xlink:href ="#_tongue" />    
</clipPath>
</defs>
<g transform="translate(250,175)">
<title>The mouth</title>
<use xlink:href ="#_mouth" id="throat" />
<use xlink:href ="#_mouth" id="__shadow"  y="10" transform="scale(.85,.9)"/>
<g id="u_teeth">
<circle cx="-98" cy="-70" r="20" />  
<circle cx="-58" cy="-61" r="22" />  
<circle cx="-19" cy="-53" r="22" />  
<circle cx="19" cy="-53" r="22" />
<circle cx="58" cy="-61" r="22" /> 
<circle cx="98" cy="-70" r="20" /> 
</g> 
<g id="d_teeth">
<circle cx="-57" cy="35" r="20" />
<circle cx="-18" cy="36" r="22" />
<circle cx="18" cy="36" r="22" /> 
<circle cx="57" cy="35" r="20" />  
</g>  
<use xlink:href ="#_mouth" id="_shadow"  y="4" transform="scale(1,.9)"/>
<use xlink:href ="#_mouth" id="lips" />
  
<path id="track"  d="
M0,-75 
C65,-75 100,-100 125,-63 
C151,-23 125,55 0 55 
C-125,55 -150,-23 -125,-63 
C-100,-100 -75,-75 0,-75z"></path>

css

JavaScript

let rid = null;
let trackLength = track.getTotalLength();
let m = {};
let draggable = false;
let deltaX = 0;
let spring = 0.3;
let friction = 0.85;
let vel = 0;
let pos = trackLength / 2;
let angle = 0;

let base = track.getPointAtLength(pos);

tongueSlider.setAttributeNS(
  null,
  "transform",
  "translate(" + base.x + "," + base.y + ")"
);

function oMousePosSVG(e) {
  let p = svg.createSVGPoint();
  p.x = e.clientX;
  p.y = e.clientY;
  let ctm = svg.getScreenCTM().inverse();
  p = p.matrixTransform(ctm);
  return p;
}

tongueSlider.addEventListener("mousedown", function(e) {
  draggable = true;
  m = oMousePosSVG(e);
  let trans = parseFloat(
    tongueSlider
      .getAttribute("transform")
      .split("(")[1]
      .split(",")[0]
  );

deltaX = base.x + trans + 250 - m.x; //250 = 500/2
});
svg.addEventListener("mouseup", function() {
  draggable = false;
  if(rid){window.cancelAnimationFrame(rid);
         rid = null;
         angle=0;}
  Frame();
});
svg.addEventListener("mousemove", function(e) {
  if (pos > 466 || pos < 220) {
    draggable = false;
     if(rid){window.cancelAnimationFrame(rid);
         rid = null;
         angle=0;}
     Frame();
  }

if (draggable) {
    m = oMousePosSVG(e);
    pos = map(m.x + deltaX, 0, 500, 466, 220);
    angle = map(m.x + deltaX, 0, 500, 45, -45);
    let oPos = track.getPointAtLength(pos);
    tongueSlider.setAttributeNS(
      null,
      "transform",
      "translate(" + oPos.x + "," + oPos.y + ")" + "rotate(" + angle + ")"
    );
  }
});
svg.addEventListener("mouseleave", function(e) {
  draggable = false;
   if(rid){window.cancelAnimationFrame(rid);
         rid = null;
         angle=0;}
   Frame();
});

function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

function updatePos(target) {
  let dist = target - pos;
  let acc = dist * spring;
  vel += acc;
  vel *= friction;
  pos += vel;
}

function updateAngle(target) {
  let dist = target - angle;
  let acc = dist * spring;
  vel += acc;
  vel *= friction;
  angle += vel;
}

function Frame() {
 rid = window.requestAnimationFrame(Frame);

if (draggable == false) {
    let A = ~~pos;
    updatePos(trackLength / 2);
    let B = ~~pos;
    //console.log(A - B);
    updateAngle(0);
    
    if(A - B == 0){angle = 0;pos = trackLength / 2;}

let oPos = track.getPointAtLength(pos);
    tongueSlider.setAttributeNS(
      null,
      "transform",
      "translate(" + oPos.x + "," + oPos.y + ")" + "rotate(" + angle + ")"
    );
  
  
      if(A - B == 0){
               window.cancelAnimationFrame(rid);
               rid = null;}
  }
}
//Frame();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg