Question

我开始学习SVG，我遇到了一个我想要修改的编码器 - 它最初有一个沿着动画SVG路径的三角形。我设法删除了中间循环，并用实际图像替换了三角形。但是，如果你看一下我的笔（Source & Credits），你会发现图像实际上没有平滑/正确地沿着动画路径前进。我怎么能

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

谢谢！

还提供代码： 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路径上制作飞机动画

1 个答案: