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（大约）中运行：

Plot

_{（可以找到其他'增量'的图表绘图仪here）}

是否可以在纯JavaScript中使用此图形制作数学公式，以返回动画的“delta”？

我用bounce function尝试了一些东西，但它确实没用。（http://jsfiddle.net/ELDf7/2/）

修改我设法做了一个很好的数学公式：

Plot 2

_{-Math.cos（2 * Math.PI *进度）+ Math.pow（进度，1）*（（1.5 + 1）*进度 - 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";    
}

希望这就是你的意思。

将CSS3动画转换为纯JavaScript

2 个答案: