试图在SVG路径上动画飞机

Question

我开始学习SVG，我遇到了一个我想要修改的代码，它最初有一个三角形，沿着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

关键是尝试将要被动画化的对象的中心与路径的开始对齐，因为它可能一开始就没有居中。问题是，对于图像和svgs，除非您自己创建了映像并将0,0作为中心，否则很难做到这一点。否则你就得摆弄一下。

你可以通过设置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，也旋转它，使它正确地对齐。最后，它可能还需要进一步的调整。

示例