svg动画制作以及原理

文章目录

1. svg实现写字效果

svg实现写字效果

用到的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>svg</title>
        <style type="text/css">
path {
	stroke-dasharray: 3000; 
    stroke-dashoffset: 3000; 
	animation: dash 3.4s ease-in-out   infinite;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset:0;
  }
}
        </style>
    </head>
    <body>
		<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
  <title>Layer 1</title>
  <path d="m84.5,74c1,1 4.25304,1.53986 10,5c7.36966,4.43713 17.11809,7.3754 24,9c9.23305,2.17963 19.05182,4.61074 28,6c5.03865,0.78228 6.07613,3.61732 7,4c1.30656,0.5412 2.49756,1.9258 3,7c0.29561,2.9854 0.31068,8.00966 0,13c-0.50096,8.04668 -5.22054,14.83128 -9,20c-6.38455,8.7314 -13.45404,19.51277 -21,27c-8.54789,8.48137 -14.58976,16.44043 -21,22c-3.77727,3.27602 -8.70711,6.29289 -8,7c0.70711,0.70711 5.92656,-2.32083 14,-4c5.95531,-1.23863 14,-2 20,-2c3,0 4,0 6,0c1,0 2.07613,-0.38269 3,0c2.61313,1.0824 4.9176,2.38687 6,5c0.76537,1.84776 2,6 2,8c0,5 0,7 0,11c0,2 -0.61731,5.07613 -1,6c-0.5412,1.30656 -2,3 -3,4c-1,1 -0.17625,1.48625 2,2c0.97325,0.22975 2,1 4,3c1,1 2.97252,1.64749 4,6c0.4595,1.9465 0,5 0,8c0,5 0,8 0,13c0,5 -0.16289,9.6095 -4,14c-4.21362,4.82135 -7.73325,9.23273 -13,15c-4.7683,5.22144 -10.46356,9.72507 -17,14c-7.4855,4.89563 -12.45231,6.87299 -20,11c-4.72495,2.58356 -8.5412,1.69345 -8,3c0.76537,1.84775 10.57017,-2.8699 18,-6c6.70904,-2.82645 19.94762,-8.1492 34,-13c14.94597,-5.15927 30.10982,-10.15506 41,-12c4.06519,-0.68869 5.69344,-1.4588 7,-2c0.92387,-0.38269 1,1 2,3c1,2 1,5 1,10c0,6 -0.54901,10.60641 -4,16c-3.61542,5.65054 -5.42824,9.42334 -10,15c-6.27617,7.6557 -12.31021,12.06296 -18,15c-6.46909,3.33932 -12.09114,5.79568 -19,9c-4.05702,1.88165 -7.50424,2.03552 -12,5c-1.18065,0.7785 -1.30518,1.9523 -1,1c2.62523,-8.19196 13.59891,-17.3732 22,-26c15.30115,-15.71225 37.93748,-39.06769 65,-64c23.94484,-22.06003 48.54346,-40.41129 63,-56c10.19968,-10.99847 13.60583,-21.01947 14,-25c0.50244,-5.0742 1,-10 1,-12c0,-4 -1,-5 -1,-6c0,-3 0.48056,-5.03874 0,-8c-0.50653,-3.12144 -1,-7 -1,-9c0,-5 0.15277,-10.04132 -1,-14c-0.88412,-3.03616 0.03146,-5.41207 -2,-9c-0.69678,-1.23065 -1.18875,-2.58471 -2,-2c-2.56537,1.84901 -2.13007,5.3641 -5,11c-3.90353,7.66566 -10.60648,15.98135 -18,25c-9.42493,11.49655 -18.54698,19.42955 -29,30c-8.467,8.56213 -17.27379,17.73653 -24,25c-6.26422,6.76459 -10.11214,13.9183 -13,18c-2.08247,2.94336 -2,5 -2,6c0,1 -0.26254,1.53487 3,0c9.44708,-4.44438 21.23531,-8.36955 30,-12c12.39514,-5.13423 32.48715,-16.93904 53,-27c18.4873,-9.06749 31.87976,-14.56346 39,-22c1.54642,-1.61511 2,-3 2,-4c0,-1 0,-2 0,-3c0,-1 -1.78986,-3.07843 -3,-6c-0.85571,-2.06586 -2.31021,-2.71899 -5,-6c-4.57175,-5.57664 -7.13281,-9.99107 -15,-16c-6.40714,-4.89374 -14.83661,-11.22427 -23,-17c-8.83005,-6.2474 -17.80084,-11.41991 -28,-16c-9.82512,-4.41213 -18.10709,-5.38622 -23,-9c-1.79868,-1.32845 -4.29289,-2.70711 -5,-2c-1.41422,1.41422 -0.49829,8.93797 -1,15c-0.90729,10.96252 0.08391,23.05353 -1,34c-1.0049,10.14841 -3.49588,21.94218 -5,37c-1.49425,14.95885 -1.7,34.0498 -5,53c-3.66751,21.06061 -6.97069,37.00165 -8,55c-0.97231,17.00162 -2,30 -2,42c0,11 -0.19383,20.03043 1,27c0.86089,5.02582 4.14935,8.47427 5,9c1.90211,1.17557 4,3 5,3c3,0 6.16051,1.37851 12,0c6.52875,-1.54123 15.08049,-10.90042 25,-19c12.0994,-9.87952 25.24005,-22.74023 35,-32c9.23349,-8.76028 14.49829,-15.93796 15,-22c0.16495,-1.99319 0,-9 0,-11c0,-3 -0.22055,-4.83127 -4,-10c-2.12817,-2.91046 -3.21167,-4.71411 -6,-7c-4.37469,-3.5864 -6.79489,-5.22021 -10,-8c-3.77728,-3.276 -7.70267,-5.54135 -11,-7c-3.77063,-1.66801 -6.64749,-4.97252 -11,-6c-1.9465,-0.4595 -3.90633,-2.10341 -5,-3c-2.78833,-2.28587 -5.85274,-3.1731 -7,-4c-1.814,-1.30745 -2.09789,-4.17557 -4,-3c-0.85065,0.52573 0.05682,1.94623 1,3c4.27039,4.77115 7.04875,7.95851 13,15c5.04153,5.96515 12.58798,15.50092 21,22c7.07791,5.46838 15.5802,9.94687 26,14c6.78488,2.63922 17.90759,5.41479 26,7c6.93918,1.35928 15.03894,0.2117 23,1c10.14841,1.00488 19,2 29,2c11,0 18.02386,0.57736 25,0c6.06204,-0.50171 10,-1 11,-1l2,0l1,0l0,-1" id="svg_1" stroke-width="1.5" stroke="#000" fill="none"/>
 </g>
