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

如果我取消评论 - ＆gt; nP.rotate（normal.angle）; nP是否与线法线点一起旋转？

Answer 1

问题是在paper.js中旋转项目并移动它时，新旋转被接受为0度。所以我在onFrame事件之外保留一个oldAngle变量。比在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;

}

Answer 2

请阅读邮件列表中解释此行为的以下帖子，并提供将paper.js切换为简化此方案的模式的选项：

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

Paper.js动画：根据路径正常运动

2 个答案: