JavaScript动画

我试图用JavaScript水平移动

200px

来制作

div

的动画

下面的代码使它跳转像素，但是有没有办法不使用jQuery使它看起来像动画

函数（）{
var div=document.getElementById（'challengeOneImageJavascript'）；
div.style.left=“200px”；
}

您可以通过以下方式轻松完成：

---

但是，IE9和早期浏览器版本不支持它。

使用JavaScript时，必须使用

setInterval

函数，或者在jQuery中可以这样做：

$('#challengeOneImageJavascript').animate({left: '=-5'});

根据您的需要以及通过

=-

或

=+

使用香草JavaScript:

var interval;
var animate = function(id, direction, value, end, speed){
    var div = document.getElementById(id);
    interval = setInterval(function() {
       if (+(div.style) === end) {
          clearInterval(interval);
          return false;
       }
       div.style[direction] += value; // or -= as per your needs
    }, speed);
}

你可以像这样使用它：

animate('challengeOneImageJavascript', 'left', 5, 500, 200);

要随时停止动画，请执行以下操作：

clearInterval(interval);

---

注意：这是一种非常快速的方法，可以给你一个想法。

这里是一个基本的动画设置：

function animate(elem,style,unit,from,to,time) {
    if( !elem) return;
    var start = new Date().getTime(),
        timer = setInterval(function() {
            var step = Math.min(1,(new Date().getTime()-start)/time);
            elem.style[style] = (from+step*(to-from))+unit;
            if( step == 1) clearInterval(timer);
        },25);
    elem.style[style] = from+unit;
}

使用：

animate(
    document.getElementById('challengeOneImageJavascript'),
    "left","px",0,200,1000
);

---

此示例将设置给定元素的动画，使其在1秒（1000毫秒）的时间内从0px线性滑动到200px。

您必须使用javascript超时函数，并一次稍微更改css值。最简单的方法是每次递增一个设定的量，直到达到一个阈值，这将为您提供一个线性动画，与jQuery的默认

swing

动画相比，它看起来既笨重又业余，该动画遵循贝塞尔曲线，近似于s曲线

未测试的代码应该执行线性动画

var lefty = 0;
var animate = function(){
    lefty += 20;
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = lefty +"px";
    if(lefty < 200)
      setTimeout(animate(),100);
}

animate()

var lefty=0；
var animate=函数（）{
lefty+=20；
var div=document.getElementById（'challengeOneImageJavascript'）；
div.style.left=lefty+“px”；
if（lefty<200）
setTimeout（animate（），100）；
}
制作动画（）

---

n、 b.对这段代码有很多改进，但它应该能让你继续…

我做了大量的研究，终于学会了如何把它做好。

我喜欢将我的程序放在window.onload函数中，这样在页面加载完成之前它不会运行代码。

要制作动画，请创建一个函数（我将其称为draw函数），并根据需要调用它（保留字除外），然后在draw函数的最后调用requestAnimationFrame函数，并为其指定下一帧要调用的函数的名称。

在使用requestAnimationFrame函数之前，必须先声明它。

请参阅下面的代码：

window.onload=function（）{
函数draw（）{//声明动画函数
context.fillStyle=“白色”；
fillRect（0,040400）；
requestAnimationFrame（绘制）；//制作另一帧
}
var requestAnimationFrame=//声明
window.requestAnimationFrame | |//requestAnimationFrame
window.mozRequestAnimationFrame | |//函数
window.webkitRequestAnimationFrame||
window.msRequestAnimationFrame；
draw（）；//调用draw函数
}

通过css的最简单方式

translate3d使用GPU上运行的硬件加速。

HTML

<div class="movingBox"></div>

JavaScript

const box = document.getElementsByClassName('movingBox')[0];

setTimeout(() => {
    box.className += ' moving';
}, 1000);

---

---

是一个用纯js编写的html元素动画库。你可以使用这个库。

看看这个@Huangism，他问没有jquery怎么做。他说“没有jquery”哦，是的，刚才看到了，他为什么要在其中标记jquery！我选择不使用jQuery，并删除了标签，以避免在支持CSS的浏览器中出现混淆，请指定这是css3 onlyyeah-这个答案，尽管被投了很多票，但它是未来的答案，并且只受最新浏览器的支持。它将立即在不受支持的浏览器中移动。由于这些浏览器的运行速度非常慢，也许调低其中的动画效果并不是那么糟糕。CSS

转换对我来说很平滑，Javascript
setInterval
（无论多么小）总是会产生不稳定的结果。我担心OP想要一个Javascript非Jquery解决方案。CSS版本无法与所有IE一起工作，而这应该适用于几乎所有的浏览器。GJ非常彻底的实现，具有许多功能。。。像ITIF这个答案解决了你的问题，请考虑将它标记为通过点击右下方的大选中标记来接受；这很好用，谢谢！您将如何在其中实现易用性？好吧，这些都是在我发现CSS3转换之前编写的。此时，我强烈建议您使用过渡而不是手动设置动画，因为这为您提供了一个设置动画的方法。有了它，您只需要使用JavaScript来执行
document.getElementById（“…”）.style.left='200px'，它将自动设置动画。@neoDev该行作为动画的第一个“帧”，因为间隔不会在该点运行。如果元素已经在第一帧的正确位置，它将没有可见的效果但是我正在努力学习Javascript，我知道的最好的方法是先努力学习，请解释更多。你可以查看repo中提供的示例。例如，要设置一个元素的动画，必须在以下模式中调用animate方法。设置动画（元素对象、样式对象、持续时间）；虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。
.movingBox {
  width: 100px;
  height: 40px;
  background: #999;
  transform: translate3d(0,0,0);
  transition: all 0.5s;
}

.moving {
  transform: translate3d(200px,0,0);
  background: #f00;
}

const box = document.getElementsByClassName('movingBox')[0];

setTimeout(() => {
    box.className += ' moving';
}, 1000);