Raphael.js customAttributes動畫
[英]Raphael.js customAttributes animation
問題描述
我正在嘗試使用Raphael.js創建一個簡單的圓形扇區動畫。 動畫應展開從0到2 * Pi的圓形扇區。 問題在於，它僅在1秒后繪制了一個沒有任何動畫的圓。
這是我的代碼：
<html>
<head>
<title></title>
<script src="raphael.js"></script>
</head>
<body>
<script>
window.onload = function () {
var paper = Raphael("holder");
paper.ca.sector = function (x, y, r1, r2, startAngle, endAngle, color) {
var x11 = x + r1 * Math.sin(startAngle);
var y11 = y - r1 * Math.cos(startAngle);
var x21 = x + r1 * Math.sin(endAngle);
var y21 = y - r1 * Math.cos(endAngle);
var x12 = x + r2 * Math.sin(startAngle);
var y12 = y - r2 * Math.cos(startAngle);
var x22 = x + r2 * Math.sin(endAngle);
var y22 = y - r2 * Math.cos(endAngle);
var big = 0;
if (endAngle - startAngle > Math.PI)
big = 1;
var pathList = ["M", x12, y12,
"A", r2, r2, 0, big, 1, x22, y22,
"L", x21, y21,
"A", r1, r1, 0, big, 0, x11, y11,
"Z"];
return {path: pathList, fill: color, stroke: "none"};
}
var p = paper.path().attr({sector: [300, 300, 100, 140, 0, 0.0001, "pink"]});
p.animate({sector: [300, 300, 100, 140, 0, Math.PI * 1.999999, "pink"]}, 1000, "bounce");
};
</script>
<div id="holder" style="width: 700px; height: 700px;"></div>
</body>
</html>
很抱歉，清單很長。
那么問題為什么會發生呢？ 我在做什么錯呢？
謝謝！
1 個解決方案
解決方案1
1 已采納 2013-10-21 05:43:00
這是工作代碼：
var paper = Raphael("holder");
var createSector = function (x, y, r1, r2, startAngle, endAngle, color) {
var x11 = x + r1 * Math.sin(startAngle);
var y11 = y - r1 * Math.cos(startAngle);
var x21 = x + r1 * Math.sin(endAngle);
var y21 = y - r1 * Math.cos(endAngle);
var x12 = x + r2 * Math.sin(startAngle);
var y12 = y - r2 * Math.cos(startAngle);
var x22 = x + r2 * Math.sin(endAngle);
var y22 = y - r2 * Math.cos(endAngle);
var big = 0;
if (endAngle - startAngle > Math.PI)
big = 1;
var pathList = ["M", x12, y12,
"A", r2, r2, 0, big, 1, x22, y22,
"L", x21, y21,
"A", r1, r1, 0, big, 0, x11, y11,
"Z"];
return {path: pathList, fill: color, stroke: "none"};
}
var p = paper.path();
p.attr(createSector(300, 300, 100, 140, 0, 0.001, "pink"));
p.animate(createSector(300, 300, 100, 140, 0.01, Math.PI * 1.999999, "pink"), 1000, "bounce");
我仍然不確定為什么您的代碼無法正常工作
編輯：好的，我一直在嘗試一些值，它看起來像raphael中的某種錯誤，因為路徑的填充不與動畫配合使用。
var paper = Raphael("holder");
paper.customAttributes.sector = function (x, y, r1, r2, startAngle, endAngle, color,strokeWidth) {
var x11 = x + r1 * Math.sin(startAngle);
var y11 = y - r1 * Math.cos(startAngle);
var x21 = x + r1 * Math.sin(endAngle);
var y21 = y - r1 * Math.cos(endAngle);
var x12 = x + r2 * Math.sin(startAngle);
var y12 = y - r2 * Math.cos(startAngle);
var x22 = x + r2 * Math.sin(endAngle);
var y22 = y - r2 * Math.cos(endAngle);
var big = 0;
if (endAngle - startAngle > Math.PI)
big = 1;
var pathList = ["M", x12, y12,
"A", r2, r2, 0, big, 1, x22, y22,
"L", x21, y21,
"A", r1, r1, 0, big, 0, x11, y11,
"Z"];
return {path: pathList, fill: color,'stroke-width':strokeWidth};
}
var p = paper.path();
p.attr({sector: [300, 300, 100, 140, 0, 0.0001, "#caac12",1]});
p.animate({sector: [300, 300, 100, 140, 0.0001, Math.PI * 1.999999, "#cacaca",0]}, 3000);
Raphael.js中的自定義動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.