javascript - 将 CSS3 动画转换为纯 JavaScript

Question

我想将一个简单的 CSS3 动画转换为纯 JavaScript(不是在 jQuery 中，因为我认为为这么简单的事情加载整个库有点过分了)。

这是关于动画 bounceInUp 来自 http://daneden.me/animate/ .示例演示:http://jsfiddle.net/ELDf7/

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

在 http://javascript.info/tutorial/animation ，有一个关于如何使用 JavaScript 制作动画的教程。但是我不太擅长数学，所以我在 PhotoShop 中做了一个图表来展示动画应该如何在 JavaScript 中运行(大约):

_{(可以找到其他“deltas”的绘图仪here)}

是否可以在纯 JavaScript 中根据该图创建一个返回动画“增量”的数学公式？

我用 bounce function 做了一些尝试，但它并没有真正起作用。 ( http://jsfiddle.net/ELDf7/2/ )

编辑:我设法做了一个很好的数学公式:

_{-Math.cos(2*Math.PI*progress) + Math.pow(progress, 1) * ((1.5 + 1) * progress - 1.5);}

但现在我遇到了另一个问题，动画从显示一半图像开始，而不是隐藏整个图像，就像 CSS3 动画一样。

有关 JavaScript 动画的现场演示，请参见此处:http://jsfiddle.net/ELDf7/14/

有谁知道我如何更改它以便最初完全隐藏图像？也许可以创建一个包含图像高度的变量，然后 JavaScript 进行计算，以便动画在图像出现一半时才开始。

Answer 1

看看这个updated demo是朝着正确方向迈出的一步。

余弦波

数学公式需要稍微重构一下。逐渐将余弦波缩小到 0 的数学方法不太奏效:

return -Math.cos(2.5 * Math.PI * progress) * Math.pow(0.33, progress * 2.5) * 3;

当 progress 从 0 变为 1 时，公式和 bottom 的示例值:

progress    formula    bottom
--------    -------    -------
  0.0        -3.0      -150px
  0.2         0.0         0px
  0.4         1.0        50px
  0.6         0.0         0px
  0.8        -0.3       -17px
  1.0         0.0         0px

start() 函数

我添加了一个start() 函数，它在页面首次加载和单击图像时使用。此函数在开始动画之前检查全局变量以确保动画尚未运行。动画结束时重置全局变量。或者，可以取消当前动画并开始一个新动画。但它必须是其中之一，以避免同时运行多个动画，这在视觉上看起来很糟糕。

<div onclick="start()">...</div>
...
var isAnimationRunning = false;
...
function start(){
    if (isAnimationRunning) return; // Make sure an animation isn't already running
    isAnimationRunning = true;      // Set the global variable
    move(document.getElementById('frame'), bounce, 1200);
}
onload = function() {
    start();
};