尝试在SVG路径上为飞机设置动画

Question

I'm starting to learn SVG, and I came across a codepen that I wanted to modify - it originally had a triangle that went along the animated SVG path. I managed to remove the middle loop, and replace the triangle with an actual image. However, if you take a look at my pen ( http://codepen.io/hybride/pen/pewzrO ), you will see that the image does not actually smoothly/correctly goes along the animated path. How can I

1. get the image on the path,
2. have the image plane follow the path in that direction, as opposed to this weird squiggle thing the plane is now doing?

Thanks!

Also code provided: 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

The key is trying to align the center of the object to be animated with the start of the path, as it's probably not centered in the first place. The problem is with images and svgs it's hard to do this unless you have created the image yourself and have 0,0 as it's center. Otherwise you have to do some fiddling about.

You can do this by setting the x,y and rotation transform to get you going. Example..

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

This will adjust the planes x,y by -60 and also rotate it, to get it aligned correct. It will probably need a bit of further tweaking finally as well.

example