Question

我试图将三个圆圈逐渐淡入后移动到页面的左上角，以便它们在一个方框上重叠。目前，我设置了一个超时，但它只适用于第一个圆圈，并且运动非常快。如何将它们作为一个整体移动并减慢运动？

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

Answer 1

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
});

将三个圆圈移动到另一个位置减慢运动（KineticJS）

1 个答案: