svg实现自定义路径动画

---

layout: post
title: "svg自定义路径动画"
subtitle: "svg path 动画"
date: 2016-09-26 12:00:00
author: "Guolei"
header-img: ""
header-mask: 0.3
catalog: false
tags:
- svg

---

svg相对于canves，svg更加适合做小图标和线条，canves做大型游戏

svg的基础教程可以在w3c上查看，本篇文章主要讲，如何绘制自定义路径，以及如何在自定义路径上实现动画。

先看效果

(忽略我丑陋的书法)

难点：

1. 如何将自定义路径转化为Path代码
2. 如何获取svn每个像素点的坐标
3. 车子并不是简单的位移，车头方向和前进方向相同（切线）

原理

svg实现动画一般是通过 stroke-dasharray和stroke-dashoffset这两个属性来实现。

html

path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  -webkit-animation: dash 5s linear infinite;
  animation: dash 5s linear infinite;
}

css

• stroke-dasharray代表虚线之间的间距大小
• stroke-dashoffse代表虚线的偏移量

实现过程

1. 设置一个足够长的间距 （大于路径的长度）
2. 设置一个足够长的偏移量，保证刚开始看不到路径。（可以和长度一样）
3. 让偏移变成0 最后在配合css3的animation 增加一个动画过度，实现动画。

代码地址： jsfiddle

path代码

问题来了，path的代码哪里来的

难道自己一个个像素点去算?

当然不是，我们有工具

editor.method.ac

使用教程：

1. 选择画笔工具
2. 在画板上绘制路线
3. 点击view，导出路径代码

高阶用法

绘制好svn路线之后，如何让物体沿着路径前进

// 配置位移矢量 一共走100步
var STEP = 100;
var curStep = 0;

var path = $('#path')[0];
var $car = $('#car');

var timer = null;
// 最重要的两个属性  获取长度，以及每个点的坐标
var totalLength = path.getTotalLength();
var initPosition = path.getPointAtLength(0);
var prePosition = initPosition;
var curPosition = initPosition;

// 获取前进切线角度
function getRotate(a, b) {
  var k = (b.y - a.y) / (b.x - a.x);
  var rotate = Math.atan(k) * 180 / Math.PI;
  return k < 0 ? rotate + 90 : rotate - 90;
}

// 定位car 
$car.css({
  left: initPosition.x,
  top:initPosition.y,
  '-webkit-transform': 'translate(-2px, 0) rotate(' + getRotate(curPosition , path.getPointAtLength(1)) +'deg)'
}).show()

// 定时器控制前进
timer = setInterval(function() {
  
  if (curStep != STEP) {
    curStep++;
    
    curPosition = path.getPointAtLength(totalLength/STEP * curStep);
   
    $car.css({
      left: curPosition.x,
      top:curPosition.y,
     '-webkit-transform': 'translate(-2px, 0) rotate('+getRotate(prePosition, curPosition)+'deg)'
    }).show();
    prePosition = curPosition;
  } else {
    clearInterval(timer);
  }
  
}, 100)

原理就是将svn的长度平分100次，每100ms走一次，每次的坐标通过 path.getPointAtLength(totalLength/STEP * curStep)计算，然后通过js控制小车的位置。

通过setimeout可以配置小车运动的快慢，还可以通过缓动函数，使小车具有惯性。

地址： jsfiddle