raphael 实例
动画
隐藏和显示参数说明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
c = paper.circle(50, 50, 40);
function
hide() {
c.hide();
setTimeout(show, 1000);
}
function
show() {
c.show();
setTimeout(hide, 1000);
}
setTimeout(hide, 1000);
|
改变属性参数说明
|
1
2
3
4
5
6
7
8
9
10
|
var
c = paper.circle(50, 50, 40);
function
change_attr() {
//改变颜色
c.attr(
'stroke'
, Raphael.hsb(Math.random(), 1, 1));
setTimeout(change_attr, 1000);
}
setTimeout(change_attr, 1000);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var
c = paper.circle(50, 50, 40);
function
change_one_attr() {
//改变一个属性
c.attr(
'stroke'
,
'#FFF'
);
setTimeout(change_muti_attr, 1000);
}
function
change_muti_attr() {
//改变多个属性
c.attr({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
r: 10 * (Math.random() * 5 + 1),
//半径
stroke: Raphael.hsb(Math.random(), 1, 1)
//颜色
});
setTimeout(change_one_attr, 1000);
}
setTimeout(change_one_attr, 1000);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 绘制箭头
var
c = paper.path(
"M10 10L100 10"
).attr({
'arrow-end'
:
'classic-wide-long'
,
stroke:
"#fff"
,
"stroke-width"
: 2
});
var
c = paper.path(
"M10 30L100 30"
).attr({
'arrow-end'
:
'block-wide-long'
,
stroke:
"#f00"
,
"stroke-width"
: 2
});
var
c = paper.path(
"M10 50L100 50"
).attr({
'arrow-end'
:
'open-wide-long'
,
stroke:
"#ff0"
,
"stroke-width"
: 2
});
var
c = paper.path(
"M10 70L100 70"
).attr({
'arrow-end'
:
'oval-wide-long'
,
stroke:
"#0f0"
,
"stroke-width"
: 2
});
var
c = paper.path(
"M10 90L100 90"
).attr({
'arrow-end'
:
'diamond-wide-long'
,
stroke:
"#0ff"
,
"stroke-width"
: 2
});
|
动画参数说明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 1000;
// 播放动画,持续时间1000毫秒
c.animate({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
}, ms);
setTimeout(animate, 2000);
}
setTimeout(animate, 1000);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 效果同上,但是利用了动画结束时的回调函数
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 1000;
c.animate({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
}, ms,
function
(){
setTimeout(animate, 1000);
});
}
setTimeout(animate, 1000);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 效果同上,使用动画对象
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 1000;
var
anim = Raphael.animation({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
}, ms,
function
(){
setTimeout(animate, 1000);
});
c.animate(anim);
}
setTimeout(animate, 1000);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 效果同上,调用动画对象的delay()方法
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 1000;
var
anim = Raphael.animation({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
}, ms,
function
(){
setTimeout(animate, 0);
});
c.animate(anim.delay(1000));
}
setTimeout(animate, 0);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 动画对象的过渡效果及repeat()方法
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 2000;
var
anim = Raphael.animation({
50: {
r: 60,
stroke:
'#f00'
},
100: {
r: 40,
stroke:
'#fff'
}
}, ms);
c.animate(anim.repeat(
"Infinity"
));
//Infinity为无限次
}
animate();
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 设置效果的曲线类型
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 1000;
var
easing =
'elastic'
;
c.animate({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
}, ms, easing,
function
(){
setTimeout(animate, 1000);
});
}
setTimeout(animate, 1000);
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 设置随机曲线类型
var
c = paper.circle(50, 50, 40);
function
animate() {
var
ms = 1000;
var
easing = [
'elastic'
,
''
,
'bounce'
,
'ease-in-out'
][Math.round(Math.random() * 3)];
c.animate({
cx: 50 + Math.random() * 120,
//圆心x坐标
cy: 50 + Math.random() * 100,
//圆心y坐标
}, ms, easing,
function
(){
setTimeout(animate, 1000);
});
}
setTimeout(animate, 1000);
|