JavaScript应该用于这个？

我被要求将这个flash movie变成一个javascript动画，以便在ipad上看到它。我是新来的JavaScript/jQuery的，所以我不知道我做到了最好的方式，但是，JavaScript应该用于这个？

我知道它的工作here。（jsfiddle）

问题是所有的图像一起重约1000 kb。除了最新版本的铬合金和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>

来源

2011-04-16 808inbinary

你确实意识到我们实际上不能运行它并看到正确的？这可能是更有用的，如果你设置一个小提琴/ jsbin和链接在这里 – JohnP 2011-04-16 07:51:29

theres链接中的帖子... – 2011-04-16 07:55:50

检查问题中的链接。你可以看到闪光灯和我的js – 808inbinary 2011-04-16 07:55:59

无法运行您正在演示的代码，我无法提出太多建议。然而，一个建议，可能会帮助你的话：

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

来源

2011-04-16 07:53:53

仅供参考 - 他与帖子中的实况动画链接！但很好的建议重新：CSS3动画。 – 2011-04-16 07:55:12

感谢DustMason，刚刚实现！通过观看Flash电影，我确实认为很多转换可以通过CSS3完成 - 特别是背景。这里有一个例子可以帮助你开始。 http://css3.bradshawenterprises.com/cfimg3/ – 2011-04-16 07:56:49

好酷。我试图容纳尽可能多的broswers，包括IE8，这让它变得更加复杂。如果我能够只为safari构建它，我将def查看css3动画 – 808inbinary 2011-04-16 08:04:12

JavaScript应该用于这个？

回答

相关问题