将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中运行(大约):

_{(其他'增量'的图形绘图仪可以在这里找到)}

是否有可能在返回动画"delta"的纯JavaScript中使用此图形制作数学公式？

我已经尝试了一些弹跳功能,但它并没有真正起作用.(http://jsfiddle.net/ELDf7/2/)

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

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

但是现在我还有另外一个问题,动画开始时会显示一半的图像,而不是隐藏整个图像,就像CSS3动画一样.

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

有谁知道我怎么能改变它,以便最初完全隐藏图像？也许可以创建一个包含图像高度的变量,然后JavaScript进行计算,以便在图像的一半出现之前动画不会开始.

Answer 1

看看这个更新的演示是否是朝着正确方向迈出的一步。

余弦波

数学公式需要稍微重构一下。将余弦波逐渐缩小到 0 的数学运算不太有效：

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

公式 和 的样本值bottom，progress从 0 到 1：

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

<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();
};