JavaScript animation

JavaScript animation

本文关键字：animation JavaScript      更新时间：2023-09-26

我正在尝试在JavaScript中水平移动200px div进行动画处理。

下面的代码使它跳跃像素，但是有没有办法在不使用jQuery的情况下使其看起来动画化？

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

下面是一个基本的动画设置：

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。

您可以通过CSS3-Transition轻松执行此操作：

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

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

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

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

要做动画，做一个函数（我称之为 draw 函数）并随心所欲地调用它，除了保留字，然后在绘制函数的最后调用 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 函数的行之前。

你必须使用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()

注意：该代码块有很多改进要做，但它应该让你开始......

使用

JavaScript，你必须使用setInterval函数，或者这就是在 jQuery 中完成它的方式：

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

粉尘值（5）根据您的需要以及通过=-或=+的方向

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

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

最简单的方法通过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);

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

相关文章：