SVG chizig'ini kesib tashlang

SVG faylida chiziqli satrni animatsiya qilmoqchiman. Chiziq "uzunligi" 0 dan uzunlikgacha "o'sishi" kerak. Men topgan barcha usullar men uchun mos emas.

Har kimning fikri bormi, buni qanday qilib hal qilish mumkin?

Mening svg faylimdagi yo'l bu:


Chiziqni to'g'ri qatoriga aylantirish uchun:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Albatta, bu ishlamaydi, men chiziq chizig'ini kesmoqchi bo'lganimda. Buni qanday hal qilish kerakligini biladigan biron bir odam bormi?

That's my codepen: http://codepen.io/anon/pen/WpZNJY

PS: Men rangli fonni egallaganim sababli, yo'lni yashirish uchun bir-birining ustiga ikkita yo'lni ishlatolmayman.

2
Men nimanidir sinab ko'rmoqchi bo'ldim. Biroq, bugungi kungacha kechadigan boshqa majburiyatlarga egaman.
qo'shib qo'ydi muallif Francis Hemsher, manba
Men nimanidir sinab ko'rmoqchi bo'ldim. Biroq, bugungi kungacha kechadigan boshqa majburiyatlarga egaman.
qo'shib qo'ydi muallif Francis Hemsher, manba
Ushbu animatsiya uchun Javascriptdan foydalanmoqchimisiz?
qo'shib qo'ydi muallif Francis Hemsher, manba
Men uchun ham yaxshi bo'lar edi. Sizda biron bir tavsiyangiz bormi?
qo'shib qo'ydi muallif CaraMar, manba
Men uchun ham yaxshi bo'lar edi. Sizda biron bir tavsiyangiz bormi?
qo'shib qo'ydi muallif CaraMar, manba

6 javoblar

Buning usullaridan biri Javascript bilan. Ko'p chiziqni yaratish orqali yo'lni takrorlaydi. Quyidagi misolni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>
<head>

</head>
<body >
This builds a smooth/dashed polylines that replicates your paths.
<button onClick=animateDashPaths()>Animate Paths</button>
&lt;!-- Vienna Dash --&gt; &lt;!-- Budapest Dash --&gt; &lt;!-- Salzburg Dash --&gt; &lt;!-- Tyrol Dash --&gt; <script> //---button--- function animateDashPaths() { var NS="http://www.w3.org/2000/svg" //----Vienna---------------- var endLengthVienna=pathVienna.getTotalLength() var lengthDeltaVienna=endLengthVienna/200 var polylineVienna=document.createElementNS(NS,"polyline") Layer_1.appendChild(polylineVienna) var pntListVienna=polylineVienna.points var iTVienna=setInterval(drawPathVienna,5) var cntVienna=0 function drawPathVienna() { var len=lengthDeltaVienna*cntVienna++ if(len
</div> </div>

