Question

我从这个pen那里得到了灵感，那里有动画足迹。我的问题是如何将其与给定的轨迹结合起来，以使足迹仅沿着路径行进？我的路径将类似于：

<svg id="svg" width="800" height="800">
    <path id="path" d="M130 20 L230 80 L200 100 L170 200"/>
    <image id="footprint" xlink:href="http://icons.veryicon.com/png/System/Icons8%20Metro%20Style/Tracks%20Footprints%20Left%20shoe.png" x="0" y="0" height="50px" width="50px"/>
</svg>

非常感谢您的帮助！

Answer 1

为此，我建议您使用 GREENSOCK ，轻巧易用且动画丰富的场景，

也许这会对您有帮助

<img src="https://res.cloudinary.com/dwr6mqx2g/image/upload/v1489592258/leftfoot_hjajqj.svg" id="leftfoot">
      <img src="https://res.cloudinary.com/dwr6mqx2g/image/upload/v1489592258/rightfoot_fthak3.svg" id="rightfoot">

一些JS

var $rightfoot = $("#rightfoot"),
    $leftfoot = $("#leftfoot");

var tl = new TimelineMax({repeat:-1})



  var ease = SteppedEase.config(5);

tl

  .to($rightfoot, 0.25, {autoAlpha:1,},1)
  .to($leftfoot, 0.25, {autoAlpha:1,},1)
  .to($leftfoot, 3, 

  {bezier:{ curviness: 1, values:[{x:0, y:0},{x:52, y:-25}, {x:97, y:-39}, {x:136, y:-54}, {x:172, y:-83}, {x:197, y:-117},{x:200, y:-163,}],
  autoRotate:90}, ease:ease},1)

  .to($rightfoot, 3, 
  {bezier:{ curviness: 1, values:[{x:0, y:0}, {x:44, y:-13}, {x:97, y:-28,}, {x:134, y:-49,}, {x:166, y:-83,}, {x:182, y:-126,}, {x:176, y:-163,}],
  autoRotate:100}, ease:ease},1.25)

Referene

Codepen

信用珍娜

沿路径动画脚印

1 个答案: