开始/停止SVG动画

时间：2019-01-20 15:50:22

标签： html css animation svg

我想使用CodePen上发布的这个漂亮的SVG动画，但是我不知道如何启动或重新启动动画：

https://codepen.io/elevaunt/pen/JYRBzJ

HTML 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<p class="success">Oh Yeah!</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg>
<p class="error">Bummer!</p>

CSS 

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  &.circle {
    -webkit-animation: dash .9s ease-in-out;
    animation: dash .9s ease-in-out;
  }
  &.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash .9s .35s ease-in-out forwards;
    animation: dash .9s .35s ease-in-out forwards;
  }
  &.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check .9s .35s ease-in-out forwards;
    animation: dash-check .9s .35s ease-in-out forwards;
  }
}

p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
  &.success {
    color: #73AF55;
  }
  &.error {
    color: #D06079;
  }
}


@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

问： 也许有人知道我如何隐藏动画，然后单击按钮即可显示并激活动画？

非常感谢您的帮助。 TIA！

2 个答案:

答案 0 :(得分：3)

这是我的答案。 Codepen中的示例使用stroke-dasharray:1000。这会给您带来问题。 stroke-dasharray的值必须等于路径的长度。我已经重新计算了路径的长度，但是我保持了相同的时间。您可能需要将计时更改为其他时间。

也：复选框是可见的，但实际上您可以隐藏这些复选框。

我在svg元素上添加了一个边框，以明确您必须单击的位置。在实践中，我会在动画路径下方使用另一条路径，也许是浅灰色。

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}


.path.circle {
  stroke-dasharray: 390.2px;
  stroke-dashoffset: 390.2px;
  transition: stroke-dashoffset .9s ease-in-out;
  
}
.path.line {
  stroke-dasharray: 82.033px;
  stroke-dashoffset: 82.033px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
.path.check {
  stroke-dasharray: 99.21px;
  stroke-dashoffset: 99.21px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
}
p.success {
  color: #73af55;
}
p.error {
  color: #d06079;
}


svg{border:1px solid}

#a:checked + svg  .path.circle{stroke-dashoffset: 0;}
#a:checked + svg  .path.check{stroke-dashoffset: 0;}


#b:checked + svg  .path.circle{stroke-dashoffset: 0;}
#b:checked + svg  .path.line{stroke-dashoffset: 0;}
<label>
  <input id="a" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <polyline  class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
  </svg></label>

<p class="success">Oh Yeah!</p>



<label><input id="b" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
  <line class="path line" id="kk" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
</svg></label>

正如我之前在实践中评论过的那样，我会在动画路径下方使用另一条路径，也许是浅灰色。为此，我将路径保存在<defs>元素中，并将这些元素与<use>

一起使用 

svg {
  width: 100px;
  display: block;
  margin: 40px auto 0;
}


.path.circle {
  stroke-dasharray: 390.2px;
  stroke-dashoffset: 390.2px;
  transition: stroke-dashoffset .9s ease-in-out;
  
}
.path.line {
  stroke-dasharray: 82.033px;
  stroke-dashoffset: 82.033px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
.path.check {
  stroke-dasharray: 99.21px;
  stroke-dashoffset: 99.21px;
  transition: stroke-dashoffset .35s ease-in-out;
  transition-delay: .9s;
  
}
p {
  text-align: center;
  margin: 20px 0 60px;
  font-size: 1.25em;
}
p.success {
  color: #73af55;
}
p.error {
  color: #d06079;
}

.base{fill:none;stroke:#d9d9d9;stroke-width:6;stroke-miterlimit:10;stroke-linecap:round;}


#a:checked + svg  .path.circle{stroke-dashoffset: 0;}
#a:checked + svg  .path.check{stroke-dashoffset: 0;}


#b:checked + svg  .path.circle{stroke-dashoffset: 0;}
#b:checked + svg  .path.line{stroke-dashoffset: 0;}
<label>
  <input id="a" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <defs>
   <circle id="c"  cx="65.1" cy="65.1" r="62.1"/>
   <polyline id="py" fill="none" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>    
  </defs>
  <g  class="base">
  <use xlink:href="#c"/>
  <use xlink:href="#py"/>
  </g>
  <g fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10">
  <use class="path circle" xlink:href="#c"/>
  <use class="path check" xlink:href="#py"/>
  </g>
  </svg></label>

<p class="success">Oh Yeah!</p>



<label><input id="b" type="checkbox" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <defs>
  <line id="l1" x1="34.4" y1="37.9" x2="95.8" y2="92.3"/>
  <line id="l2" x1="95.8" y1="38" x2="34.4" y2="92.2"/>
  </defs>
  
  <g class="base">
  <use xlink:href="#c"/>
  <use xlink:href="#l1"/>
  <use xlink:href="#l2"/>
  </g>
  
  
  <g fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" stroke-linecap="round">
  <use class="path circle" xlink:href="#c"/>
  <use class="path line" xlink:href="#l1"/>
  <use class="path line" xlink:href="#l2"/>
  </g>
</svg></label>
  

<p class="error">Bummer!</p>

答案 1 :(得分：0)

您需要使用JavaScript来显示和隐藏动画，只需添加或删除保存动画的类即可。

如何在JS中执行此操作：  1.定义全局变量（单击事件的按钮，要设置动画的元素）。  2.将事件侦听器添加到Button和回调函数中，以添加或删除CSS类。  3.切换CSS类

这是W3SChoos中的一个简单示例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is a DIV element.
</div>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("mystyle");
}
</script>

</body>
</html>

相关问题
最新问题