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="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-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: 800,
    height: 700

    //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

   });
  circle.hide();
   setTimeout(function() {
        circle.show();
        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
  });
  circle2.hide();
   setTimeout(function() {
        circle2.show();
        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

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

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

   // var boxGroup = new Kinetic.Group({
    //x: 10,
    //y: 10,
    //draggable: true
  //});
  var boxGroup = new Kinetic.Group({
    x: -250,
    y: -250,
    draggable: true
  });

    var box = new Kinetic.Rect({
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: '#CCCCCC',
    stroke: 'black'
  });

  boxGroup.add(box);
  layer.add(box);
  layer.add(boxGroup);

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

  setTimeout(function() {
   circle.moveTo(boxGroup).delay(5000*3);
   circle2.moveTo(boxGroup).delay(5000*3);
   circle3.moveTo(boxGroup).delay(5000*3);
    }, 24000);

  </script>
 </body>

4

1 に答える 1

0

http://jsfiddle.net/SANFM/9/

KineticJS には、呼び出すことができる優れた transitionTo() 関数があります。位置や不透明度など、任意の数値プロパティをアニメーション化できます。これを示すフィドルを作成しました。setTimeout は、RequestAnimationFrame を使用して現在ブラウザーに組み込まれているものと比較して少し古い関数であるためです (現在、主要なブラウザーはすべてこれを実装しており、KineticJS には他のほとんどのライブラリと同様にフォールバックが組み込まれています)。

楽しみのために、コメントを削除し、余分な円を追加して、コードを少し整理しました。

しかし、本当に必要なのは次のとおりです。

myShape.transitionTo({shape configuration, duration});

例えば：

circle.transitionTo({
    x: box.getX(),  //coordinates to transition to
    y: box.getY(),
    opacity: 1,  
    duration: 1  // length of time for this animation in seconds, REQUIRED for animation to work
});
于 2013-01-15T15:37:02.557 に答える