SVG动画路径's属性
SVG animate path's d attribute
是否可以使用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做到这一点。
(圆形和菱形只是一个例子-在现实中,我想在两个由相同数量的贝塞尔曲线组成的任意实体之间转换)
有可能。这里有很多动画化路径d元素的例子:http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd包括动画化贝塞尔曲线。您应该能够为您的特定用例调整一个。
这是没有arc标志动画的path15。大圆弧标志只能是0或1,所以线性动画没有多大意义。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="400px" viewBox="-500 100 1500 1500">
<path id="p1"
d="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
stroke="blue" fill="none"
stroke-width="4" />
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
to="M 300 600 A 300 400 -20 1 0 400 200 a 200 600 -50 0 1 100 400"
dur="10s"
fill="freeze" />
</svg>
相关文章:
- 对象获胜'如果qml中的其他地方定义了数字动画属性,则t设置动画
- 在jquerymobile中设置按钮css属性的动画
- Jquery scrollTop动画不工作"无法读取属性'top'无风
- 速度.js动画两个属性时持续时间不同
- jQuery动画背景大小属性
- 使用jQuery通过更改src属性来设置一个图像标签的动画
- 在动画开始之前更新animate属性
- css3动画使用html5数据属性
- 补间最大动画 无法分配给只读属性“_gsTweenID”
- 是否可以将动画与 jQuery 中的属性一起使用
- CSS3 关键帧动画是否比属性过渡更平滑?
- 可以将元素属性更改作为动画链的一部分
- 在同一持续时间内对两个属性进行动画处理
- 如何使用 jquery 对缩放 css 属性进行动画处理
- 具有不更新阴影的变形属性的动画缓冲区几何图形
- 将鼠标悬停在元素上会导致它进行动画处理,而只是更改其 CSS 属性
- 创建新属性 - JS / 边缘动画
- CSS3 动画 - 难以理解 CSS 属性
- 以角度方式在最小高度属性上动画化
- CSS 过渡:在“高度”样式属性的内联样式之间设置动画