Raphael入门实例：动画与箭头
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); |
