7

我想将一个简单的 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 中运行（大约）：

阴谋

（可以在此处找到其他“增量”的绘图仪）

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

我用反弹功能尝试了一些东西，但它并没有真正起作用。( http://jsfiddle.net/ELDf7/2/ )

编辑： 我设法制作了一个很好的数学公式：

情节 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 进行计算，以便动画在图像出现一半之前不会开始。

4

2 回答 2

2

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

余弦波

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

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

公式 和 的样本值，bottom从progress0 到 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();
};
于 2013-04-07T16:24:56.093 回答
0

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

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

希望这就是你的意思。

于 2013-04-07T14:18:45.777 回答