[原创] 实现SVG绘画动作的效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/daxianghaoshuai/article/details/95074900

背景:在网上看到别人的svg图片在显示的时候是画出来的线型图,感觉很不错。研究了一下,写出下面demo,可以直接拿来运行

先上效果图
在这里插入图片描述

注意:动画效果貌似只能在svg中的path标签有效,关键的实现就是下面两个属性的使用和css3中的animation的控制

先掌握的知识点
svg基础点
stroke-dasharray: 用来描边的点划线的图案范式,数值越大,虚线越宽
stroke-dashoffset:属性指定了dash模式到路径开始的距离。
animation动画基础点
animation css3的动画关键属性,具体使用请另外百度。在本例中主要是控制dasharray,dashoffset的值变化,从而实现绘制动画效果
好了,下面就是绘制的步骤了,其实一共也就两步
1 控制虚线的宽度,如果初始化为空白,则就让stroke-dashoffset和stroke-dasharray等于要绘制的path总长度,如何计算path总长度呢?

	var path = document.querySelector('.path');
   	var length = path.getTotalLength();   //这个数值就是了

2 animation动画属性,定义一个使stroke-dashoffset为0,并定义动画的生命周期时间即可,具体看下面demo代码。

下面就是demo内容
注意:必须要SVG的path中才能实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  
   
    <svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="5" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 1</title>
         <path class="path1" d="m175.5,240c0,0 2.439667,-3.436249 8,-10c6.398788,-7.553513 20.439194,-14.8246 30,-28c7.096558,-9.77951 9.279068,-24.191116 12,-33c1.58931,-5.145294 1.337494,-7.310013 3,-10c0.7435,-1.203003 2.279327,-3.57196 4,-5c5.602112,-4.649338 15,-3 24,-3c14,0 28.062592,-0.220062 46,5c23.084015,6.717804 45.199768,14.611099 63,24c18.212982,9.606613 23.211639,10.854065 27,20c1.148041,2.771637 1.877441,9.468704 -1,17c-5.643127,14.770081 -20.075073,24.883392 -31,32c-9.063324,5.903931 -20.465912,10.179443 -28,15c-5.393585,3.450989 -6,5 -6,6c0,2 1.055695,4.392212 -2,11c-3.026733,6.545135 -6.729614,12.228851 -11,17c-1.886353,2.107544 -4.748505,5.465851 -10,8c-7.694916,3.713226 -13.866943,6.544189 -21,8c-7.899414,1.612213 -22,1 -40,1c-15,0 -22.174179,0.749207 -28,-1c-9.432846,-2.832214 -13.829712,-5.282654 -17,-7c-6.696396,-3.627441 -15.260895,-3.975128 -25,-7c-7.273041,-2.258942 -12.347183,-3.288666 -17,-6c-5.532333,-3.223846 -8.328217,-11.842529 -13,-22c-8.614334,-18.729477 -11.859543,-28.016724 -13,-37c-0.890549,-7.014771 -2,-15 -2,-24c0,-8 -1.104729,-15.506592 3,-23c2.402115,-4.385193 5.289383,-10.411499 9,-16c5.099762,-7.680649 9,-12 13,-16c3,-3 6,-4 8,-5c2,-1 4,-2 5,-2c1,0 1.763138,2.34346 4,8c2.651794,6.705811 5.768585,12.6129 8,18c1.57785,3.80925 3,8 3,11c0,6 -1.148758,8.133759 0,13c0.513748,2.176254 1,4 1,5c0,2 0,4 0,6c0,1 0,2 0,4c0,2 -1,3 -1,4c0,1 0,2 0,3c0,1 0,2 0,3c0,1 0,2 0,4c0,1 -1,3 -1,4l0,1l0,1l0,1" id="svg_15" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="5" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 2</title>
         <path class="path2" d="m316.5,242c0,0 -0.151581,-3.045105 2,-10c2.803772,-9.063049 4.33197,-15.229355 6,-19c1.458649,-3.297333 3,-6 4,-7c1,-1 0.705475,-2.346191 3,-4c1.813995,-1.307449 3.147278,-2.173096 2,-3c-3.627991,-2.614899 -8.789154,-2.896805 -24,-6c-13.85672,-2.826935 -22,-2 -28,-2c-4,0 -6.418854,-0.581146 -8,1c-1.581146,1.581146 -3.563507,5.702499 -6,11c-2.642761,5.745941 -4.798615,13.044525 -6,18c-1.715271,7.07515 -4.486267,12.823746 -5,15c-0.919006,3.89299 0,8 0,10c0,1 0,2 0,5c0,3 -3,7 -6,10c-4,4 -7.053497,6.540497 -9,7c-2.176254,0.513733 -3,1 -7,1c-4,0 -8,0 -12,0c-3,0 -7.802429,-0.432892 -14,-3c-5.843124,-2.420288 -6.693436,-3.541199 -8,-3c-0.923874,0.38269 -0.707108,2.292908 0,3c0.707108,0.707092 2.794876,-0.220215 6,-3c3.777267,-3.276001 8.531647,-7.517029 14,-12c2.78833,-2.285873 5.877655,-5.06601 7,-7c1.809723,-3.118484 2.520157,-4.323669 4,-6c2.386169,-2.703003 5.190277,-3.881516 7,-7c2.24469,-3.867996 5,-8 8,-12c3,-4 5,-7 7,-10c2,-3 4.173096,-6.852737 5,-8c1.307465,-1.813995 2,-4 3,-6c1,-2 2.346191,-2.70546 4,-5c1.307465,-1.813995 2.458801,-1.693436 3,-3c0.38269,-0.923874 1.934143,-2.144287 4,-3c2.92157,-1.210144 4,-2 5,-2c2,0 3.041321,0.152771 7,-1c3.036163,-0.88414 9,-1 16,-1c9,0 15.106995,0.080994 19,1c2.176239,0.513748 4.042908,0.71022 5,1c3.450836,1.04483 5.906342,3.103409 7,4c2.78833,2.285873 6.769501,4.390991 9,8c3.325012,5.37999 2.583893,8.028992 3,11c1.009766,7.209747 3,10 3,12c0,3 0,5 0,7c0,3 -1,5 -2,6c-3,3 -5,4 -8,5c-3,1 -8,2 -10,2c-1,0 -2.186005,0.692551 -4,2c-1.147278,0.826904 -2,2 -3,2c-1,0 -2,0 -3,0c-1,0 -3,0 -5,0l-1,0" id="svg_16" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="580" height="400">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 1</title>
         <text stroke="#000" class="path3" transform="matrix(2.1535985469818115,0,0,4.55555534362793,-228.9893115758896,-709.1110688447952) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="201.900914" x="170.175315" stroke-width="0" fill="#bf4c4c">HIKVISION</text>
        </g>
    </svg>
    
