Paper.js animating : 경로 법선에 따른 이동

Question

선 및 그 일반 (다른 선)에 애니메이션을 적용하려고합니다. 하지만 정상적인 이상한 애니메이션의 회전을 설정하기 전후에 위치를 바꿀 때 발생합니다.

거기에 아이디어가있는 사람이 있습니까?

나는 스케치에서이 코드를 가지고 :

http://sketch.paperjs.org/#S/jVJLb5tAEP4rKy7BqgvUbS+OcogstT2klaUeeohzIDA2q+AZtAyOI8v/vbM7mFDLUcqJne8xz0OE+RaiefT7CbioomlUUOnfu9wZ6hjcD3NjZll2vcIh9EdCn4fQxlHXSATh2Xz3//GkR9rGIvTIMucqPuzn2dS8zLOjp6x4xYGS5GU5YJo0/XKZ8lELeCWe0Vp29AQLqslJ4isH5VWPa0m4HNcTtIjLc9lj3YHXCeLzBj5Z5FgqzCaTC8BXRYJfmgrc2B2xz7VMHqnDsk2YmjtYc6BoQWFy3mhR2bp0gPF96GIqqgfvpYSGWsuWUNxkArIL373M/6hWqJ3VVAhBp7ABvqMi96Jbjj/NstNGkNw2r8e8XyHyyuoHMsopxvKUJnUgjjhniNUpyXFTg+p2Fp4Twm9ODkpk6w4L7xDDDpAn5rBCM/r6GXC4E4tdK5KfspNEHipJ2IrRab3KLOgfrjwvc9PULCqpDQxXYPZmaIfWIdLCZisyc+pLVf0JKdbezx607+TFfLgZUr/L3nv2GXfcw7uLGo/pP5c2JDnp3l7h2D1c6lsLFcdjdPwL

var outerH = 200; 
var outerW = 300; 
var group = new Group(); 
var spine = new Path({x:0, y:0}); 
     spine.add({x:0, y:outerH/4}); 
     spine.add({x:-outerW, y:outerH}); 
     spine.strokeColor = 'red'; 

var nP = new Path(); 

nP.strokeColor = 'blue'; 
nP.add(new Point(0, 0)) 
nP.add(new Point(50, 0)); 

//nP.pivot = nP.bounds.topLeft; 


group.addChildren([spine, nP]); 
group.position = {x:200, y:300}; 



var loc = spine.getLocationAt(120); 
var normal = spine.getNormalAt(120); 


nP.position = loc.point; 
nP.rotate(normal.angle); 

view.onFrame = function(event) { 

      var sinus = Math.sin(event.time); 
      var cosinus = Math.cos(event.time); 
      // Change the x position of the segment point; 
      spine.segments[2].point.y += cosinus ; 
      spine.segments[2].point.x += sinus ; 

      var loc = spine.getLocationAt(120); 
      var normal = spine.getNormalAt(120); 

      nP.position = loc.point; 
      //nP.rotate(normal.angle); 
     } 

내가 주석을 해제하는 경우 -> nP.rotate (normal.angle를); nP가 선 정상 점과 함께 회전하지 않습니까?

Answer 1

이 동작을 설명과 종이를 전환 할 수있는 옵션을 제공 할 메일 링리스트에서 다음 게시물을 읽어 보시기 바랍니다 이 시나리오를 단순화하는 모드로 된 .js :

https://groups.google.com/forum/#!searchin/paperjs/applymatrix/paperjs/4EIRSGzcaUI/seKoNT-PSpwJ

Answer 2

문제는 paper.js에서 항목을 회전하여 이동할 때 새로운 회전이 0도로 허용된다는 것입니다. 따라서 oldAngle 변수를 onFrame 이벤트 외부에 유지합니다. ... 올바른 회전을 계산하는 onFrame에서 필요한 수학을보다

오른쪽 코드 :

var group = new Group(); 
var spine = new Path({x:0, y:0}); 
     spine.add({x:0, y:50}); 
     spine.add({x:-300, y:200}); 
     spine.strokeColor = 'red'; 

var nP = new Path(); 

nP.strokeColor = 'blue'; 
nP.add(new Point(0, 0)) 
nP.add(new Point(50, 0)); 


group.addChildren([spine, nP]); 
group.position = {x:200, y:300}; 

var loc = spine.getLocationAt(120); 
var normal = spine.getNormalAt(120); 

nP.position = loc.point; 
nP.rotation = normal.angle; 

var oldAngle = normal.angle; // keep the old rotation angle in this variable 

view.onFrame = function(event) { 

    var sinus = Math.sin(event.time); 
    spine.segments[2].point.y += sinus ; 
    spine.segments[2].point.x += sinus ; 

    var loc = spine.getLocationAt(120); 
    var normal = spine.getNormalAt(120); 

    nP.position = loc.point; 

    nP.rotation += normal.angle - oldAngle; // here we do the necessary math 

    oldAngle = normal.angle; 

}