应该使用javascript吗？

时间：2011-04-16 07:48:25

标签： javascript smooth

我被要求将此flash movie转换为javascript动画，以便在ipads上看到它。我是javascript / jquery的新手，所以我不确定我是以最好的方式做到了，但是，

我让它运转here。 （的jsfiddle）

问题是所有图像一起重约1000 kb。除了快速计算机上最新版本的chrome和safari之外，动画远不及平滑。我的问题是javascript是否适合这种事情。如果是这样的话，是否存在使大型图像能够平滑地生成动画的技巧？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Testing</title> 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js" language="javascript"></script> 
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="Assets/jquery.effects.core.js"></script> 
<script type="text/javascript" src="Assets/jQueryRotate.2.1.js" language="javascript"></script> 
<script type="text/javascript" src="Assets/jquery.transform.js" language="javascript"></script> 

<script type="text/javascript" src="Assets/jquery.transform-0.9.3.min.js" language="javascript"></script> 

<style type="text/css"> 
body {
text-align: center;
margin: 0;
padding: 0;
background-color: white;
font-size: 10px;
font-family: arial,helvetica,verdana,sans-serif;
display: block;
}

div {
display: block;
}


#box {
margin-left: auto;
margin-right: auto;
width: 980px;
text-align: left;
background-color: #FCFAE9;
}

#top {
width: 980px;
height: 582px;
position: relative;
text-align: left;
}

#tab {
background-color: #ccc;
position: relative;
left: 10px;
top: 560px;
width: 960px;
height: 22px;
z-index: 2;
}

#jsbox {position: absolute; left: 10px; top: 132px; width:960px; height:450px; overflow:hidden; background:url(Assets/loading.gif) no-repeat 50% 50%;
}
#imageholder {position:relative; width:960px; height:450px; }

#green{top:0; left:0; position:absolute; display:none}

.palms {width:428px; height:539px;}

#apalm1 {top:20px; left:-150px; position:absolute}

#apalm2 {top:-150px; left:-50px; position:absolute}

#apalm3 {top:-200px; left:50px; position:absolute}

#apalm4 {top:250px; left:70px; position:absolute}

#apalm5 {top:-300px; left:400px; position:absolute}

#apalm6 {top:-300px; left:500px; position:absolute}

#apalm7 {top:40px; left:560px; position:absolute}

#apalm8 {top:170px; left:590px; position:absolute}

.palms>div{
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/palm.png) no-repeat;
        /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Assets/puntacana/palm.png", sizingMethod="crop");}   



#icon {top:215px; left:525px; width:396px; height:79px; position:absolute; display:none }
#icon>div {
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/text1.png) no-repeat;
        /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Assets/puntacana/text1.png", sizingMethod="crop");}  

#text2 {top:265px; left:545px; width:381px; height:28px; position:absolute; display:none}
#text2>div {
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/text2.png) no-repeat;
        /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Assets/puntacana/text2.png", sizingMethod="crop");}  

#text3 {top:265px; left:40px; width:307px; height:28px; position:absolute; display:none}
#text3>div {
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/text3.png) no-repeat;
        /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Assets/puntacana/text3.png", sizingMethod="crop");}  

#text4 {top:270px; left:650px; width:275px; height:28px; position:absolute; display:none}
#text4>div {
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/text4.png) no-repeat;
        /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Assets/puntacana/text4.png", sizingMethod="crop");}  

#text5 {top:270px; left:650px; width:276px; height:49px; position:absolute; display:none}
#text5>div {
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/text5.png) no-repeat;
        /* IE hack */
    background:none\9; /* Targets IE only */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Assets/puntacana/text5.png", sizingMethod="crop");}  



#house {top:-50px; left:-104px; width:1150px; height:539px; position:absolute; }
#house>div{
    width:100%; height:100%; display:none;
    background:transparent url(Assets/puntacana/5.jpg) no-repeat;
    }

#bar {top:0; left:0; width:960px; height:450px; position:absolute; display:none}
#bar>div{
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/4.jpg) no-repeat;
    }
#couple {top:0; left:0; width:960px; height:450px; position:absolute; display:none}
#couple>div{
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/3.jpg) no-repeat;
    }
#golf {top:0; left:0; width:960px; height:450px; position:absolute; display:none}
#golf>div{
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/2.jpg) no-repeat;
    }
#beach {top:0; left:0; width:960px; height:450px; position:absolute; display:none}
#beach>div{
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/1.jpg) no-repeat;
    }
