Question

我在HTML中有这个SVG元素：

<g id="Group-8" transform="translate(108.800000, 0.293172)" fill="#FF056A" opacity="0.1">

在这里您可以看到一个名为opacity的属性，其值为0.1

现在我想将其值增加到0.3、0.6、0.9，然后再次增加到0.6、0.3、0.1。它应该一直这样做。

我已经使用了Javascript setTimeout方法，但是不知道如何使它做我想做的事情：（

setTimeout(function() {
    $("#Group-8-Copy-2").attr('opacity', '0.3');
}, 1000);

Answer 1

在代码段下方签出：

$( document ).ready(function() {
    setInterval(function(){
      
      opacity = $('#tilak').css("opacity");
      opacity = Number(opacity) + 0.3;
      if (opacity > 1) {
        opacity = 0;
      }
      $('#tilak').css("opacity", opacity);
      console.log(opacity);
    }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="tilak" style="opacity: 0">
kdjkd
</body>

Answer 2

你在这里

var value = [0.1, 0.3, 0.6, 0.9];
var add = true;
var i = 0;

setInterval(function() {
  $("#Group-8-Copy-2").attr('opacity', [value[i]]);
  
  i = add ? i + 1 : i -1;
  add = i == value.length -1 ? false : (i == 0 ? true : add );
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group-8-Copy-2" fill="#FF056A" opacity="0.1">
    <circle cx="10" cy="10" r="5" />
  </g>
</svg>

Answer 3

您也可以使用CSS animations在不使用JS的情况下实现脉动。使用CSS动画通常比使用JS动画具有优势，您可以通过更改animation-duration并调整其他内容来更精确地调整事物的时间，而不用调整计时器的超时时间，等等。之所以表现更好，是因为浏览器可以完成所有工作，而不是由浏览器解释您的代码并与DOM交互以使其正常工作。

.stepped-pulse {
  animation-duration: 4s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: steps(4, end);
}

@keyframes stepped-pulse {
  0% {
    opacity: .01;
  }
  100% {
    opacity: .09;
  }
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group-8-Copy-2" class="stepped-pulse" fill="#FF056A">
    <circle cx="10" cy="10" r="5" />
  </g>
</svg>

如果您想要更平滑的动画（就像您在另一个答案的注释中所示），则可以更改animation-timing-function（在这种情况下，我将其删除，并且默认为ease ）：

.pulse {
  animation-duration: 4s;
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes pulse {
  0% {
    opacity: .01;
  }
  
  100% {
    opacity: .09;
  }
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group-8-Copy-2" class="pulse" fill="#FF056A">
    <circle cx="10" cy="10" r="5" />
  </g>
</svg>

几秒钟后如何使用JavaScript增加和减少不透明度？

3 个答案: