13

我正在尝试在 JavaScript 中为水平div移动设置动画。200px

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

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

7 回答 7

46

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

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。

于 2012-06-26T18:07:32.087 回答
9

您可以通过CSS3-Transition轻松做到这一点：

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

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

于 2012-06-26T18:02:40.553 回答
2

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

我喜欢将我的程序放在 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
}

注意：调用draw函数的那行之后什么都不会运行，所以你需要把你想运行的所有东西都放在调用draw函数的那一行之前。

于 2014-10-29T18:54:53.313 回答
1

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

nb 对该代码块有很多改进，但它应该让你继续......

于 2012-06-26T18:10:56.373 回答
1

使用 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);

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

于 2012-06-26T18:03:14.920 回答
0

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

于 2017-08-16T06:32:20.927 回答
0

通过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);
于 2017-05-10T13:00:11.807 回答