能否使用SVG来动画化<path>
的d
属性?
我可以使用八条贝塞尔曲线绘制一个菱形和一个圆作为路径:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
jQuery(function($){
var a = 50;
var draw = function(b, c, d, e, f){
return [
'M', a, 0,
'C', b, c, ',', d, e, ',', f, f,
'C', e, d, ',', c, b, ',', 0, a,
'C', -c, b, ',', -e, d, ',', -f, f,
'C', -d, e, ',', -b, c, ',', -a, 0,
'C', -b, -c, ',', -d, -e, ',', -f, -f,
'C', -e, -d, ',', -c, -b, ',', 0, -a,
'C', c, -b, ',', e, -d, ',', f, -f,
'C', d, -e, ',', b, -c, ',', a, 0,
].join(' ');
};
$('#diamond').attr({ d: draw( 5*a/6, a/6, 2*a/3, a/3, a/2 ) });
$('#circle' ).attr({ d: draw( a, a*Math.PI/12, (2 + 1/Math.sqrt(2))*a/3, a*Math.PI/6, a/Math.sqrt(2) ) });
});
</script>
</head>
<body>
<svg width="200" height="200">
<g transform="translate(100,100)">
<path id=diamond fill="blue" stroke="black"/>
</g>
</svg>
<svg width="200" height="200">
<g transform="translate(100,100)">
<path id=circle fill="red" stroke="black"/>
</g>
</body>
</html>
我想要动画地实现从一个状态转换到另一个状态。
我可以在JavaScript中模拟这个过程(只需在特定时间线性插值贝塞尔曲线参数),但我想知道是否有一种用SVG实现的方法。
(圆形和菱形只是一个示例 - 实际上,我想在两个由相同数量的贝塞尔曲线构成的任意立体物体之间进行过渡动画)。