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

【问题标题】：Moving three circles to another position slowing down movement (KineticJS)将三个圆圈移动到另一个位置减慢运动（KineticJS）
【发布时间】：2015-03-22 12:21:30
【问题描述】：

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

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

【问题讨论】：

标签： geometry kineticjs move

【解决方案1】：

http://jsfiddle.net/SAnFM/9/

KineticJS 有一个很棒的 transitionTo() 函数，你可以调用它。它可以为任何数值属性设置动画，例如位置或不透明度。我创建了一个小提琴来展示这一点，因为 setTimeout 与现在使用 RequestAnimationFrame 内置在浏览器中的功能相比有点古老（现在所有主要浏览器都实现了这一点，并且 KineticJS 像大多数其他库一样内置了回退）

为了好玩，我稍微清理了你的代码，删除了 cmets 并添加了一个额外的圆圈。

但你真正需要的是：

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

【讨论】：

我无法强调我认为 setTimeout 有多么痛苦，但它确实可以在许多情况下完成简单任务的工作。除了尝试自己进行转换之外，您使用 setTimeout 是否还有其他原因？
您好，非常感谢您的大力帮助。我是新手，所以我没有使用 setTimeout 的具体原因。我才刚刚开始，所以我不知道 transitionTo 函数。非常感谢您的帮助；）
如果这个答案解决了你的问题，你能把它标记为正确吗？
另外，如果你想做动画，你可以阅读 Kinetic.Animation 教程html5canvastutorials.com/kineticjs/…
还有一个问题。如何让 4 个圆圈一一淡入，然后才让它们过渡到盒子？