用raphael绘制路径动画
animating paths with raphael
我还在努力弄清楚拉斐尔,我被一些基本的动画困住了。看看这里:http://jsfiddle.net/d7d3Z/
很简单:两条路径动画到位。我想要的是让它看起来像一条线,而不是两条线一起开始。
我如何订购动画?
可以在第一个动画结束后调用第二个动画。
window.onload = function() {
var c= Raphael("canvas", 200, 200);
var p = c.path("M140 100");
var r = c.path("M190 60");
p.animate({path:"M140 100 L190 60"}, 2000, function() {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
};
http://jsfiddle.net/d7d3Z/1/使用animate: http://jsfiddle.net/pPwRP/
这将给你的是,它将在第一个动画完成后执行回调。
对于懒惰的点击-这里是代码
window.onload = function() {
var c= Raphael("canvas", 200, 200);
var p = c.path("M140 100");
var r = c.path("M190 60");
p.animate({path:"M140 100 L190 60"}, 2000, function () {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
};
相关文章:
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- Raphael:单独触发多个路径动画
- 创建动画路径
- Vivus JS似乎没有动画某些<路径>节点
- 纸张.js路径数据动画在帧和鼠标拖动
- svg路径动画整个路径
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 使用Snap.svg的带有箭头标记的动画路径
- 绘制动画openlayers线条字符串路径
- 创建从一个位置到另一个位置的路径动画
- 制作从上一个已知点到新添加点(d3)的路径(线)的动画
- 使用RaphaelJS和GSAP制作SVG路径动画
- 仅对路径/形状进行动画处理,在 raphael.js 集中没有文本
- 如何在运动路径上有效地反转 SVG (SMIL) 动画
- 使用Raphael.js绘制双动画路径错误
- SVG动画路径's属性
- 在raphael .js中动画路径的描边宽度
- 鼠标悬停在动画路径上不起作用
- 如何在rapha 235;l.js中绘制简单的动画路径
- Raphael JS:使用repeat(无限)动画路径