SVGパスで飛行機をアニメーションしようとしています

Question

私はSVGを学び始めています。変更したいcodepenを見つけました。元々、SVGのアニメーション化されたパスに沿った三角形でした。私は真ん中のループを取り除き、三角形を実際のイメージに置き換えました。しかし、私のペン（http://codepen.io/hybride/pen/pewzrO）を見れば、イメージが実際にスムーズに/正しくアニメーション化されたパスに沿っていないことがわかります。飛行機が今やっているこの奇妙な波線のものとは対照的に、どのように私は

1. は、
2. 像面がその方向にパスをたどる必要があり、パス上の画像を得ることができますか？

ありがとう！

また、コード提供： 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

キーはオブジェクトの中心を揃えるしようとしていますおそらく最初の場所に配置されていない可能性があるため、パスの開始点をアニメーション化する必要があります。あなた自身がイメージを作成し、その中心に0,0を持っていない限り、問題はイメージとsvgであり、これを行うのは難しいです。さもなければ、あなたはいくつかの手品をしなければなりません。

これを行うには、x、y、および回転変換を設定してください。例。

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

これは、プレーンx、yを-60だけ調整し、回転させて正しい位置に合わせます。それはおそらく最終的にも少し微調整が必​​要になるでしょう。

example