</svg>
</body>
</html>

讲解技术点：

1
2
3

stroke-dasharray: 3000; 
stroke-dashoffset: 3000; 
animation: dash1 3.4s ease-in-out   infinite;

虚线(stroke-dasharray)

在SVG中也可以像CSS中那样指定边框为虚线要用到属性stroke-dasharray。stroke-dasharray属性的参数，是一组用逗号分割的数字组成的序列。需要注意的是，这里的数字必须用逗号分割，虽然也可以插入空格，但是数字之间必须用逗号分开。每一组数字，第一个用来表示实线，第二个用来表示空白。

如果stroke-dasharray为5，则表示会先画5px实线，紧接着是5px空白，然后又是5px实线，从而形成虚线。如果你想要更复杂的虚线模式，你可以定义更多的数字

storke-dashoffset

stroke-dashoffset，定义虚线开始的位置。

++因此可以通过css中的animation属性设置虚线开始的位置使其产生动画效果++

当我们有一段长度为300的线条时，我们指定它的storke-dashoffset的值跟它的stroke-dasharray的值一样，这时候线条时从300像素的开始绘制，而我们整个的线条也只有300像素，所以这个时候线条时不可见的。而当我们指定storke-dashoffset的值从300慢慢的变化到0的时候，则线条也会从0的位置从新开始绘制，所以就像手画出来一样。配合CSS3就可以模拟实现手绘的动画效果。

根据如上原理实现svg loading百分比动画效果
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>svg</title>
		<style type="text/css">
			.circle {
				stroke: #C3C3C3;
				stroke-width: 4px;
				stroke-dasharray: 300;
				stroke-dashoffset: 300;
				animation: dash 1.4s cubic-bezier(.42, .24, .01, .99) infinite;
				transform-origin: center;
			}
			
			@-webkit-keyframes dash {
				50% {
					stroke-dashoffset: 150;
					transform: rotate(90deg);
					stroke: #787D82
				}
				100% {
					stroke-dashoffset: 0;
					transform: rotate(180deg);
				}
			}
			
			@keyframes dash {
				50% {
					stroke-dashoffset: 150;
					transform: rotate(90deg);
					stroke: #787D82
				}
				100% {
					stroke-dashoffset: 0;
					transform: rotate(180deg);
				}
			}
		</style>
	</head>
	<body>
		<svg width="200" height="200">
			<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" class="circle" fill="none" />
		</svg>
	</body>
</html>

演示地址：loading

补充：好用的svg绘制工具

fayのblog

不讲究，不将就，对生活，亦对技术。

svg动画制作以及原理

svg实现写字效果