關於這個表情程式碼，如何只要表情？

Question

https://codepen.io/balapa/pen...

我只要happy的表情
而且是不需要按按鈕他就會動的話？

Answer 1

在原有代码的基础上删改一下就可以,我粗略的删改了一下，不知道是不是你要的效果。
Html Markup:

<div id="main-ctr" class="standard">
  <svg xmlns="http://www.w3.org/2000/svg" width="151" height="110" viewBox="0 0 151 110">
    <g id="Page-1" fill="none" fill-rule="evenodd">
      <circle id="face" cx="75" cy="55" r="50" fill="#FFEB97"/>
      <g id="face-components">
        <path id="wk-l-eye" stroke="#000" stroke-width="3" d="M55 59.12C55 54.7 51.418 51 47 51s-8 3.7-8 8.12" stroke-linecap="round"/>
        <path id="wk-r-eye" stroke="#000" stroke-width="3" d="M110 59c0-4.418-3.582-8.12-8-8.12s-8 3.702-8 8.12" stroke-linecap="round"/>
        <path id="sm-mouth-3" stroke="#000" stroke-width="3" d="M47.34 72.117s6.627 11.526 26.77 11.526 28.482-12.926 28.482-12.926" stroke-linecap="round"/>
        <path id="hp-love" fill="#F9767E" d="M32.72 45.607h.003L31.42 56.22l-10.612-1.303c-1.4-.167-2.735-.87-3.67-2.07-1.864-2.383-1.44-5.827.944-7.69 1.122-.878 2.48-1.248 3.797-1.146.2-1.34.893-2.608 2.045-3.508 2.384-1.863 5.828-1.44 7.69.945.96 1.226 1.313 2.733 1.106 4.16z"/>
        <path id="sm-mouth-2" stroke="#000" stroke-width="3" d="M57.786 79.82s12.038 6.573 26.507.926c14.47-5.647 17.3-18.03 17.3-18.03" stroke-linecap="round"/>
        <path id="sm-mouth-1" stroke="#000" stroke-width="3" d="M63.5 81.903s2.91 2.202 11.502 2.202c8.59 0 11.502-2.202 11.502-2.202" stroke-linecap="round"/>
        <path id="st-mouth" stroke="#000" stroke-width="3" d="M61.5 76.903h27.003" stroke-linecap="round"/>
        <path id="st-l-eye" stroke="#000" stroke-width="5" d="M47 63.5c1.38 0 2.5-1.12 2.5-2.503S48.38 58.5 47 58.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
        <path id="st-r-eye" stroke="#000" stroke-width="5" d="M101.5 64c1.38 0 2.5-1.12 2.5-2.503S102.88 59 101.5 59 99 60.114 99 61.497C99 62.88 100.12 64 101.5 64z" stroke-linecap="round"/>
        <path id="hg-l-eye" stroke="#000" stroke-width="5" d="M47 53.5c1.38 0 2.5-1.12 2.5-2.503S48.38 48.5 47 48.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
        <path id="hg-r-eye" stroke="#000" stroke-width="5" d="M101.5 54c1.38 0 2.5-1.12 2.5-2.503S102.88 49 101.5 49 99 50.114 99 51.497C99 52.88 100.12 54 101.5 54z" stroke-linecap="round"/>
        <path id="rg-mouth" stroke="#000" stroke-width="3" d="M60.9 79.478s4.24-3.546 13.496-3.546c9.255 0 14.503 3.546 14.503 3.546" stroke-linecap="round"/>
        <path id="rg-l-eye" stroke="#000" stroke-width="3" d="M39.5 57.5s4.85 1.294 8.11 2.665c3.26 1.372 6.89 3.335 6.89 3.335" stroke-linecap="round"/>
        <path id="rg-r-eye" stroke="#000" stroke-width="3" d="M108.5 57.5s-4.85 1.294-8.11 2.665C97.13 61.537 93.5 63.5 93.5 63.5" stroke-linecap="round"/>
        <path id="mouth" stroke="#000" stroke-width="3" d="M61.5 76.903h27.003" stroke-linecap="round"/>
        <path id="l-eye" stroke="#000" stroke-width="5" d="M47 63.5c1.38 0 2.5-1.12 2.5-2.503S48.38 58.5 47 58.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
        <path id="r-eye" stroke="#000" stroke-width="5" d="M101.5 64c1.38 0 2.5-1.12 2.5-2.503S102.88 59 101.5 59 99 60.114 99 61.497C99 62.88 100.12 64 101.5 64z" stroke-linecap="round"/>
      </g>
    </g>
  </svg>
</div>

js Code

$(function(){
  
  $(document).ready(function(){
    
    var mainCtr = $("#main-ctr"),
        lEye = $("#l-eye"),
        rEye = $("#r-eye"),
        mouth = $("#mouth"),
        hpLove = $("#hp-love"),
        button = $("button");
    
    // animatable var
    
    var wkREye = "#wk-r-eye",
        wkLEye = "#wk-l-eye",
        smMouth1 = "#sm-mouth-1",
        smMouth2 = "#sm-mouth-2",
        smMouth3 = "#sm-mouth-3",
        stREye = "#st-r-eye",
        stLEye = "#st-l-eye",
        rgREye = "#rg-r-eye",
        rgLEye = "#rg-l-eye",
        hgREye = "#hg-r-eye",
        hgLEye = "#hg-l-eye",
        stMouth = "#st-mouth",
        rgMouth = "#rg-mouth";
    
    var tl = new TimelineMax({});
    tl.timeScale(1.25);

    tl.set(hpLove, {
      opacity: 0,
      scale: .8
    });
      MorphSVGPlugin.convertToPath("circle");
    
    // functions
    
    // happy
    function happy(){
      tl
        .to(lEye, .3, {
          morphSVG: wkLEye,
          strokeWidth: 3
        })
        .to(rEye, .3, {
          morphSVG: wkREye,
          strokeWidth: 3
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: smMouth3
        }, "-=.3")
        .to([lEye, rEye, mouth], .3, {
          delay: .6,
          x: "-5px"
        })
        .to(lEye, .3, {
          morphSVG: hgLEye,
          strokeWidth: 5
        }, "-=.3")
        .to(lEye, .15, {
          delay: .6,
          scaleY: 0, transformOrigin: "center center",
        })
        .to(lEye, .15, {
          scaleY: 1
        })
        .to(hpLove, .3, {
          opacity: 1,
          x: "-7.5px"
        }, "-=.3")
        .to(hpLove, .3, {
          opacity: 0,
          y: "-7.5px"
        }, "-=.15")
        .to(lEye, .3, {
          delay: .6,
          morphSVG: wkLEye,
          strokeWidth: 3
        }, "-=.3")
        .to([lEye, rEye, mouth], .3, {
          delay: .6,
          x: "0px",
        })
        .set(hpLove, {
          x: "0px",
          y: "0px"
        })
    }
    
    // smAnim
    
    function smAnim(){
      tl
        .to(rEye, .3, {
          delay: .6,
          morphSVG: hgREye,
          strokeWidth: 5
        })
        .to(lEye, .3, {
          morphSVG: hgLEye,
          strokeWidth: 5
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: smMouth1
        }, "-=.3")
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
    }
    setInterval(function(){
        happy();
        smAnim();
    },1500);
 
    
  });
  
  // copy
  balapaCop("Interactive SVG Emoji", "#999");
  
})();