#green {top:0; left:0; width:960px; height:450px; position:absolute; display:none}
#green>div{
    width:100%; height:100%;
    background:transparent url(Assets/puntacana/green.jpg) no-repeat;
    }



</style> 


<body> 


  <div id="box"> 
    <div id="top"> 
      <div id="jsbox"> 
        <div id="imageholder"> 

            <div id="house"><div></div></div> 
            <div id="bar"><div></div></div> 
            <div id="couple"><div></div></div> 
            <div id="golf"><div></div></div> 
            <div id="beach"><div></div></div> 
            <div id="green"><div></div></div> 

            <div class="palms" id="apalm1"><div id="palm1"></div></div> 
            <div class="palms" id="apalm2"><div id="palm2"></div></div> 
            <div class="palms" id="apalm3"><div id="palm3"></div></div> 
            <div class="palms" id="apalm4"><div id="palm4"></div></div> 
            <div class="palms" id="apalm5"><div id="palm5"></div></div> 
            <div class="palms" id="apalm6"><div id="palm6"></div></div> 
            <div class="palms" id="apalm7"><div id="palm7"></div></div> 
            <div class="palms" id="apalm8"><div id="palm8"></div></div> 


            <div id="icon"><div></div></div> 
            <div id="text2"><div></div></div> 
            <div id="text3"><div></div></div> 
            <div id="text4"><div></div></div> 
            <div id="text5"><div></div></div> 

        </div> 
      </div> 
      <div id="tab"></div> 
    </div> 
  </div> 

<script type="text/javascript"> 


$(window).load(function () {    

    Opening();

    setTimeout(function () {
        $('#icon').fadeIn(800)
        }, 1200);

    setTimeout(function () {
        $('#icon').fadeOut(800);
        $('#beach').fadeIn(600,
        function () {
            setTimeout (function () {$('#text2').fadeIn(1000)}, 700)
        });
    }, 3600);

    setTimeout(function () {
        $('#text2, #beach').fadeOut(900);
        $('#golf').fadeIn(900);
    }, 7100);

    setTimeout(function () {
        $('#golf').fadeOut(800);
        $('#couple').fadeIn(900,
        function () {
            $('#text3').fadeIn(1000);
        });
    }, 9800);

    setTimeout(function () {
        $('#text3, #couple').fadeOut(800);
        $('#bar').fadeIn(800);
    }, 14200);

    setTimeout(function () {
        $('#bar').fadeOut(1000);
        $('#house>div').show().animate({
                    opacity:1,
                    scale: [.85, .85],

                }, 3800 );
    }, 16800);

    setTimeout(function () {
        $('#text4').fadeIn(800,
        function () {
            setTimeout (function () {
                $('#text4').fadeOut(600,
                    function () {
                        $('#text5').fadeIn(1000);
                    }
                )}, 1800);
            });

    }, 18200);


});


function Opening() {

        $('#palm1').transform({reflectY: true, rotate: '40deg'});
        $('#palm2').transform({rotate: '200deg'});
        $('#palm3').transform({reflectY: true,  rotate: '20deg'});
        $('#palm4').transform({reflectY: true,  rotate: '90deg'});
        $('#palm5').transform({reflectY: true,  rotate: '-90deg'});
        $('#palm6').transform({reflectY: false,  rotate: '24deg'});
        $('#palm7').transform({ rotate: '24deg'});
        $('#palm8').transform({ rotate: '-14deg'});

        $('.palms, #green').show().css({opacity:0}).animate({opacity:1}, 700);

        $('.palms>div').animate({ scale: [1.1, 1.1], rotate: '+=5deg'}, 2300, function () { swingBack(); });

            function swingBack() {
                $('.palms>div').animate({ scale: [1, 1], rotate: '-=5deg'}, 2300, function () {$(this).hide()}); 
                setTimeout (function() { $('.palms, #green').animate({opacity:0}, 1100)}, 1400)  
            };

};






</script> 

</body> 
</html>

1 个答案:

答案 0 :(得分：0)

如果无法运行您正在演示的代码，我无法提出太多建议。但是，可以帮助您的建议：

我注意到你大量使用了jQuery的animate（）方法。我建议您重新审视是否可以通过CSS3动画完成任何动画。这些将在iPad上进行硬件加速 - javascript动画不会是AFAIK。

相关问题
最新问题