Question

我是新手，所以，我想知道是否有人可以指出我正确的方向。我需要绘制3个不透明度的同心圆，它们需要一个接一个地出现在屏幕上。目前，虽然非常微弱，但我可以看到它们。如何让它们一个接一个出现？这是我目前的代码：

<!DOCTYPE HTML>
<html>
<head>
<style>
  body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
  }
</style>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
 <body>
<div id="container"></div>
<script src="kinetic-v4.3.0-beta2.js"></script>
<script>
var fadeIn = function(shape) {
var o = shape.getOpacity();
o = o + 0.05 >=0.5 ? 0.5 : o + 0.05;
shape.setOpacity(o);
shape.getLayer().draw();
if(o !== 0.4) {
    setTimeout(function() {
            fadeIn(shape).delay(3000*3);
        }, 720);
 }
};
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();


  var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: '#CCCCCC',
    stroke: 'yellow',
    strokeWidth: 8,
    opacity: 0.1

  });
   setTimeout(function() {
        fadeIn(circle).delay(3000*3);
    }, 1720);

    layer.add(circle);


    var circle2 = new Kinetic.Circle({
    x: stage.getWidth() / 2.1,
    y: stage.getHeight() / 2.1,
    radius: 70,
    fill: '#CCCCCC',
    stroke: 'yellow',
    strokeWidth: 8,
    opacity: 0.1


  });
   setTimeout(function() {
        fadeIn(circle2).delay(3000*3);
    }, 5600);

  // add the shape to the layer
  layer.add(circle2);

  var circle3 = new Kinetic.Circle({
    x: stage.getWidth() / 2.2,
    y: stage.getHeight() / 2.2,
    radius: 70,
    fill: '#CCCCCC',
    stroke: 'yellow',
    strokeWidth: 8,
    opacity: 0.1

  });
   setTimeout(function() {
        fadeIn(circle3).delay(3000*3);
    }, 12000);

  // add the shape to the layer
  layer.add(circle3);

  // add the layer to the stage
  stage.add(layer);


   </script>
  </body>
</html>

Answer 1

您可以在初始化它们时隐藏圆圈，即circle.hide()，然后再将它们添加到图层，然后在调用超时回调时显示它们，例如对于circle2，请像这样使用它。

   setTimeout(function() {
        circle2.show();
        fadeIn(circle2).delay(3000*3);
    }, 5600);

用Kinetic设置同心圆褪色的延迟

1 个答案: