Вопросы Теги

дублированная анимация после обновления до Android Jelly Beans

Я использую JQuery 1.1.0 и Phonegap 1.9.0 для разработки приложения html5 для Android. У меня есть небольшая анимация, которая рисует батарею на холсте и обновляет ее. Похоже на аккумулятор, который заряжается. На андроиде 4.0.4 работало очень хорошо.

Вчера я получил обновление до Android 4.1.1 на свой Galaxy Nexus. После этого изменения у меня возникли проблемы с анимацией. Теперь он рисует изображения на холсте, одно впереди, а другое сзади с неправильными координатами. Я думаю, это как-то связано с изменениями в Java Script Engine V8, может быть, с проблемами кэширования?! В каждом браузере на моем ПК анимация работает очень хорошо.

Мой html-код:

<!DOCTYPE html>
<html>
<head> 
<title>Hella App</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

<style>
   .ui-page { background: black;}
</style>

</head>

   <body>

<div data-role="page" id="dataPageBattery" data-theme="a">
    <h2 align="center">Battery State</h2>
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Car Data</h1>
    </div>

    <div data-role="content" align="center">
        <canvas id="myBatteryCanvas" width="device-width"
            height="device-height">                        
            Sorry, your browser doesn't support canvas technology        
        </canvas>
    </div>
    <h4 align="center" id="batteryProzent"></h4>

    <script type="text/javascript" src="battery.js"></script>
    <script>$(document).on("pageshow",init());</script> 


    <div data-role="footer" data-position="fixed" data-id="persFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="home.html" data-icon="home">Connect</a></li>
                <li><a href="carView.html" data-icon="gear">Cars</a></li>
                <li><a href="infoView.html" data-icon="info">Info</a></li>
            </ul>
        </div>
    </div>

<script>                                       
$('#dataPageBattery').on('swipeleft',function(){ 
 $.mobile.changePage("geolocation.html", { transition: "slide"});   
 console.log('slideLeft');
})  

$('#dataPageBattery').on('swiperight',function(){ 
 $.mobile.changePage("fuelGauge.html", { transition: "slide", reverse: 'true'});    
 console.log('slideLeft');
})  
     </script>
</div>



    </body>
    </html>

Мой код java-скрипта, который я загружаю:

    var canvas = document.getElementById("myBatteryCanvas");
      var ctx = canvas.getContext("2d");
      var x = 50;
      var y = canvas.height - 30;
      var mx = 2;
      var my = 1;
      var WIDTH = canvas.width;
      var HEIGHT = canvas.height;
     var prozent = 1;

  function drawRect(y, farbe) {
ctx.beginPath();
ctx.rect(124, y, 50, 21);
ctx.fillStyle = farbe;
ctx.fill();

window.setTimeout("draw()", 10);
 }

 function draw() {
if (y >= 80) {
    y -= my;
    window.setTimeout("drawRect(y,'red')", 10);
} else if (y >= 50) {
    y -= my;
    window.setTimeout("drawRect(y,'orange')", 10);
    ctx.rect(124, 50 + 50, 50, 40);
    ctx.fillStyle = 'orange';
    ctx.fill();

} else {
    ctx.rect(124, 50, 50, canvas.height - 60);
    ctx.fillStyle = 'lightgreen';
    ctx.fill();
}

document.getElementById('batteryProzent').innerHTML = '> ' + prozent + ' %';
prozent++;
if (prozent % 4 == 0)
    prozent++;
 }

 function init() {
ctx.rect(122, 40, 54, 100);
ctx.fillStyle = 'floralwhite';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#303030';
ctx.stroke();

draw();
 }

Еще одна приятная проблема :Если я использую эту html-страницу в качестве первой страницы, с которой начинается код Phonegap, проблем не возникает. Но если я использую его во всем приложении, у меня возникают проблемы. По этой причине выкладываю и свою первую страницу:

<!DOCTYPE html> 
<html> 
<head> 
<title> BLE App</title> 
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="Logo.png" />

<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

<style>
   .ui-page { background: black;}
</style>

</head> 
  <body> 

 <div data-role="page" id="mainPage" data-theme="a"> 
<div data-role="header" data-position="fixed" data-theme="a">
    <h1> BLE</h1>
</div><!-- /header -->

<div data-role="content">   
    <!-- <p> BLE Test App</p> -->
    <label for="mainPage_textFrage">Find BLE Devices:</label>
    <!-- <input type="text" id="mainPage_textFrage" value="" placeholder="Ihre Frage"/> -->
    <a data-role=button id="mainPage_showAnswerButton">Search</a>
</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-id="persFooter">
    <div data-role="navbar">
        <ul>
            <li><a href="home.html" data-icon="home">Connect</a></li>
            <li><a href="carView.html" data-icon="gear">Cars</a></li>
            <li><a href="infoView.html" data-icon="info">Info</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->
  </div>

   <script>                                    
$('#mainPage_showAnswerButton').on('click',function(){
 $.mobile.changePage("searchResult.html", { transition: "slideup"});
 console.log('click');
})                                       
 </script>

 </body>
 </html>

Есть кто-нибудь с такими же проблемами? Кто-нибудь может помочь?

Спасибо!

ОБНОВЛЕНИЕ :Я обновил JQuery до 1.7.2 и JQuery Mobile до 1.1.1. Но до сих пор нет никаких изменений. Анимация не работает.

6
задан fluxim 18 July 2012 в 10:22
поделиться