anime.js 实战轻松实现 SVG 路径 (path) 曲线动画anime.js 实战使用 anime.js 轻松实

前面介绍过使用anime实现过一个SVG动画效果使用 SVG 来制作 Morphing 动画效果。使用它还可以很轻松的实现SVG路径曲线动画，如下图所示的动画效果：

以往实现这样的动画效果，一般使用SVG自带的SMIL动画属性或者是使用javascript动态来改变物体运动轨迹来实现。

而使用anime自带的path方法就可以很轻松的实现这样的曲线动画效果。准备好对应的SVG的path路径，其它的就交给anime来实现。

先来看下anime提供path方法的一些参数：

参数名字	具体含义
translateX	对应path中X轴方向的坐标点
translateY	对应path中Y轴方向的坐标点
rotate	对应path中弯曲的角度

然后就只要写几句代码就可以实现曲线动画效果：

var myPath = anime.path('path');

anime({
  targets: 'div',
  translateX: myPath,
  translateY: myPath,
  rotate: myPath
});

就以官方的实例来实战下。

先准备一个SVG的path：

<svg width="256" height="112" viewBox="0 0 256 112">
      <path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
</svg>

接下来编写下面几行代码就搞定：

var path = anime.path('path');

anime({
  targets: 'div',
  translateX: path,
  translateY: path,
  rotate: path,
  duration: 3000,
  loop: true,
  easing: 'linear'
});

anime.path()方法是用来获取path的坐标信息的。

就是这么简单，一个曲线动画效果就实现了。

详细的代码可以点击下面的链接查看。

demo