SVG實現描邊動畫

時間 2019-12-12

標籤 svg 實現動畫简体版

原文原文鏈接

提及SVG，我是恨它又愛它，恨它是由於剛開始接觸的時候本身傻B地想用代碼去寫它，其實在web上咱們用它作交互也只是用了幾個經常使用的特性而已，其餘的標籤知道這麼一回事就成了，其實說白了它就是一種圖片格式，你得去畫它，網站上最長用的SVG交互效果就是描邊動畫了，今天就來實現它css

先上效果圖：html

思路：要實現這種動畫，咱們要使用的是SVG的路徑path標籤，其中而後配合兩個屬性：stroke-dasharray和stroke-dashoffset，至於用什麼方式實現動畫效果就八仙過海了，我這裏使用的是css3的animationhtml5

第一步：瞭解SVG的path

中文的意思就是路徑，描邊動畫嘛，你得先給個路線我才能描邊啊，路徑就是這個路線：css3

先上網找個圖片，放進AI裏面，而後用鋼筆勾勒路徑，再把圖片刪掉，剩下路徑，把它另存爲svg，而後把它拖進編譯器裏，就能看到一堆代碼，咱們只要保留其中的path就好（不會用AI的給你個理由去勾搭設計師美眉）git

第二步：瞭解stroke-dasharray和stroke-dashoffset

理解字面意思就好：github

stroke-dasharray：就是把線條斷開爲虛線，下圖就是我把stroke-dasharray設置爲10的效果，它就變成虛線了，數值越大，線就越長web

stroke-dashoffset：就是設置線條的偏移，設置了這個值後，線段就會偏移相應的值，咱們要實現動畫只要動態改變這個偏移值就好，那樣線條就會動起來了ide

第三步：利用@keyframes實現動態描邊

