时间戳

首页 > 解决方案 > 沿路径为足迹设置动画

javascript - 沿路径为足迹设置动画

问题描述

我从这支有动画脚印的笔中获得灵感。我的问题是如何将它与给定的轨迹结合起来，以便脚印只会跟随路径？我的路径将是这样的：

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

非常感谢您的帮助！

标签： javascriptcssanimationsvg

解决方案

为此，我建议您使用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)

参考

密码笔

学分珍娜

推荐阅读