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 に答える