SVG.js -如何移动和旋转元素以遵循路径，使元素始终保持标题

Question

我正在使用SVG.js和jquery开发一个简单的游艇竞赛SVG动画来模拟游艇竞赛。我可以很容易地动画图像游艇图标沿着这条路。但我也希望游艇旋转或改变游艇的航向，因为游艇沿着路径/路线行驶。我试过一种看法，但无法使它发挥作用。请帮帮忙！

我在用这个代码..。

function move_yacht_new(route,yacht,score){
        var route1 = draw.path('M 535.07931,510.0164 C 594.9314,509.34072 667.14382,469.54596 691.80372,382.84271');
        route1.fill('none');
        var length = route1.length();
        var y_pos = score;
        var sailAngle = 90;
        var currentRotation;
        route1.hide();

        var text = draw.text(function(add) {
          add.tspan('We go ')
          add.tspan('up').fill('#f09').dy(-40)
          add.tspan(', then we go down, then up again').dy(40)
        })

        var image = draw.image('../globals/game/images/' + yacht + '-yacht.png',20, 20).id('yacht_' + yacht);       


        var scorePerc = (length/100) * (score);
         //vdiscountPerc = calcPerc.toFixed();

        var text = draw.text(yacht + ' (' + Math.round(score) + ')');


        image.animate(5000, '<>').during(function(pos, morph, eased){
            var p = route1.pointAt(eased * scorePerc);
            image.move(p.x, p.y);

            text.move(p.x, p.y).font({ fill: '#fff',  size: 5, family: 'Helvetica', leading:  '1.5em'  });
            var coord = image.bbox();
            var center = coord.x + (coord.width/2) + ' '+ coord.y + (coord.height/2);
            console.log('center ' + center);

            var x_coord = image.attr('x');
            var y_coord = image.attr('y');
            //console.log(x_coord + ',' + y_coord);
            image.rotate(-45, coord.x + (coord.width/2), coord.y + (coord.height/2));

            var angle = Math.atan2(p.y, p.x) * 180 / Math.PI;//angle for tangent

            //Shifting center to center of rocket
            var centerX = p.x - 24,
            centerY = p.y - 12;
            console.log('angle > ' + angle);


        //}).loop(true, true)
        })


    }

区块报价

但这会使图标偏离路径的错误方向。

Answer 1

我设法使用animation.js脚本解决了这个问题。

Answer 2

将游艇图标添加到一个组中，沿着路径翻译该组，并围绕组原点旋转该组中的游艇图标：

var g = draw.group()
var yacht = g.image(yachtUrl, width, height).center(0,0)

// in animate function:
g.transform(x: x, y: y)
yacht.transform(rotation: degrees, cx: 0, cy: 0)