Question

运动路径动画

动画一个元素，使之相对于SVG路径的x，y和角度值运动。

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

path函数返回一个返回指定属性的新函数。

v3版本以后，运动路径动画具有响应性(responsive)

Parameters	Example	Info
'x'	myPath('x')	返回SVG路径的当前x值('px')
'y'	myPath('y')	返回SVG路径的当前y值('px')
'angle'	myPath('angle')	返回SVG路径的当前角度('degrees')

var path = anime.path('.motion-path-demo path');

anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

变形动画

创建两个svg形状之间的过渡。

形状必须具有相同的点数！

更多变形动画信息

anime({
  targets: '.morphing-demo .polymorph',
  points: [
    { value: ['70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369','70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369']
    },
    { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
    { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
    { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
  ],
  easing: 'easeOutQuad',
  duration: 2000,
  loop: true
});

画线动画

anime.js使用anime.setDashoffset()方法获取到SVG路径的长度并将此长度设置为SVG的'stroke-dasharray'值，并返回该长度，再使用strokeDashoffset将SVG的'stroke-dashoffset'属性值在from to格式中产生动画从而创建路径绘制效果。

//从起点开始画完
strokeDashoffset: [anime.setDashoffset, 0] 

//从一半开始画完
strokeDashoffset: function(el) { var svgLength = anime.setDashoffset(el); return [svgLength*0.5, 0]; } 
    

更多画线Demo

SVG画线原理（English）.

anime({
  targets: '.line-drawing-demo .lines path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutSine',
  duration: 1500,
  delay: function(el, i) { return i * 250 },
  direction: 'alternate',
  loop: true
});