Javascript 如何提高我对Raphaë；lJS图像动画？
我用RaphaëlJS永远旋转图像。您可以看到当前的结果。但是，在多次调整浏览器窗口的大小后，我遇到了一些性能问题 是否每次调整窗口大小时都会创建新动画，而旧动画不会被删除？如果是这样的话，我该如何停止并移除它们？如果不是这样的话，你知道我该如何提高绩效吗 代码如下：Javascript 如何提高我对Raphaë；lJS图像动画？,javascript,performance,web,raphael,Javascript,Performance,Web,Raphael,我用RaphaëlJS永远旋转图像。您可以看到当前的结果。但是，在多次调整浏览器窗口的大小后，我遇到了一些性能问题 是否每次调整窗口大小时都会创建新动画，而旧动画不会被删除？如果是这样的话，我该如何停止并移除它们？如果不是这样的话，你知道我该如何提高绩效吗 代码如下： <!DOCTYPE HTML> <html> <head> <style> body { background-color: black;
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: black;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="raphael.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gearImageSrc = "images/gear.png";
var nikaImageSrc = "images/nika_half.png";
var logoImageSrc = "images/logo_mp.png";
var paper;
var gearImage = new Image();
var nikaImage = new Image();
var logoImage = new Image();
gearImage.src = gearImageSrc;
nikaImage.src = nikaImageSrc;
logoImage.src = logoImageSrc;
showAll = function () {
paper = Raphael(0, 0, canvas.width,canvas.height);
gear = paper.image(gearImageSrc, canvas.width/2 - gearImage.width/4, canvas.height/2 - gearImage.height/3, gearImage.width/2, gearImage.height/2);
nika = paper.image(nikaImageSrc, canvas.width/2 - nikaImage.width/4, canvas.height/2 - nikaImage.height/3, nikaImage.width/2, nikaImage.height/2);
logo = paper.image(logoImageSrc, canvas.width/2 - logoImage.width/4, canvas.height/2 + gearImage.height/6, logoImage.width/1.5, logoImage.height/1.5);
var spin = Raphael.animation({transform: "r-360"}, 10000).repeat(Infinity);
gear.animate(spin);
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
paper.remove();
showAll();
}
window.addEventListener('resize', resizeCanvas, false);
window.onload = function () {
showAll();
}
</script>
</body>
</html>
身体{
背景色：黑色；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
var canvas=document.getElementById（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var gearImageSrc=“images/gear.png”；
var nikaImageSrc=“images/nika_half.png”；
var logoImageSrc=“images/logo\u mp.png”；
var纸；
var gearImage=新图像（）；
var nikaImage=新图像（）；
var logoImage=新图像（）；
gearImage.src=gearImageSrc；
nikaImage.src=nikaImageSrc；
logoImage.src=logoImageSrc；
showAll=函数（）{
纸张=拉斐尔（0，0，canvas.width，canvas.height）；
gear=paper.image（gearImageSrc，canvas.width/2-gearImage.width/4，canvas.height/2-gearImage.height/3，gearImage.width/2，gearImage.height/2）；
nika=paper.image（nikaImageSrc，canvas.width/2-nikaImage.width/4，canvas.height/2-nikaImage.height/3，nikaImage.width/2，nikaImage.height/2）；
logo=paper.image（logoImageSrc，canvas.width/2-logoImage.width/4，canvas.height/2+gearImage.height/6，logoImage.width/1.5，logoImage.height/1.5）；
var spin=Raphael.animation（{transform:“r-360”}，10000）。重复（无限）；
齿轮。动画（旋转）；
}
函数resizeCanvas（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
纸张。移除（）；
showAll（）；
}
addEventListener（'resize'，resizeCanvas，false）；
window.onload=函数（）{
showAll（）；
}
var spin = Raphael.animation({transform: "...r-360"}, 10000).repeat(Infinity);
每当您想附加到变换中时，都必须在变换（）中添加
…