尝试在 SVG 路径上为飞机制作动画

Question

我开始学习 SVG，我遇到了一个我想修改的 codepen - 它最初有一个沿着动画 SVG 路径的三角形。我设法删除了中间的循环，并用实际图像替换了三角形。但是，如果您看一下我的笔 (http://codepen.io/hybride/pen/pewzrO)，您会发现图像实际上并没有 smoothly/correctly 沿着动画路径移动。我怎样才能

获取路径上的图片，
让图像平面沿着那个方向的路径移动，而不是平面现在正在做的这种奇怪的波浪形的东西？

谢谢！

还提供了代码： 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 并旋转它，以使其正确对齐。最后可能还需要进一步调整。

example

尝试在 SVG 路径上为飞机制作动画

Trying to animate airplane on SVG path

javascript

jquery

css

svg

snap.svg