拉斐尔弧线动画是变形的,而不是遵循弧线路径
Raphael arc animation is morphing instead of following arc path
我已经可以使用下面的代码成功地沿着圆弧的路径创建一个圆弧动画
var archtype = Raphael("canvas", 200, 100);
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
};
//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
var my_arc = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 14,
arc: [50, 50, 0, 100, 30]
});
my_arc.animate({
arc: [50, 50, 40, 100, 30]
}, 1500, "bounce");
使用此代码的唯一问题是,我需要在页面上有多个画布元素,我不想在同一页面上定义archtype.customAttributes.arc
10次。
为了解决这个问题,我想我可以这样做…
function arc (xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return path;
}
var path = arc(50, 50, 0, 100, 30);
var my_arc = archtype.path().attr({
"stroke": "#f00",
"stroke-width": 14,
path:path
});
var path = arc(50, 50, 40, 100, 30);
my_arc.animate({
path:path
}, 1500, "bounce");
然而,当我尝试这样做时,弧的末端采取最直的路径到新的端点,导致扭曲,变形效果。
谁能解释为什么我的例子这样做,并建议我是为了克服这个问题,而不必声明一个自定义属性为我需要在页面上的每个画布?我假设arc: [50, 50, 0, 100, 30]
和path: path
是一样的,是错误的吗?
谢谢你的帮助
我不能给出一个有教养的答案,但通过适应这个例子解决了我的问题:http://jsfiddle.net/7jHPv/5/在这个问题中引用:在Chrome中绘制Raphael JS的弧形动画
var myArc = r.path().attr({
"stroke": arcColours[i]
, "stroke-width": 6
, arc: [1, 100, muffinRadius, step*(i+1), diagramHeight/2]
});
myArc.animate({
arc: [values[i], 100, muffinRadius, step*(i+1), diagramHeight/2]
}, 1500, "<>", function() {
// anim complete here
});
相关文章:
- 为什么在变形之前不缺少Fx
- Javascript:使用绝对路径设置img src
- 如何在d3.js中返回路径的y坐标
- 复制图像路径以单击它
- 从模块内部访问Express装载路径
- JS文件的路径正在消失
- 使用onclick绘制SVG路径
- jpm的默认Firefox路径没有'不起作用
- 如何使用jquery将base64图像路径转换为真实路径
- 可以用'吗/'在相对路径中
- 设置动画时,SVG/Raphael大圆圈会变形
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 将Windows文件路径组织到文件夹中
- Ajax URL路径未替换当前URL
- 如何使用Javascript上传给定路径的文件
- 如何将要单独填充的每个HTML画布路径/形状分开
- 如何通过单击命令将一个SVG路径元素变形为另一个
- Javascript-变形/动画svg路径数据没有SMIL或库
- 拉斐尔弧线动画是变形的,而不是遵循弧线路径
- 如何使用snap.svg设置路径变形的动画