svg动画之动态描边效果_H5之家 - 中国HTML5教程资源分享第一站

时间:2017-02-22来源: 作者:源码库文章热度: ℃

1、首先先做一个简单的线一点一点画出来的效果，主要使用svg中的“strokeDasharray”、“strokeDashoffset”属性，通过css3中的transtion改变strokeDashoffset来实现动画。

注：path中的数据通过在ai中划线后存储为svg格式就可以拿到；

效果图：

svg描边动画,svg,描边,描边效果

代码如下：

2、与画线的效果，接下来用同样的原理来画一个“蓝胖子”，蓝胖子同样是需要用ai画出来，将所有的元素存在数组里面遍历时改变transtion中的during和delay从而实现划线的先后顺序。

效果图：

svg描边动画,svg,描边,描边效果

代码如下：

<div class="move_line2"> <svg xmlns="" width="600px" height="500px"> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M335.088,373.962c23.125-7.219,54.068,12.896,69.115,44.93s8.498,63.855-14.625,71.074c-23.125,7.221-54.068-12.895-69.115-44.928 S311.965,381.183,335.088,373.962z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M209.983,9.426c87.495,4.372,158.857,76.303,158.857,160.122c0,46.699-22.158,87.484-56.91,113.702 c22.268,46.217,33.992,89.483,14.348,125.051c4.02-7.537,6.611-15.313,8.555-23.193c11.648,26.85,14.068,52.875-6.887,75.711 c-64.363,13.082-86.986-18.811-194.209-8.391l-3.699-107.049l-0.92-22.406l0.873,22.42c-22.874-5.814-45.173-11.861-65.204-17.99 l10.062-44.714l49.898,2.646c-43.949-22.82-74.717-76.747-73.621-131.665C51.125,69.85,122.487,5.053,209.983,9.426L209.983,9.426z "></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M127.866,299.414c53.621-10.396,87.391,17.968,94.62,65.603c4.205,55.014-54.168,83.619-90.647,43.756L127.866,299.414 L127.866,299.414z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M129.575,285.055c66.294-2.505,120.602-16.571,186.912-12.424c7.652,1.256,7.152,14.774-1.5,16.288 c-60.402-0.255-119.506,7.59-181.203,10.898c-14.98-0.357-17.425-6.778-13.476-11.896 C123.096,284.311,125.291,285.217,129.575,285.055L129.575,285.055z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M304.605,309.06c-8.162-29.413-11.222-57.848-11.791-87.262c-17.005,8.999-41.066-6.278-40.584-17.486 c-7.021,31.961-10.248,65.548-9.677,100.763"></path> <ellipse fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" cx="279.449" cy="193.855" rx="30.133" ry="30.788"></ellipse> <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" cx="90.681" cy="49.358" r="27.412"></circle> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M124.459,285.183c-36.085-18.873-63.232-58.725-71.063-102.821c-0.052-0.295-0.019-0.163-0.069-0.457 c-43.423-5.859-35.264-73.124,0.427-55.668c0.067-0.353,0.019-0.145,0.088-0.496c8.143-41.139,34.012-75.528,69.743-96.045 c98.492,58.677,146.511,142.883,108.603,245.678c-33.24,3.419-66.109,8.303-102.612,9.683 C127.472,285.135,125.873,284.957,124.459,285.183L124.459,285.183z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M116.536,84.903c15.737,3.062,31.281,7.092,46.398,13.256"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M106.601,103.6c18.341,9.617,40.867,18.074,61.067,27.228"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M89.075,124.2c17.643,12.621,37.999,25.581,60.603,38.823"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M73.603,179.492c6.986,16.398,13.1,33.481,21.251,48.996c17.011,32.372,42.229,39.539,76.563,39.358 c39.524-0.208,50.969-18.655,47.774-57.118C215.006,160.335,155.059,151.715,73.603,179.492L73.603,179.492z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M219.192,210.728c-4.165-50.15-63.557-58.928-144.414-31.635c-65.936,21.271-63.065-77.932-17.728-51.101"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M128.618,261.235c2.627-35.702,22.275-49.91,52.536-47.821c-5.862,4.452-11.342,9.899-14.83,16.185 c13.539-21.654,32.21-27.477,53.206-13.829c1.774,35.034-10.356,51.879-48.112,52.077 C155.131,267.931,140.898,266.362,128.618,261.235L128.618,261.235z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M173.097,17.836c8.253,8.589,0.384,26.394-17.518,39.635c-17.901,13.242-39.232,17.036-47.484,8.448 c-8.253-8.589-0.384-26.395,17.517-39.635C143.514,13.042,164.844,9.248,173.097,17.836L173.097,17.836z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M136.222,26.971c2.455,2.555,0.114,7.852-5.211,11.791c-5.326,3.939-11.672,5.068-14.127,2.514 c-2.455-2.556-0.114-7.853,5.211-11.791C127.421,25.544,133.767,24.416,136.222,26.971L136.222,26.971z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M90.681,22.774c1.076,0,2.138,0.063,3.183,0.187 c-0.154,3.607-3.144,6.503-6.788,6.503c-3.034,0-5.614-2.008-6.483-4.761C83.718,23.458,87.122,22.774,90.681,22.774L90.681,22.774 z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M133.591,410.618c-0.59-0.598-1.174-1.213-1.753-1.846l-2.156-59.363c14.439-5.217,36.941-4.068,65.022,1.484 C198.269,391.583,158.652,421.507,133.591,410.618L133.591,410.618z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d=" M94.52,343.827c23.684,0,46.699,27.789,51.407,62.068s-10.676,62.068-34.359,62.068s-46.699-27.789-51.407-62.068 S70.835,343.827,94.52,343.827z"></path> <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" cx="45.643" cy="299.778" r="33.549"></circle> <line fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" x1="330.418" y1="358.101" x2="350.104" y2="352.659"></line> <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" cx="356.516" cy="351.396" r="9.241"></circle> <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.2677" stroke-miterlimit="2.4142" cx="144.495" cy="309.078" r="11.591"></circle> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.2677" stroke-miterlimit="2.4142" d=" M155.516,305.494c0.344,1.052,0.54,2.168,0.566,3.322l-23.157-0.421c0.067-1.153,0.305-2.262,0.687-3.3L155.516,305.494 L155.516,305.494z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M134.718,315.29c-0.978-1.533-1.605-3.309-1.771-5.207 c0.481-0.335,1.067-0.533,1.701-0.533c1.619,0,2.938,1.291,2.938,2.871C137.587,313.979,136.305,315.253,134.718,315.29 L134.718,315.29z"></path> <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="0.216" stroke-miterlimit="2.4142" d=" M136.491,313.87c1.044,1.918,2.604,3.514,5.015,4.564l-1.693,2.01l-5.378-5.162L136.491,313.87L136.491,313.87z"></path> </svg> </div> <script> (function() { function toArray(arr) { return Array.prototype.slice.call(arr); } var svg2 = document.querySelector('.move_line2 svg'); svg2.parentNode.style.display = 'block'; svg2.style.visibility = 'hidden'; function fullSketch() { svg2.style.visibility = ''; var paths = toArray(svg2.children); var begin = 0; var durations = paths.map(function(path2) { var length; console.log(path2.tagName); if(path2.tagName == "path"){ length = path2.getTotalLength(); }else if(path2.tagName == "ellipse"){ length = Math.PI*path2.getAttribute("rx")*path2.getAttribute("ry"); }else if(path2.tagName == "circle"){ length = 2*Math.PI*path2.getAttribute("r"); }else if(path2.tagName == "line"){ var x_1=path2.getAttribute("x1"),y_1=path2.getAttribute("y1"),x_2=path2.getAttribute("x2"),y_2=path2.getAttribute("y2"); length = Math.sqrt(Math.pow((x_1-x_2),2) + Math.pow((y_1-y_2),2)); } path2.style.strokeDasharray = length + ' ' + length; path2.style.strokeDashoffset = length; return Math.pow(length, 0.5) * 0.02; }); paths[0].getBoundingClientRect(); paths.forEach(function(path, i) { path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset ' + durations[i] + 's ' + begin + 's ease-in-out'; path.style.strokeDashoffset = '0'; path.setAttribute("class", "shade"); begin += durations[i] + 0.1; }); } window.addEventListener('load', fullSketch); }()); </script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持ASPKU源码库！

注：相关教程知识阅读请移步到频道。