svg动画之动态描边效果


Posted in Javascript onFebruary 22, 2017

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

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

效果图:

svg动画之动态描边效果

代码如下:

<svg class="move_line1" xmlns="http://www.w3.org/2000/svg" width="600px" height="150px">
 <path 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 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7
 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4" fill="none">
 </path>
 </svg>
 <script>
 //svg 动画一般用transtion和animation
 var path1 = document.querySelector(".move_line1 path");
 var length1 = path1.getTotalLength();
 //清除动作
 path1.style.transtion = path1.style.WebkitTransition = "none";
 //设置起点
 path1.style.strokeDasharray = length1 + ' ' + length1;
 path1.style.strokeDashoffset = length1;
 //获取一个区域,获取相关的样式,让浏览器寻找一个起始点
 path1.getBoundingClientRect();
 //定义动作
 path1.style.transition = path1.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
 //GO
 path1.style.strokeDashoffset = '0';
 </script>

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

效果图:

svg动画之动态描边效果

代码如下:

<div class="move_line2">
 <svg xmlns="http://www.w3.org/2000/svg" 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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
jQuery实现的简单拖动层示例
Feb 22 #Javascript
Bootstrap 3 进度条的实现
Feb 22 #Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 #Javascript
canvas 绘制圆形时钟
Feb 22 #Javascript
jquery实现数字输入框
Feb 22 #Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
You might like
PHP开发Apache服务器配置
2015/07/15 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php实用代码片段整理
2016/11/12 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
国企干部对照检查材料
2014/08/22 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
病危通知书样本
2015/04/17 职场文书
飞越疯人院观后感
2015/06/09 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL