Question

我想在SVG中为我的徽标设置动画，但这段代码没有显示我的徽标，我的代码是不是错了？此代码不显示任何内容。如果我能够显示，如何处理我的徽标的动画？

＆＃13;

short *ptr1 = (short*)&hex;

＆＃13;

Answer 1

我认为你的漂亮徽标并不适合绘画动画。

一种方法是绘制路径的轮廓并将其填入回调函数...

以下示例为您提供了一点方向

＆＃13;

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>SVG 001</title>
    <style>
      body{font-family:"Calibri", sans-serif;}
      svg{border:1px solid #eee;width:100px;height:100px;}
    </style>
  </head>
    <body>
      <p>Offset Dasharray</p>
     <svg width="200" height="200" viewBox="0 0 500 500">
     <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none"
      stroke-width="5" fill="none" />
    </svg>
    <script>
      var paintPathAni=function(path, duration, color, callback){
          easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }
          easeInQuad= function (t) { return t*t}
          easeOutQuad= function (t) { return t*(2-t) }
          /*
          for (var i=0; i<=1; i+=0.1)
          { 
            console.log(easeInOutQuad(i));
          }
          */
          var len=path.getTotalLength();  
          var aktLen;
          var sumSteps = duration / (1000/60) // 60 pics per second
          var step=1;
          var pathAnim;
          var anim=function(){
            //aktLen = len/sumSteps*step;
            aktLen = easeInOutQuad(step/sumSteps)*len; 
            //aktLen = easeInQuad(step/sumSteps)*len; 
            //aktLen = easeOutQuad(step/sumSteps)*len; 
            
            path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen));
            path.setAttribute('stroke',color);
            if (step < sumSteps){
              step++;
              pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
              } else {
                clearTimeout(pathAnim);
                path.setAttribute('stroke',"red");
                path.setAttribute('stroke-dasharray','none');
                if (callback) return callback();
              }
          }
          anim();   
      }
      paintPathAni(myPath, 3500,'red',function(){console.log('Animation End')});
    </script>
  </body>  
  </html>

＆＃13;

动画SVG徽标

1 个答案: