Vector 使用Raphael JS在屏幕上浮动形状
我正在努力让一些形状在屏幕上随意浮动。最终,它们将彼此交互,并具有onclick功能。我可以让圆在屏幕上渲染,但我不能让它们有运动。似乎.animate()函数不是我在这里需要的 有人知道我会怎么做吗 以下是我所拥有的:Vector 使用Raphael JS在屏幕上浮动形状,vector,canvas,svg,raphael,shapes,Vector,Canvas,Svg,Raphael,Shapes,我正在努力让一些形状在屏幕上随意浮动。最终,它们将彼此交互,并具有onclick功能。我可以让圆在屏幕上渲染,但我不能让它们有运动。似乎.animate()函数不是我在这里需要的 有人知道我会怎么做吗 以下是我所拥有的: jQuery(function ($) { // Global Vars var items = 30, width = window.innerWidth, height = window.innerHeight, paper = R
jQuery(function ($) {
// Global Vars
var items = 30,
width = window.innerWidth,
height = window.innerHeight,
paper = Raphael("galaxy", width, height),
frameRate = 100,
i,
galaxy = [],
star = [],
stars = [];
// Do some variants for each item
for (i = 0; i<items; i++ ) {
stars[i] = {
x : Math.random() * width,
y : Math.random() * height,
r : Math.random()*255,
g : Math.random()*255,
b : Math.random()*255,
size : Math.random() * 20
}
}
// Creates canvas 320 × 200 at 10, 50
// Creates circle at x = 50, y = 40, with radius 10
for (i = 0; i<items; i++ ) {
star[i] = paper.circle(stars[i].x, stars[i].y, stars[i].size);
star[i].attr("fill", "rgb("+stars[i].r+", "+stars[i].g+", "+stars[i].b+")");
star[i].attr("stroke", "none");
}//end for
});
jQuery(函数($){
//全局变量
风险值项目=30,
宽度=window.innerWidth,
高度=窗内高度,
纸张=拉斐尔(“银河”,宽度,高度),
帧率=100,
我
银河=[],
星=[],
星=[];
//为每个项目做一些变体
对于(i=0;i它可以与animate()一起工作。例如,如果将此添加到上述函数中:
(function anim() {
for (i = 0; i<items; i++ ) {
newX = Math.random() * width;
newY = Math.random() * height;
star[i].animate({cx: newX, cy: newY}, 1000);
}
setTimeout(anim, 1000);
})();
(函数anim(){
对于(i=0;iOW,这是完美的。我尝试了使用setTimeout的不同组合,但始终无法正确使用。谢谢!