个人中心
gpt4 book ai didi

android - 更新到 Android Jelly Beans 后重复的动画

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:01:25 25 4
gpt4 key购买 nike

我正在使用 JQuery 1.1.0 和 Phonegap 1.9.0 为 Android 开发一个 html5 应用程序。我有一个小动画，它在 Canvas 上绘制电池并更新它。它看起来像一个正在加载的电池。它在 android 4.0.4 上运行良好。

昨天我在我的 Galaxy Nexus 上收到了 Android 4.1.1 的更新。在那次改变之后，我的动画出现了问题。现在它在 Canvas 上绘制图像，一个在前面，另一个在后面，坐标错误。我认为这与 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。但是还是没有变化。动画不工作。

最佳答案

可能的解决方案:

从 jquery-mobile-css 中删除以下行可消除问题:

/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }

(删除“overflow-x: hidden”就足够了)。

更好的解决方案是覆盖周围的 div 元素(而不是 Canvas 元素本身)的“overflow-x”属性。

示例(电池状态):

<div data-role="content" align="center" data-theme="a" style="overflow-x: visible">
 <canvas id="myBatteryCanvas" width="device-width" height="device-height">                        
    Sorry, your browser doesn't support canvas technology        
 </canvas>
</div>

另见 http://code.google.com/p/android/issues/detail?id=35474

关于android - 更新到 Android Jelly Beans 后重复的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11535413/

25 4 0
文章推荐： 没有代理的 Android 不工作？
文章推荐： javascript - 如何通过相对路径获取 URL？ - Javascript
文章推荐： c# - 安卓手机浏览器检测
文章推荐： javascript - 体素世界中的“剔除”
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com