kineticjs :: 계속 애니메이션 모양을 X에서 Y까지 거리

Question

모양을 움직이기 위해 X에서 Y까지 거리를 계속하려고합니다. 다시 kinetic js 애니메이션 기능을 사용하여 Y에서 X까지 모양을 반환합니다. 예. 도형을 0px에서 200px로 이동하고 다시 200px에서 0px로 되돌립니다.

감사합니다.

Answer 1

아마도 애니메이션 대신 여기 Tween을 찾고있을 것입니다. , 트윈에 대한 자세한 내용은 운동 문서를 확인하지만 당신은 아마 같은 것을 볼 것이다 어떻게 무엇을 찾고 :

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

이제 트윈을 가지고, 당신이 그것을 재생할 수 있습니다, 그것은, 그것을 일시 정지, 되감기, Tweens에 대한 최신 정보는 설명서를 참조하십시오.

그래서 당신은 지금 할 수있는 :

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

참고 :이 코드를 실행하지 않았 으면 작동합니다. 두 가지 모두를 사용하면 모양이 대각선으로 이동하지만,이 스 니펫에는 문제에 대한 해결책이 표시되기를 바랍니다.