动画
参数说明
|
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); |