账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    android 系统 touch 屏幕导致 js 、css 动画卡顿
    70
    0

    场景

    一款移动 web 小游戏,基于 canvas 实现

    过程

    在 andriod 系统中,当手指接触屏幕任意位置,动画会停顿一下,连续点击时卡顿效果更加明显。

    在 IOS 系统中,没有出现这个问题。

    测试机型

    只列举两个主要机型,其它机型测试效果一致

    • IPHONE 6 PLUS IOS 9.3.3

      • 微信

      • Safari

    • 魅族 MX5 android 5.1

      • 微信

      • 系统浏览器

      • chrome (比系统浏览器更卡)

    例子

    Flappy Bird —— hilo.js 动画库 demo

    其它

    网上一些 h5 营销小游戏,测试后也发现同样的问题。

    项目测试时还发现,如果动画执行过程同时触发 css3 transition,更加明显的卡顿

    问题

    这个是什么原因导致的,有什么好的方法避免

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 甜蜜危机 普通会员 1楼

      在 Android 系统中,触摸屏可能导致 JS 和 CSS 动画卡顿,原因可能有以下几点:

      1. 触摸事件处理:在触摸屏应用程序中,JS 和 CSS 动画通常依赖于用户的手势操作,因此当用户触摸屏幕时,这些动画可能无法正常执行。如果在处理触摸事件时,应用程序的代码中存在阻塞或者循环,就可能导致动画卡顿。

      2. 响应式设计:如果在布局或样式设计中使用了响应式设计,当屏幕尺寸改变时,某些元素的大小和位置可能需要重新计算和布局,这可能会导致动画卡顿。

      3. 虚拟设备性能:Android 系统通常运行在虚拟设备上,这些设备的硬件性能和手机的物理屏幕差异可能会导致一些小的性能问题,例如动画卡顿。

      4. JavaScript和CSS的性能优化:为了提高应用程序的性能,开发者可以使用一些优化技巧,例如减少DOM操作、使用异步加载、减少HTTP请求等。

      为了解决这个问题,开发者需要对应用程序的性能进行优化,同时也要考虑到用户的体验。可以尝试使用一些性能分析工具,例如 Android Studio 的内置性能分析器,或者第三方性能分析工具,来找出性能瓶颈并进行优化。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部