@keyframes describe{
	from{
		stroke-dashoffset: 1000;
		opacity: 1;
	}
	to{
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

額~~有點快，不要緊，明白意思就好，最後，描邊完成以後再插入一個動畫，讓背景圖片淡入，最終效果以下：svg

下班了，不調了，若是再慢點效果估計更好動畫

上終板代碼(直接拷貝就能跑)：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>super</title>
 6     <script src="vivus.js"></script>
 7     <style>
 8     .super_logo{
 9         position: absolute;
10         opacity: 0;
11         animation:fadeIn 1s ease-in  forwards;
12             -webkit-animation:fadeIn 1s ease-in  forwards;
13     }
14     #super{
15         position: absolute;
16         z-index: 1;
17         stroke-dasharray: 800;
18           stroke-dashoffset: 1000;
19         animation: describe 2s forwards;
20             -webkit-animation: describe 2s forwards;
21     }
22     @keyframes fadeIn{
23         from{opacity: 0;}
24         80%{opacity: 0.5;}
25         to{opacity: 1;}
26     }
27     @-webkit-keyframes fadeIn{
28         from{opacity: 0;}
29         80%{opacity: 0.5;}
30         to{opacity: 1;}
31     }
32     @keyframes describe{
33         from{
34             stroke-dashoffset: 1000;
35             opacity: 1;
36         }
37         to{
38             stroke-dashoffset: 0;
39             opacity: 0;
40         }
41     }
42     @-webkit-keyframes describe{
43         from{
44             stroke-dashoffset: 1000;
45             opacity: 1;
46         }
47         to{
48             stroke-dashoffset: 0;
49             opacity: 0;
50         }
51     }
52     </style>
53 </head>
54 <body style="background:#0f1a3a;">
55 <img src="http://images2015.cnblogs.com/blog/754767/201606/754767-20160606165217980-1558570494.gif" alt="super" class="super_logo">
56 <svg id="super" x="0px" y="0px" width="293px" height="200px" viewBox="0 0 293 200">
57     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M67.667,39.667c0,0-33.334,17.333-46.667,36.667
58         c0,0,33.007,40.458,43.331,50.018c19.419,17.982,65.002,55.316,82.169,59.982c0,0,27.834-11.334,49.834-30.667S249,113,261,100
59         s9.334-12.333,15.334-22.333c0,0-21.333-29.333-44-38c0,0-162.001-5.334-163.334-2.667"/>
60     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M169.667,50.333c0,0-71.334-2.667-74.667,8.667s42,14,42,14
61         s55.333,4.667,60,6.667s32.668,7.254,43.334,31.627L255,93.667C255,93.667,217,59,169.667,50.333z"/>
62     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M75.667,123c0,0,42,8,78,8.667s32.667,10.667,32.667,10.667
63         S185.333,155,146.5,153.667S75.667,123,75.667,123z"/>
64     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M45,93c0,0-12.667-24,34-48h-8.667c0,0-35.455,24.559-36,35.677L45,93
65         z"/>
66     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M174.912,161c0,0-24.745,12.999-24.745,12.333
67         s-15.25-4.249-20.583-10.416"/>
68     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M130,162.667c0,0,1.75-3.083,13.667-1.25c0,0,30,0.836,30.75-0.582"/>
69     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M177.75,43L224,45.5c0,0,7.5,12.125-13,8.625S177.75,43,177.75,43z"/>
70     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M237.25,52c0,0,2.75,20.375,21.875,35.625l5.75-6.948
71         C264.875,80.677,249.273,55.266,237.25,52z"/>
72 </svg>
73 </body>
74 </html>

View Code

恩恩~~寫到這裏個人肚子餓慘了，他們都下班去吃飯了，打字這麼開心我乾脆再介紹個插件，那就vivus.js

Vivus是一款能夠執行SVG路徑動畫的輕量級Javascript庫，github地址：https://github.com/maxwellito/vivus

扔箇中文的介紹http://www.htmleaf.com/html5/SVG/201501261279.html

寫的還能夠，我就不重複碼字了，直接上demo：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>super</title>
 6     <script src="vivus.js"></script>
 7     <style>
 8     .super_logo{
 9         position: absolute;
10     }
11     #super{
12         position: absolute;
13         z-index: 1;
14     }
15     </style>
16 </head>
17 <body style="background:#0f1a3a;">
18 <img src="super.gif" alt="super" class="super_logo">
19 <svg id="super" x="0px" y="0px" width="293px" height="200px" viewBox="0 0 293 200">
20     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M67.667,39.667c0,0-33.334,17.333-46.667,36.667
21         c0,0,33.007,40.458,43.331,50.018c19.419,17.982,65.002,55.316,82.169,59.982c0,0,27.834-11.334,49.834-30.667S249,113,261,100
22         s9.334-12.333,15.334-22.333c0,0-21.333-29.333-44-38c0,0-162.001-5.334-163.334-2.667"/>
23     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M169.667,50.333c0,0-71.334-2.667-74.667,8.667s42,14,42,14
24         s55.333,4.667,60,6.667s32.668,7.254,43.334,31.627L255,93.667C255,93.667,217,59,169.667,50.333z"/>
25     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M75.667,123c0,0,42,8,78,8.667s32.667,10.667,32.667,10.667
26         S185.333,155,146.5,153.667S75.667,123,75.667,123z"/>
27     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M45,93c0,0-12.667-24,34-48h-8.667c0,0-35.455,24.559-36,35.677L45,93
28         z"/>
29     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M174.912,161c0,0-24.745,12.999-24.745,12.333
30         s-15.25-4.249-20.583-10.416"/>
31     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M130,162.667c0,0,1.75-3.083,13.667-1.25c0,0,30,0.836,30.75-0.582"/>
32     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M177.75,43L224,45.5c0,0,7.5,12.125-13,8.625S177.75,43,177.75,43z"/>
33     <path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M237.25,52c0,0,2.75,20.375,21.875,35.625l5.75-6.948
34         C264.875,80.677,249.273,55.266,237.25,52z"/>
35 </svg>
36 <script>
37 window.onload=function(){
38     var toPlay= new Vivus('super', {
39         type: 'delayed',
40         duration: 50, 
41         start: 'autostart', 
42         forceRender: false, 
43         dashGap: 20}
44     );
45     var oSuper=document.getElementById('super');
46     oSuper.addEventListener('click',function(){
47         toPlay.reset().play();
48     });
49 };
50 </script>
51 </body>
52 </html>

View Code

以上~~若是你們以爲有意思，點個讚唄，關注下也就更好了

他們吃飯都回來了，我也終於要走了，實習狗下班

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。