Question

我已经为我正在使用jQuery和Raphael这个javascript库的页面创建了一个介绍动画。动画以我喜欢的方式运作，但往往是跳跃的。通常刷新会使其动画比第一页加载时更平滑。我想知道这是否与加载时间有关，或者它是否只是我的代码的效率。

您可以在以下位置查看页面：http://developer.crawford.com以及下面的动画代码。

有什么方法可以提高javascript动画的效率，或者特别是我的代码？我做了什么导致脚本效率很低？有没有什么好的方法可以让代码在执行前加载几秒钟，以使其运行更顺畅，而不仅仅是setTimeout（）？

function introAnimation() {
// creating the canvas
var paper = new Raphael(document.getElementById('mainCanvas'), '100%', '100%');

var canvasWidth = 500;
var canvasHeight = 500;
var offset = .6;
// speed of circle getting bigger
var speed1 = 1000;
// speed of circles diverging
var speed2 = 1200;
var hide = Raphael.animation({'opacity': 0});

// ellipse variable instantiation
var cRadius = 105;
var diam = cRadius*2;
// centerpoint
var cX = canvasWidth/2;
var cY = canvasHeight/2;

var circ1 = paper.ellipse(cX, cY, 10, 10);
circ1.attr({opacity: 1, stroke: '#777'});

var circRed = paper.ellipse(cX, cY, cRadius, cRadius).attr({opacity: 0, stroke: '#777'});
var circGreen = paper.ellipse(cX, cY, cRadius, cRadius).attr({opacity: 0, stroke: '#777'});
var circBlue = paper.ellipse(cX, cY, cRadius, cRadius).attr({opacity: 0, stroke: '#777'});  

//red, green, blue watermarks, and logo
var redWatermark = paper.image('images/circle_red.png', cX-50, cY-50, 100, 100).attr({opacity: 0});
var greenWatermark = paper.image('images/circle_green.png', cX-50, cY, 100, 100).attr({opacity: 0});
var blueWatermark = paper.image('images/circle_blue.png', cX-50, cY, 100, 100).attr({opacity: 0});

var logoWidth = 60;
var logoHeight = 30;
var logo = paper.image('images/CMS_logo_only.png', cX-(logoWidth/2), cY*1.04, logoWidth*.95, logoHeight*.95).attr({opacity: 0});

var letterOffset = cRadius*1.2;
// circle centerpoints xR, yR: center of red; xG, yG: center of green; xB, yB: center of blue
var xR = cX; var yR = cY-cRadius*offset;
var xG = cX-cRadius*offset; var yG = cY+cRadius*offset;
var xB = cX+cRadius*offset; var yB = cY+cRadius*offset;

// insert CMS letter text
var c = paper.text(xR-Math.cos(.8)*letterOffset, yR-Math.sin(.8)*letterOffset, "c.").attr({fill: '#737373', 'font-size': '25px', 'font-family': 'IMFELLDWPicaItalic', opacity: 0});
var m = paper.text(xG+Math.cos(5*Math.PI/4)*letterOffset, yG-Math.sin(5*Math.PI/4)*letterOffset, "m.").attr({fill: '#737373', 'font-size': '25px', 'font-family': 'IMFELLDWPicaItalic', opacity: 0});
var s = paper.text(xB+Math.cos(0)*letterOffset, yB-Math.sin(0)*letterOffset, "s.").attr({fill: '#737373', 'font-size': '25px', 'font-family': 'IMFELLDWPicaItalic', opacity: 0});

// white overlap
// Three points of overlap:
var pointTopX = cX; var pointTopY  = cY-(cRadius*.2);
var pointLeftX = cX-(cRadius*.365); var pointLeftY = cY+(cRadius*.33);
var pointRightX = cX+(cRadius*.365); var pointRightY = cY+(cRadius*.33);
var pathString = 'M'+pointTopX+' '+pointTopY+'A'+cRadius+' '+cRadius+' '+xG+' '+yG;
var pathString =    "M"+pointTopX+" "+pointTopY+','
                    +"A"+cRadius+","+cRadius+",0,0,0,"+pointLeftX+","+pointLeftY+','
                    +"A"+cRadius+","+cRadius+",0,0,0,"+pointRightX+","+pointRightY+','
                    +"A"+cRadius+","+cRadius+",0,0,0,"+pointTopX+","+pointTopY;
var overlapFill = paper.path(pathString).attr({'stroke-width': 0, fill: '#fff', opacity: 0});
var overlapPath = paper.path(pathString).attr({opacity: 0});

//resize circle
circ1.animate({ 'rx': cRadius, 'ry': cRadius }, speed1, function() {
    //hide it once it's done
    circ1.animate({opacity: 0}, 0);
    //show other circles
    circRed.animate({opacity: 1}, 0);
    circGreen.animate({opacity: 1}, 0);
    circBlue.animate({opacity: 1}, 0);
    //move other circles
    circRed.animate({cy: cY-cRadius*offset, rx: cRadius, ry: cRadius}, speed2);
    circGreen.animate({cx: cX-cRadius*offset, cy: cY+cRadius*offset, rx: cRadius, ry: cRadius}, speed2);
    circBlue.animate({cx: cX+cRadius*offset, cy: cY+cRadius*offset, rx: cRadius, ry: cRadius}, speed2);

    logo.animate({opacity: 1}, speed2);

    //move to center
    redWatermark.attr({width: diam, height: diam, x: imgX(cX, diam), y: imgY(cY, diam)});
    greenWatermark.attr({width: diam, height: diam, x: imgX(cX, diam), y: imgY(cY, diam)});
    blueWatermark.attr({width: diam, height: diam, x: imgX(cX, diam), y: imgY(cY, diam)});
    //animate out
    redWatermark.animate({y: imgY(cY-cRadius*offset, diam), opacity: .35}, speed2);
    greenWatermark.animate({x: imgX(cX-cRadius*offset, diam), y: imgY(cY+cRadius*offset, diam), opacity: .35}, speed2);
    blueWatermark.animate({x: imgX(cX+cRadius*offset, diam), y: imgY(cY+cRadius*offset, diam), opacity: .35}, speed2, function() {
        logo.toFront();
        c.animate({opacity: 1}, 1000); m.animate({opacity: 1}, 1000); s.animate({opacity: 1}, 1000);
        overlapFill.animate({opacity: 1}, 1000); overlapPath.animate({opacity: .3}, 1000);
        //nav slide in
        nav();
    });
});

redWatermark.hover(function() {
    $('#createSub').slideDown(300);
});
redWatermark.mouseout(function() {
    $('#createSub').slideUp(300);
});
greenWatermark.hover(function() {
    $('#storeSub').slideDown('fast');
});
greenWatermark.mouseout(function() {
    $('#storeSub').slideUp('fast');
});
blueWatermark.hover(function() {
    $('#manageSub').slideDown('fast');
});
blueWatermark.mouseout(function() {
    $('#manageSub').slideUp('fast');
});

}

Answer 1

你的PNG是400 + k http://developer.crawford.com/images/circle_blue.png

在尝试同时为其设置动画时，您强制用户下载超过一百万的图像数据。对于大多数访问者来说，这并不顺利。我建议压缩/缩小图像，或者预先加载它们。

Answer 2

用结果替换重复计算：

cY-cRadius*offset的变化经常出现，因此请提前计算。

Answer 3

我看起来也很挑剔。您是否考虑在调用任何动画之前预先缓存图像？

有效编码jquery动画

3 个答案: