将 CSS3 动画转换为纯 JavaScript

Question

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

这是关于来自http://daneden.me/animate/ 的动画bounceInUp。示例演示：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;

公式和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() 函数

我添加了一个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();
};

Answer 2

鉴于您的代码，这只是一个小改动： (http://jsfiddle.net/ELDf7/17/)

step: function(delta) {
  var animationHeight = to + element.scrollHeight
  element.style.bottom = (animationHeight * delta) + "px";    
}

希望这就是你的意思。