CSS3 KeyFrame 翻译动画 - Android 中的严重跳帧答案

【问题标题】：CSS3 KeyFrame Translate Animation - Severe Frame Skipping in AndroidCSS3 KeyFrame 翻译动画 - Android 中的严重跳帧
【发布时间】：2012-07-17 16:09:31
【问题描述】：

一个简单的翻译动画（在一个小矩形上）在 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>

【问题讨论】：

但仅在一个方向上的动画，即仅在 x 方向或 y 方向上平移的质量是可以接受的。有斜坡的那一刻，所有的地狱都失去了，动画很可悲
什么版本的 Android 会变得更好和可以接受

标签： android html css jquery-mobile css-animations

【解决方案1】：

这是 hacky 解决方法。

在变换规则中添加

rotateZ(0deg);

这样就变成了

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

这会强制 webkit 在可用的情况下使用硬件加速，并提高性能。

虽然没有任何保证可以做到这一点。

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

【讨论】：

这个技巧不起作用，因为硬件加速在具有 Android 2.2 的三星 Galaxy Ace (S5830) 中不起作用
是的，我确实尝试过，但有用的信息表明该技巧适用于 Galaxy Y。另一个信息是，当我删除 50% 关键帧时没有问题。
那你为什么不用 css-transition 和 JavaScript 来做呢？你可以让它在帧中翻译，然后应用其他帧，是的，这听起来非常愚蠢，但可能会起作用，因为它不必计算整个动画只需 1 个过渡（或 1 种过渡方法）
因为我发布的只是一个示例。我有更复杂的动画，包含 100 个关键帧，并将其分解为通过 javascript 应用的过渡会使动画变慢
嗯。 100 个关键帧当然会减慢您的动画速度，请考虑设备规格！