layout: post
title: "svg自定义路径动画"
subtitle: "svg path 动画"
date: -09-26 12:00:00
author: "Guolei"
header-img: ""
header-mask: 0.3
catalog: false
tags:
- svg
svg相对于canves，svg更加适合做小图标和线条，canves做大型游戏
svg的基础教程可以在w3c上查看，本篇文章主要讲，如何绘制自定义路径，以及如何在自定义路径上实现动画。
先看效果
(忽略我丑陋的书法)
难点：
如何将自定义路径转化为Path代码
如何获取svn每个像素点的坐标
车子并不是简单的位移，车头方向和前进方向相同(切线)
原理
svg实现动画一般是通过 stroke-dasharray和stroke-dashoffset这两个属性来实现。
backgroundLayer 1
html
path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
-webkit-animation: dash 5s linear infinite;
animation: dash 5s linear infinite;
}
css
stroke-dasharray代表虚线之间的间距大小
stroke-dashoffse代表虚线的偏移量
实现过程
设置一个足够长的间距 (大于路径的长度)
设置一个足够长的偏移量，保证刚开始看不到路径。(可以和长度一样)
让偏移变成0 最后在配合css3的animation 增加一个动画过度，实现动画。
path代码
问题来了，path的代码哪里来的
难道自己一个个像素点去算?
当然不是，我们有工具
使用教程：
选择画笔工具
在画板上绘制路线
点击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可以配置小车运动的快慢，还可以通过缓动函数，使小车具有惯性。
