为路径上的足迹添加动画效果

Question

我从这支有动画脚印的笔中获得了灵感。我的问题是，我怎样才能将它与给定的轨迹结合起来，以便脚印会沿着路径前进？我的路径是这样的：

<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)

参考文献

代码笔

演职员表 珍娜