将CSS3动画转换为纯JavaScript

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

这是关于动画的

bounceInUp

from。示例演示：

在，有一个关于如何使用JavaScript制作动画的教程。但是我的数学不是很好，所以我在PhotoShop中制作了一个图表来显示动画应该如何在JavaScript中运行（大约）：

（可以找到其他“Delta”的绘图仪）

是否可以用纯JavaScript从这个图中生成一个数学公式，返回动画的“增量”

我试过一些关于的东西，但并没有真正起作用。（）

编辑： 我设法建立了一个好的数学公式：

-Math.cos（2*Math.PI*progress）+Math.pow（progress，1）*（（1.5+1）*progress-1.5）

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

有关JavaScript动画的实时演示，请参见此处：

---

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

对于您的代码，这只是一个小小的更改： （）

希望这就是你的意思。

看看这是否是朝着正确方向迈出的一步

余弦波

这个数学公式需要重新构造一下。将余弦波逐渐缩小到0的数学方法不太有效：

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

当

进度

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

。。。
...
var isAnimationRunning=false；
...
函数start（）{
if（isAnimationRunning）return；//确保动画尚未运行
isAnimationRunning=true；//设置全局变量
移动（document.getElementById（'frame'），bounce，1200）；
}
onload=函数（）{
start（）；
};
jQuery将为您提供事件和计时器，以及一种动画方法，这将大大简化此过程。否则，您必须自己设置WindowTimeout，并进行这些计算。坦白地说，当jQueryUI有适合自己的东西时，自己实现这一点可能是愚蠢的。如果你真的想自己动手，研究它的来源可能会有所帮助；是的。转换使用
转换
速记属性。动画使用
动画
速记属性和
@关键帧
内部<代码>反弹

起作用@searlea我多么想要它，但是没有CSS3动画，所以我不想，但它看起来就像CSS3动画。谢谢，但图像不会转到“底部”，而是转到“底部”：图像可能转到“底部：±50像素”？哇，谢谢！它现在工作得很好！当进度为1时，我修复了一件事，底部是：

bottom:-0.000000000000002872884785055634px通过添加这个
文档.getElementById（'frame'）.style.bottom=“0px”
则在
之后执行code>已修复。但此问题无关紧要，因为浏览器可能会将其读取为
bottom:0px；
。
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

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