Animasi stroke-dashoffset SVG dimulai (lagi) saat diklik

Saya membuat animasi svg-stroke sederhana menggunakan css dan jquery. Animasi dimulai saat diklik. Namun saya tidak dapat menemukan cara untuk memulainya lagi pada klik kedua (atau klik ketiga, dll). Menurut saya solusinya cukup sederhana tetapi tetap tidak ada yang berhasil (mis. .addClass). Begini cara kerjanya:
1. Goresan terlihat
2. Pengguna mengklik gambar
3. Animasi guratan dimulai
4. Ketika selesai: guratan tetap terlihat
5. Pengguna mengklik lagi
6. Animasi guratan dimulai lagi....

Ini adalah kode saya saat ini:

jQuery(document).ready(function () {

    $("#form").click(function () {

        var path1 = document.querySelector('#umriss');
        var length = path1.getTotalLength();
        
        $(path1).css("stroke-dasharray", length);
      
    
    });

});
body {
    width: 100%;
    font-size: 20px;
    background-color: #eee;
}

.wrapper {

    margin: 0 auto;
    text-align: center;
    max-width: 700px;
}

.bild{
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}

svg{
    position: absolute;
    height: 100%;
    width: 100%;
    left:0;
    top:0;
    
}

#umriss {
    stroke-dashoffset: 2600;
    animation: ani1 4s linear forwards;
}


@keyframes ani1 {
    to {
        stroke-dashoffset: 0;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Stroke</title>

</head>

<body>

    <div class="wrapper">
        <div class="bild">
            <svg id="form" x="0px" y="0px" width="812.959px" height="581.971px" viewBox="0 0 812.959 581.971" enable-background="new 0 0 812.959 581.971" xml:space="preserve">
                <path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454	       C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
	c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
	c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
	c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>

        </div>
    </div>
</body>

</html>


svg animation html jquery css
person jessy20    schedule 05.10.2018    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Saya menggunakan JQuery hanya untuk memulai animasi. Segala sesuatu yang lain dilakukan dengan CSS. Saya telah menambahkan kotak centang di HTML Anda yang mengontrol animasi. Kotak centang terlihat tetapi Anda dapat menyembunyikannya (visibilitas: tersembunyi atau tampilan: tidak ada). Saya harap inilah yang ingin Anda capai.

$(label).click(function(){
    $(this).addClass("test");
});
body {
  width: 100%;
  font-size: 20px;
  background-color: #eee;
}

.wrapper {
  margin: 0 auto;
  text-align: center;
  max-width: 700px;
}

.bild {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
}

#umriss {
  stroke-dasharray: 2333.43;
  stroke-dashoffset: 2333.43;
} 
.test #umriss {  
  animation: ani1 4s linear forwards;}


[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
}

[type="checkbox"]:checked + label #umriss {
  animation: ani2 4s linear forwards;
}


@keyframes ani1 {
  from {
    stroke-dashoffset: 2333.43;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ani2 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 2333.43;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="wrapper">
        <div class="bild">
        <input type="checkbox" id="anim"/>
        <label for="anim" id="label">
            <svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
                <path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454	       C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
	c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
	c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
	c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
          </label>
        </div>
</div>

MEMPERBARUI

Di CSS saya menggunakan pemilih :checked untuk memulai satu animasi atau lainnya.

Animasi tanpa menggunakan kotak centang:

Dalam hal ini saya menggunakan event click untuk menambahkan kelas .test ke bild, dan saya menggunakan event animationend untuk menghapus kelas .test. Saya harap ini membantu.

bild.addEventListener("click",()=>{
  bild.classList.add("test")
})


//umriss.addEventListener("webkitAnimationEnd",..... );
umriss.addEventListener("animationend",()=>{
  console.log("end")
  bild.classList.remove("test");
} );
body {
  width: 100%;
  font-size: 20px;
  background-color: #eee;
}

.wrapper {
  margin: 0 auto;
  text-align: center;
  max-width: 700px;
}

.bild {
  width: 100%;
  height: 0;
  padding-top: 100%;
  position: relative;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
}

#umriss {
  stroke-dasharray: 2333.43;
  stroke-dashoffset: 0;
} 
.test #umriss {  
  animation: ani1 4s linear forwards;
}

@keyframes ani1 {
  from {
    stroke-dashoffset: 2333.43;
  }
  to {
    stroke-dashoffset: 0;
  }
}
 <div class="wrapper">
        <div id="bild">
            <svg id="form" x="0px" y="0px" width="200" viewBox="0 0 812.959 581.971">
                <path id="umriss" fill="#3CC243" stroke="#141412" stroke-width="10" stroke-miterlimit="10" d="M137.521,128.454	       C139.812,9.278,220.056,16.972,313.194,20.365c136.466,4.97,179.837,72.616,205.304,200.859
	c21.428,107.905,195.473,45.773,260.65,56.229c39.317,6.308-28.293,212.529-53.685,245.178
	c-61.222,78.716-262.76,32.434-351.007,35.777c-102.917,3.899-125.172-88.539-81.979-175.921
	c71.457-144.56-162.979-48.431-225.951-44.29C-22.9,344.077,25.05,112.387,137.521,128.454z"/>
</svg>
        </div>
</div>

person enxaneta    schedule 05.10.2018
comment
Pertama: Terima kasih atas jawaban cepat Anda! Bisakah Anda menjelaskan kepada saya mengapa kotak centang diperlukan? Saya mencoba menambahkan kelas ke jalur tetapi animasi tidak dapat dimulai. Dalam contoh Anda, ini berfungsi dengan baik dengan kotak centang tetapi saya ingin menghindari ini jika memungkinkan. Juga: mungkinkah guratan sudah terlihat di awal sehingga setiap klik memulai animasi yang sama (dalam contoh Anda guratan mengubah arah dengan setiap klik (pertama: berlawanan arah jarum jam, lalu: searah jarum jam)) - person jessy20; 05.10.2018
comment
@ jessy20 : Saya telah memperbarui jawaban saya. Silakan lihat - person enxaneta; 05.10.2018
comment
Terima kasih banyak enxaneta! Inilah tepatnya yang saya cari :D - person jessy20; 05.10.2018