1

我是新手，所以我想知道是否有人可以指出我正确的方向。我需要绘制 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>
4

1 回答 1

1

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

   setTimeout(function() {
        circle2.show();
        fadeIn(circle2).delay(3000*3);
    }, 5600);
于 2013-01-14T12:10:07.677 回答