个人中心
gpt4 book ai didi

android - CSS3 KeyFrame Translate Animation - Android 严重跳帧

转载 作者：行者123 更新时间：2023-11-28 15:36:06 24 4
gpt4 key购买 nike

非常令人惊讶的是，一个简单的翻译动画(在一个小矩形上)在 Android 2.2 浏览器上跳帧。它甚至不是每秒 10 帧。手机是三星 Galaxy Ace (S5830)。图像上没有其他动画。下面附上代码。我是不是做错了什么，因为我从没想过这么简单的翻译动画会这么糟糕。请提出一些可以接受的平滑度的解决方法

<html>
  <head>
    <style type="text/css">

    #di1, #ci1 {position: absolute;left:0px;top:0px;-webkit-transform-origin: 0% 0%;}

.anim1{
    -webkit-animation-duration: 5s;
    -webkit-animation-name: animation1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count:1 ;

}

@-webkit-keyframes animation1
{
    0%{ -webkit-transform: translate(25px, 25px) }
    50%{ -webkit-transform: translate(200px, 00px) }
    100%{ -webkit-transform: translate(0px, 200px) }
}

</style>

<script type="text/javascript">

    window.addEventListener("load",win_load,false);

    function win_load()        
    {
        var c=document.getElementById("ci1");var ctx=c.getContext("2d");
        ctx.fillStyle="#ff0000";
        ctx.fillRect(25,25,30,30);

    }

</script>

最佳答案

这是 hacky 解决方法。

在转换规则中添加

rotateZ(0deg);

这样就变成了

-webkit-transform:rotateZ(0deg) translate(30,40);

这会强制 webkit 使用可用的硬件加速，并逐位提高性能。

尽管没有任何保证可以使它起作用。

在 android 3.x 之后动画变得流畅，试试吧。

关于android - CSS3 KeyFrame Translate Animation - Android 严重跳帧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11505201/

24 4 0
文章推荐： ios - 更改 rootviewcontroller 后快速导航 Controller 返回 nil
文章推荐： ios - 当用户点击图表时添加点 - 'LineChartView' (iOS-Charts)
文章推荐： swift - 用于多阶段蓝牙命令的 RxBluetoothKit 代码模式
文章推荐： swift - 用一个函数返回几个结果
行者123
个人简介

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

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