Html 设置同心圆内衰减的延迟，并使用动能_Html_Geometry_Delay_Kineticjs_Fadein

Html 设置同心圆内衰减的延迟，并使用动能

html geometry

Html 设置同心圆内衰减的延迟，并使用动能,html,geometry,delay,kineticjs,fadein,Html,Geometry,Delay,Kineticjs,Fadein,我是个新手，所以我想知道是否有人能给我指出正确的方向。我需要画3个不透明度的同心圆，需要一个接一个地出现在屏幕上。目前，虽然很模糊，但我可以看到他们所有人。我怎样才能让它们一个接一个地出现？这是我当前的代码： <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; background-color: #CCCCCC; } </style>

我是个新手，所以我想知道是否有人能给我指出正确的方向。我需要画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>


身体{
边际：0px；
填充：0px；
背景色：#中交；
}
var fadeIn=函数（形状）{
var o=shape.getOpacity（）；
o=o+0.05>=0.5？0.5:o+0.05；
不透明度（o）；
shape.getLayer（）.draw（）；
如果（o！==0.4）{
setTimeout（函数（）{
fadeIn（形状）。延迟（3000*3）；
}, 720);
}
};
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：200
});
var layer=新的动能层（）；
var循环=新的动力学循环({
x:stage.getWidth（）/2，
y:stage.getHeight（）/2，
半径：70，
填写：“#中交”，
笔画：“黄色”，
冲程宽度：8，
不透明度：0.1
});
setTimeout（函数（）{
fadeIn（圆）。延迟（3000*3）；
}, 1720);
图层。添加（圆圈）；
var circle2=新的动力学圆({
x:stage.getWidth（）/2.1，
y:stage.getHeight（）/2.1，
半径：70，
填写：“#中交”，
笔画：“黄色”，
冲程宽度：8，
不透明度：0.1
});
setTimeout（函数（）{
fadeIn（圆圈2）。延迟（3000*3）；
}, 5600);
//将形状添加到层中
图层。添加（圆圈2）；
var circle3=新的动力学圆({
x:stage.getWidth（）/2.2，
y:stage.getHeight（）/2.2，
半径：70，
填写：“#中交”，
笔画：“黄色”，
冲程宽度：8，
不透明度：0.1
});
setTimeout（函数（）{
fadeIn（圆圈3）。延迟（3000*3）；
}, 12000);
//将形状添加到层中
图层。添加（圆圈3）；
//将层添加到舞台
阶段。添加（层）；

您可以在初始化圆时隐藏圆，即在将圆添加到图层之前隐藏圆（），然后在调用超时回调时显示圆，例如，对于circle2，如下所示

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

您可以在初始化圆时将其隐藏，即在将圆添加到图层之前将其隐藏（），然后在调用超时回调时显示它们，例如，对于circle2，如下所示

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

NP您可以随时接受并更新有用的答案，以在社区中予以认可：）np！您可以随时接受并投票选出有用的答案，以在社区中予以认可：）