Versuchen, Flugzeug auf SVG-Pfad zu animieren

Question

Ich fange an, SVG zu lernen, und ich stieß auf einen Codepen, den ich ändern wollte - es hatte ursprünglich ein Dreieck, das entlang der animierten SVG-Pfad ging. Es gelang mir, die mittlere Schleife zu entfernen und das Dreieck durch ein tatsächliches Bild zu ersetzen. Wenn Sie jedoch einen Blick auf meinen Stift werfen (http://codepen.io/hybride/pen/pewzrO), werden Sie sehen, dass das Bild nicht wirklich reibungslos/korrekt entlang des animierten Pfads verläuft. Wie kann ich

1. erhalten das Bild auf dem Weg,
2. haben die Bildebene den Weg in diese Richtung folgen, als das Flugzeug auf diese seltsame Kringel Sache entgegengesetzt ist jetzt gerade?

Vielen Dank!

auch Code zur Verfügung gestellt: HTML

<div id="svg-container"> 
<svg id="svgC" width="100%" height="100%" viewBox="0 0 820 220" preserveAspectRatio="xMidYMid meet"></svg> 

CSS

#svg-container { 
position:absolute; 
z-index:99; 
width: 90%; 
margin: 0 auto;} 

#svgC {padding: 20px;} 

jQuery

// Pen JS Starts Here 
jQuery(document).ready(function(){ 

    // --------- 
    // SVG 
    var snapC = Snap("#svgC"); 

    // SVG C - "Squiggly" Path 
var myPathC = snapC.path("M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 14.9c-25-7.74-56.6 14.9c-25-7.74-56.6 4.8-60.4").attr({ 

    id: "squiggle", 
    fill: "none", 
    strokeWidth: "4", 
    stroke: "#ffffff", 
    strokeMiterLimit: "10", 
    strokeDasharray: "12 6", 
    strokeDashOffset: "180" 
    }); 

    // SVG C - Triangle (As Polyline) 
    var Triangle = snapC.image("https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png", 0, 0, 150, 150); 

    initTriangle(); 

    // Initialize Triangle on Path 
    function initTriangle(){ 
    var triangleGroup = snapC.g(Triangle); // Group polyline 
    movePoint = myPathC.getPointAtLength(length); 
    triangleGroup.transform('t' + parseInt(movePoint.x - 15) + ',' + parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90)); 
    } 

    // SVG C - Draw Path 
    var lenC = myPathC.getTotalLength(); 

    // SVG C - Animate Path 
    function animateSVG() { 

    myPathC.attr({ 
     stroke: '#fff', 
     strokeWidth: 4, 
     fill: 'none', 
     // Draw Path 
     "stroke-dasharray": "12 6", 
     "stroke-dashoffset": "180" 
    }).animate({"stroke-dashoffset": 10}, 4500,mina.easeinout); 

    var triangleGroup = snapC.g(Triangle); // Group polyline 

    setTimeout(function() { 
     Snap.animate(0, lenC, function(value) { 

     movePoint = myPathC.getPointAtLength(value); 

     triangleGroup.transform('t' + parseInt(movePoint.x - 15) + ',' + parseInt(movePoint.y - 15) + 'r' + (movePoint.alpha - 90)); 

     }, 4500,mina.easeinout, function(){ 
     alertEnd(); 
     }); 
    }); 

    } 

    // Animate Button 
    function kapow(){ 
    $("#nin").click(function(event){ 

     // Disable Button 
     $(this).attr('disabled','disabled');  
     // Animate Ball 
     if ($('#ball').hasClass('red')){ 
     $('#ball').removeClass('red'); 
     }  
     // Run SVG 
     animateSVG(); 

    }); 
    } 

    kapow(); 

}); 

Answer 1

Der Schlüssel versucht, die Mitte des Objekts auszurichten mit dem Beginn des Pfades animiert werden, da er wahrscheinlich nicht zentriert ist. Das Problem ist bei Bildern und SVGs, das ist schwierig, wenn Sie das Bild nicht selbst erstellt haben und 0,0 als Mittelpunkt haben. Ansonsten muss man etwas herumspielen.

Sie können dies tun, indem Sie die X-, Y- und Rotationstransformation einstellen, um Sie in Gang zu bringen. Beispiel ..

snapC.image("https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png", -60, -60, 150, 150).transform('r270'); 

Dadurch werden die Ebenen x, y von -60 einzustellen und drehen Sie sie auch, um es korrekt ausgerichtet zu bekommen. Es wird wahrscheinlich auch noch ein bisschen weiter optimieren müssen.

example