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

【问题标题】：How to increase and decrease opacity after few seconds using javascript?几秒钟后如何使用javascript增加和减少不透明度？
【发布时间】：2018-09-09 13:44:32
【问题描述】：

我在 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);

【问题讨论】：

setTimeout 只会触发该函数一次。如果你想每秒重复一个动作，你应该使用setInterval。有了一些全局状态，你应该能够做你想做的事
@Axnyff 我应该在函数中使用这个 setTimeout 吗？
看看stackoverflow.com/questions/22154129/… 。在稍微不同的背景下，这与您的问题几乎相同。
@TomášPospíšek 我明白了。

标签： javascript jquery

【解决方案1】：

在sn-p下面结帐：

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

【讨论】：

几乎正是我想要的
如果它解决了您的问题，请接受它，我很高兴它有帮助。 :)

【解决方案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>

【讨论】：

哇，太棒了，但它可以更流畅吗？
@creativeartbd 向value 数组添加更多中间步骤将使动画更流畅，但您必须调整间隔以保持动画相同的长度/速度。

【解决方案3】：

您也可以在没有 JS 的情况下使用CSS animations 实现脉冲。使用 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>

如果您想要更流畅的动画（正如您在 cmets 中的另一个答案中所指出的那样），您只需更改 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>

【讨论】：

这是我问题的好答案：_