kineticjs ::從X到Y的距離繼續動畫形狀

Question

我想要動畫形狀繼續從X到Y距離，再次使用動力學js動畫函數從Y到X返回形狀。例如。將形狀從0px移動到200px，並再次將形狀200px返回到0px。

謝謝。

Answer 1

您可能正在尋找一個補間，而不是一個動畫。退房的動能文檔上吐溫更多的信息，但是你在找什麼做的可能會是這個樣子：

var tween = new Kinetic.Tween({ 
    node: myShape, 
    x: moveToX, 
    y: moveToY, 
    duration: 1 
}); 

現在，你有一個補間，你可以玩，倒帶，暫停，將其反轉（再次查看文檔以獲取有關Tween的所有最新信息）。

所以，你現在可以做的：

tween.play() 

或

tween.reverse() 

來完成你在找什麼。

參考：http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-and-resume-transitions-with-kineticjs/

更新（按照下面的評論）：如果你想有一個循環的影響，在X方向，Y方向，或兩者兼而有之。你可以這樣做：

var yPos = myShape.getAttr('y'), 
    xPos = myShape.getAttr('x'), 
    maxX = 1000, 
    maxY = 1000, 
    yIncreasing = true, 
    xIncreasing = true; //lets assume myShape resides somewhere below the max 

var anim = new Kinetic.Animation(function(frame) { 
    /* move the shape back and fourth in a y direction */ 
    if (yPos < maxY && yIncreasing) { 
     hexagon.setY(yPos++); 
    } else { 
     if (yPos < 1) { 
      yIncreasing = true; 
      hexagon.setY(yPos++); 
     } else { 
      hexagon.setY(yPos--); 
      yIncreasing = false; 
     } 
    } 

    /* move the shape back and fourth in a x direction */ 
    if (xPos < maxX && xIncreasing) { 
     hexagon.setX(xPos++); 
    } else { 
     if (xPos < 1) { 
      xIncreasing = true; 
      hexagon.setX(xPos++); 
     } else { 
      hexagon.setX(xPos--); 
      xIncreasing = false; 
     } 
    } 
}, layer); 

注意：我還沒有運行此代碼，它應該工作。使用兩者都會導致形狀沿對角線移動，但希望此snipplet能夠爲您的問題提供解決方案。