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)

SVG.js - 如何移动和旋转元素以跟随路径，以便元素始终保持标题

2 个答案: