HTML5 SVG 特效示例

墨蓝 2022-08-07 15:52 223阅读 0赞

### SVG来生成动画 ###

\*\*示例说明：  
示例１

> 注意viewBox属性可以帮助你设置svg图像大小

\-**fill属性是否填充**  
\-**stroke为绘制，颜色\#AAAAAA**  
\-**stroke-width为绘制线的粗细**  
\-**d是具体数据，这里看到的数据代表了坐标，以及折线等等，可以使用工具生成**

示例２

> 在SVG图形中，我们只需要调整stroke-dasharray和stroke-dashoffset即可模拟出线段绘制的动画效果

\-**stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙 ，这里包含两个参数**  
\-**stroke-dashoffset定义了从那个位置开始渲染生成线段**  
\-**stroke-dasharray可以看到我们生成100px的线段，并且生成10px的线段之间的缝隙**  
\-**stroke-dashoffset定义从那个位置开始绘制**

示例３

> 使用CSS3的keyframe可以直接指定动画效果

示例4

> 用js完成示例3

示例5

> 复杂图形动画

\-**针对更复杂的图形，我们需要处理多个path对象**  
\-**dd**

### 代码块 ###

示例1：

示例2：

/*CSS代码片段*/
    div{ font-size:12px; padding: 10px 0; }
    input{ width: 280px; }
    
    /* 定义一些辅助美化css*/

/*Javascript代码片段*/
    
    //获取本例SVG图形线段长度
    
    $('#len').html($('path')[0].getTotalLength()); //这个方法可获取svg图形线段长度
    
    
    // 添加两个处理滑块并且自动设置dashoffset和dasharray属性值方法
    
    $('#dashoffset').on('input',function(){ 
      var current = $(this).val();
      $('path').attr('stroke-dashoffset', current);
    });
    
    $('#dasharray').on('input', function(){ 
      var current = $(this).val();
      $('path').attr('stroke-dasharray', current + ' ' + current);
    });
    
    /* 拖拽滑块，可以看到SVG图形的stroke-dashoffset和stroke-dasharray变化的效果 */
    
    /* 动画实现原理： 当设置stroke-dashoffset为最大值后，　再变化stroke-dashoffset值，则能够看到模拟出来的素描动画效果 */

示例3：

/*定义keyframe动画*/
    /* 添加动画到path元素 */
    .path{ stroke-dasharray: 265.07; stroke-dashoffset: 265.07; animation: dash 3s linear infinite; /* 支持chrome */ -webkit-animation: dash 3s linear infinite; }
    @keyframes dash{
    
      from{ stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */ }
    
      to{ stroke-dashoffset: 0; }
    
    }
    /* 支持chrome浏览器 */
    @-webkit-keyframes dash{
    
      from{ stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度，可以使用js获取 */ }
    
      to{ stroke-dashoffset: 0; }
    
    }

/*Javascript代码片段*/
    var len = $('path')[0].getTotalLength(); // 得到素描线长度
    $('#len').html(len);
    
    //注意，对于CSS3的keyframe来实现动画效果不需要js辅助，但我们需要知道这个素描线“长度”，使用js可以帮助我们获取

<svg class="gbtags" viewBox="0 0 300 125" version="1.1" xmlns="http://www.w3.org/2000/svg">
    
                <path class="path" fill="none" stroke="#222" stroke-width="2" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" />
    
            </svg>
    
            素描线长度：<span id="len"></span>
    
            
            <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.js"></script>

示例4：

/*添加body背景*/
    body{ background: #41b1e7; }

/*定义相关Javascript*/
    var current_frame, //定义当前帧
          total_frames, //定义全部帧数
          path, //定义svg中的唯一path元素
          length, //定义path所生成的素描长度
          handle; //定义javascript动画句柄
          path = document.getElementById('path'),
            length = path.getTotalLength();
    
    //定义初始化方法
    var init = function(){ 
      current_frame = 0;
      total_frames = 160;
      path.style.strokeDasharray = length + ' ' + length; //定义dasharray
      path.style.strokeDashoffset = length; //定义dashoffset
      handle = 0;
    }
    //定义实际的动画绘制方法
    var draw = function(){ 
      var progress = current_frame/total_frames;
      if(progress>1){ //这里定义完成动画
        window.cancelAnimationFrame(handle);
      }else{
       //否则使用reqeuestAnimationFrame来生成动画
        current_frame++;
        path.style.strokeDashoffset = Math.floor(length*(1 - progress));
    
        handle = window.requestAnimationFrame(draw);
      }
    }
    //定义一个重新运行方法
    var rerun = function(){ 
      init();
      draw();
    }
    //页面加载即运行
    rerun();

示例5：

/*CSS代码片段*/
    
    /* 定义背景色 */
    body{ background: #41b1e7; }
    
    /* 重新定义path元素属性，生成素描 */
    path{ fill:none; stroke: #FFFFFF; /* 素描线颜色*/ stroke-width: 2; /* 素描线粗细 */ }

/*处理素描动画相关Javascript*/
    //大体代码和上一节类似，只不过这里我们需要处理多个素描线即path元素
    var current_frame, //定义当前帧
          total_frames, //定义全部帧数
          path, //定义svg中的唯一path元素
          length, //定义path所生成的素描长度
          handle; //定义javascript动画句柄
    
    //定义初始化方法
    var init = function(){ 
      current_frame = 0;
      total_frames = 80;
      path = new Array(); // 这里保存多个path元素
      length = new Array(); // 这里保存每一个path元素长度
    
      $('path').each(function(i, item){ 
        path[i] = $(this)[0];
        len = path[i].getTotalLength();
        length[i] = len;
    
        path[i].style.strokeDasharray = len + ' ' + len;
        path[i].style.strokeDashoffset = len;
      });
    
      handle = 0;
    }
    //定义实际的动画绘制方法，基本方法类似，只不过这里需要处理多条线段的动画绘制
    var draw = function(){ 
      var progress = current_frame/total_frames;
      if(progress>1){ //这里定义完成动画
        window.cancelAnimationFrame(handle);
      }else{
       //否则使用reqeuestAnimationFrame来生成动画
        current_frame++;
        //这里处理多条素描线段绘制动画
        for(var j=0;j<path.length;j++){
          path[j].style.strokeDashoffset = Math.floor(length[j]*(1-progress));
        }
        handle = window.requestAnimationFrame(draw);
      }
    
    }
    //定义一个重新运行方法
    var rerun = function(){ 
      init();
      draw();
    }
    //页面加载即运行
    rerun();