JavaScript动画JavaScript动画(JavaScript animation)

我想动画一个div移动200px在JavaScript水平。

下面的代码使得它跳的像素，但有没有办法让它看上去不动画使用jQuery？

function () {
    var div = document.getElementById('challengeOneImageJavascript');
    div.style.left = "200px";
}

Answer 1:

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

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毫秒）的时间线性地从0像素滑动至200像素。

Answer 2:

你可以很容易地通过做到这一点CSS3，转变 ：

#challengeOneImageJavascript {
    -webkit-transition: left .2s;
       -moz-transition: left .2s;
         -o-transition: left .2s;
            transition: left .2s;
}

虽然，它不是由IE9和更早版本的浏览器支持。

Answer 3:

我做了一吨的研究，我终于学会了如何做到这一点非常好。

我喜欢把我的计划中的window.onload函数，它不到风度运行代码，直到页面加载完成的方式。

做动画，做一个函数（我称之为绘制函数），并调用它，你什么都想要，除了保留字，然后在绘制函数的最后调用requestAnimationFrame功能，并给它的函数的名称被称为下一帧。

可以使用requestAnimationFrame功能之前，必须申报。

请参见下面的代码：

 window.onload = function() { function draw() { // declare animation function context.fillStyle = "white"; context.fillRect(0, 0, 400, 400); requestAnimationFrame(draw); // make another frame } var requestAnimationFrame = // declare the window.requestAnimationFrame || // requestAnimationFrame window.mozRequestAnimationFrame || // function window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; draw(); // call draw function } 

注：调用绘制函数将运行线后没有什么，所以你需要把你想要调用绘制函数行之前运行的一切。

Answer 4:

你将不得不使用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()

注：有很多的改进，做出的代码块，但它应该让你去...

Answer 5:

使用JavaScript，你将不得不使用setInterval函数或这是怎么能在jQuery的完成：

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

Adust值（ 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);

注意： 这只是一个非常快速的方法来做到这一点给你的想法。

Answer 6:

通过CSS最简单的方法。

https://jsfiddle.net/pablodarde/5hc6x3r4/

translate3d使用硬件加速运行在GPU上。 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

HTML

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

CSS

.movingBox {
  width: 100px;
  height: 40px;
  background: #999;
  transform: translate3d(0,0,0);
  transition: all 0.5s;
}

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

JavaScript的

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

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

Answer 7:

CustomAnimation为动画，其是用纯js.You可以使用此libary html元素一个小libary。

文章来源: JavaScript animation