3
qo'shib qo'ydi
Ilovadan farqli o'laroq, ushbu dastur uchun eng oddiy usul har bir yo'l uchun har bir funktsiyani takrorlashdir. (Men ko'rsatgan javobni tahrir qildim)
qo'shib qo'ydi muallif Francis Hemsher, manba
Ajoyib! Muvaffaqiyatli ishladi! Rahmat!
qo'shib qo'ydi muallif CaraMar, manba
Rahmat! Bu men uchun juda yaxshi ishlaydi! Biroq, barcha yo'llarni (# myPath1, # myPath2, ...) jonlantirish uchun funktsiyani qanday qilib aylantira olaman?
qo'shib qo'ydi muallif CaraMar, manba

Buning usullaridan biri Javascript bilan. Ko'p chiziqni yaratish orqali yo'lni takrorlaydi. Quyidagi misolni ko'ring:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>
<head>

</head>
<body >
This builds a smooth/dashed polylines that replicates your paths.
<button onClick=animateDashPaths()>Animate Paths</button>
&lt;!-- Vienna Dash --&gt; &lt;!-- Budapest Dash --&gt; &lt;!-- Salzburg Dash --&gt; &lt;!-- Tyrol Dash --&gt; <script> //---button--- function animateDashPaths() { var NS="http://www.w3.org/2000/svg" //----Vienna---------------- var endLengthVienna=pathVienna.getTotalLength() var lengthDeltaVienna=endLengthVienna/200 var polylineVienna=document.createElementNS(NS,"polyline") Layer_1.appendChild(polylineVienna) var pntListVienna=polylineVienna.points var iTVienna=setInterval(drawPathVienna,5) var cntVienna=0 function drawPathVienna() { var len=lengthDeltaVienna*cntVienna++ if(len
</div> </div>

3
qo'shib qo'ydi
Ilovadan farqli o'laroq, ushbu dastur uchun eng oddiy usul har bir yo'l uchun har bir funktsiyani takrorlashdir. (Men ko'rsatgan javobni tahrir qildim)
qo'shib qo'ydi muallif Francis Hemsher, manba
Rahmat! Bu men uchun juda yaxshi ishlaydi! Biroq, barcha yo'llarni (# myPath1, # myPath2, ...) jonlantirish uchun funktsiyani qanday qilib aylantira olaman?
qo'shib qo'ydi muallif CaraMar, manba
Ajoyib! Muvaffaqiyatli ishladi! Rahmat!
qo'shib qo'ydi muallif CaraMar, manba

Bundan tashqari, maskalarni ishlatib, shunday qilishingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.paths {
  fill: none;
  stroke: black;
  stroke-dasharray: 5;
}

.mask {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
 
 
 
 
 
 
 


 


 


 


 


 
 
 
 
 
 
 
 
 
</div> </div>

Bu shuningdek, quyidagi kabi mavjud:

Enjoy!

Biroq, ... siz kodingizni o'zaro faoliyat brauzerni testdan o'tkazganingiz va muammolaringiz mavjud bo'lsa teglar yoki javascriptlarga qaytganingizga ishonch hosil qiling.

1
qo'shib qo'ydi
Bu internetdagi eng yaxshi javob!
qo'shib qo'ydi muallif nikk wong, manba
Siz kunni @nikkwong rahmat qildim: D
qo'shib qo'ydi muallif Ruskin, manba
Agar sizda turli xil uzunlikdagi chiziqlarga ega bo'lsangiz, unda siz yoki a) CSS-ni qo'l bilan har bir tomoshabin bilan to'ldirishingiz va ularni taxminan uzunligiga + fudge'ye almashtirishingiz kerak ... yoki b) uzunligini olish uchun JS dan foydalaning, maskani jonlantirish ...;)
qo'shib qo'ydi muallif Ruskin, manba

Bundan tashqari, maskalarni ishlatib, shunday qilishingiz mumkin:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.paths {
  fill: none;
  stroke: black;
  stroke-dasharray: 5;
}

.mask {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
 
 
 
 
 
 
 


 


 


 


 


 
 
 
 
 
 
 
 
 
</div> </div>

Bu shuningdek, quyidagi kabi mavjud:

Enjoy!

Biroq, ... siz kodingizni o'zaro faoliyat brauzerni testdan o'tkazganingiz va muammolaringiz mavjud bo'lsa teglar yoki javascriptlarga qaytganingizga ishonch hosil qiling.

1
qo'shib qo'ydi
Bu internetdagi eng yaxshi javob!
qo'shib qo'ydi muallif nikk wong, manba
Siz kunni @nikkwong rahmat qildim: D
qo'shib qo'ydi muallif Ruskin, manba
Agar sizda turli xil uzunlikdagi chiziqlarga ega bo'lsangiz, unda siz yoki a) CSS-ni qo'l bilan har bir tomoshabin bilan to'ldirishingiz va ularni taxminan uzunligiga + fudge'ye almashtirishingiz kerak ... yoki b) uzunligini olish uchun JS dan foydalaning, maskani jonlantirish ...;)
qo'shib qo'ydi muallif Ruskin, manba

I think you should just be able to add stroke-dasharray to your animation and lower the dash array in your css. An updated version of your codepen; http://codepen.io/harvey89/pen/NpaWBE

stroke-dashoffset: 1000;
stroke-dasharray: 10;

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 10;
  }
}

Ehtimol, kerakli effektni olish uchun raqamlar bilan o'ynashingiz kerak

0
qo'shib qo'ydi
Muammo shundaki, yo'l "rivojlangan" emas. Bu nuqta chiziqni jonlantirmoqda.
qo'shib qo'ydi muallif CaraMar, manba
Siz shunday bir narsani nazarda tutasizmi: codepen.io/harvey89/pen/NpaWBE .path {stroke -dasharray: 10; zarba o'lchami: 1000; animatsiya: 5s linear oldingi chiziqlar; } @keyframes dash {to {stroke-dashoffset: 0; zarba: 0; }}
qo'shib qo'ydi muallif Harvey89, manba

I think you should just be able to add stroke-dasharray to your animation and lower the dash array in your css. An updated version of your codepen; http://codepen.io/harvey89/pen/NpaWBE

stroke-dashoffset: 1000;
stroke-dasharray: 10;

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 10;
  }
}

Ehtimol, kerakli effektni olish uchun raqamlar bilan o'ynashingiz kerak

0
qo'shib qo'ydi
Muammo shundaki, yo'l "rivojlangan" emas. Bu nuqta chiziqni jonlantirmoqda.
qo'shib qo'ydi muallif CaraMar, manba
Siz shunday bir narsani nazarda tutasizmi: codepen.io/harvey89/pen/NpaWBE .path {stroke -dasharray: 10; zarba o'lchami: 1000; animatsiya: 5s linear oldingi chiziqlar; } @keyframes dash {to {stroke-dashoffset: 0; zarba: 0; }}
qo'shib qo'ydi muallif Harvey89, manba