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上查看，本篇文章主要讲，如何绘制自定义路径，以及如何在自定义路径上实现动画。

先看效果

(忽略我丑陋的书法)

难点：

如何将自定义路径转化为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可以配置小车运动的快慢，还可以通过缓动函数，使小车具有惯性。