SVG-анимация запуска штрих-дашоффита (снова) при клике - PullRequest
Новая
       10

SVG-анимация запуска штрих-дашоффита (снова) при клике

0 голосов
/ 05 октября 2018

Я сделал простую svg-stroke-анимацию, используя css и jquery.Анимация начинается при нажатии.Но я не могу найти способ запустить его снова, нажав второй (или третий и т. Д.).Я думаю, что решение довольно простое, но все еще ничего не работает (например, .addClass).Вот как это должно работать:1. Инсульт виден2. Пользователь нажимает на изображение3. Запускается анимация инсульта4. Когда сделано: удар остается видимым5. Пользователь снова нажимает6. Анимация удара начинается снова ....

Это мой текущий код: 

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>

1 Ответ

0 голосов
/ 05 октября 2018

Я использую JQuery только для запуска анимации.Все остальное сделано с помощью CSS.Я добавил флажок в ваш HTML, который контролирует анимацию.Флажок виден, но вы можете скрыть его (видимость: скрытая или отображать: нет).Я надеюсь, что это то, чего вы хотите достичь.

$(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>

ОБНОВЛЕНИЕ

В CSS я использовал селектор :checked для запуска той или иной анимации.

Анимация без использования флажка:

В этом случае я использую событие click, чтобы добавить класс .test для сборки, и использую событие animationend, чтобы удалить .testучебный класс.Надеюсь, это поможет. 

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>
...