</body>
<style>
    /* 如何获取stroke的长度   
    
    var path = document.querySelector('.path');
    var length = path.getTotalLength(); 
    
    */
.path1 {
  stroke-dasharray: 100;
  animation: dash 5s linear ;
}
@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

.path2{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash2 5s linear forwards;
}
@keyframes dash2 {
  to {
    stroke-dashoffset: 0;
  }
}
.path3{
    stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash3 5s linear forwards;
}
@keyframes dash3 {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
</html>

参考资料:
在线绘制svg平台
How SVG Line Animation Works

展开阅读全文

五边形扫雷游戏,原创SVG + Javascript 实现

10-22

国庆期间,写了个SVG + Javascript 实现的五边形的扫雷游戏,在QQ群和微博公布了一下,一直懒得写到blog上面来,现在补上来。rn这个是10月5号晚上写的,在QQ群发出来之后,根据朋友们的体验,以及自己的想法,后面几天又陆续修了一些bug,增加了一些功能。rn没有截图的,都是耍流氓!rn所以我先发个图,现在看起来是这样子:rn[img=https://img-bbs.csdn.net/upload/201310/22/1382406593_88580.png][/img]rnrn有兴趣的可以戳开这里玩一玩:SVG + Javascript 实现的五边形的扫雷游戏。rn五边形的扫雷你可能没有玩过吧,推理难度降低了,但是没有方块扫雷那么直观,挑战一下头脑吧。rnrn和一般JS版的扫雷游戏相比,我这个扫雷游戏的特点:rn这个扫雷游戏的每个格子都是五边形的。几何方面来讲,五边形是不能全等密铺的,这与六边形、四边形、三角形不同。rn图形采用SVG来显示,带来的好处很多,处理任意形状的点击区域很方便,可以任意缩放还保持清晰,自动满窗显示,不需要图片文件了,红旗和地雷都是svg代码实现的。rn地雷的生成放在了第一次点击之后,这样做的好处是避免了第一次就点击到雷的情况。rn第一次点击,保证不触雷且一定会挖开一片区域,这样做避免了开始就要猜的情形。Win7的扫雷也是这样的,但XP的扫雷不是。rn显示剩余要挖开的格子数!扫雷是否完成,主要是看这个数是否到0的,大部分js扫雷游戏的判胜逻辑是错的。rn支持双键/双击翻雷,这个也提一下,虽然我扫雷很少用这个功能。rn非递归实现。好处是可以高效处理更大局面而不会使浏览器卡死。rn扫雷失败(触雷)后,显示答案。触雷的格子、所有不是雷但标了雷的、是雷而没有标雷的,都会区别显示出来。其实是很基本的功能。rn没有标记可疑格子的功能,实在觉得这个不需要。rn其它没有的功能,因为忙,因为懒。rnrn关于程序的实现,也简介一下。rn因为是五边形,就是上面图片那个形状,和经典的方块表格有很大的不同,导致了编程和数据结构都要比经典扫雷复杂一些。rn因为全等五边形不能密铺平面,而六边形可以,所以我采用了将一个六边形切分为四个五边形,再由多个六边形构成整个局面。rn扫雷游戏关键的一环是求一个格子的所有相邻格子,这四个五边形的相邻情况都不一样,需要区别对待,有别于经典扫雷。rn数据结构采用了三维object的形式,每个格子的位置用3个量来表示,对这3个量进行加减,就能得到周围格子的度量。经典方格扫雷或者是六边形扫雷都是只需要行和列2个量的。rn对于第一次点击保证不触雷且挖开一片的处理:点击后,生成随机的雷,对点击的格子以及相邻的几个格子进行判断,如果有雷,则随机交换到其它不是雷的格子去。rnrn鉴于CSDN论坛JS版的人气情况,代码分析就省了,对代码有兴趣的,可去我的BLOG交流。rnrn[url=http://blog.csdn.net/cuixiping/article/details/12941421]CSDN BLOG[/url] 论坛

没有更多推荐了,返回首页