JavaScript 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11213259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript animation
提问by CUDA
I am trying to animate a divmoving 200pxhorizontally in JavaScript.
我正在尝试在 JavaScript 中为水平div移动设置动画200px。
The code below makes it jump the pixels, but is there a way to make it look animated without using jQuery?
下面的代码使它跳跃像素，但有没有办法让它在不使用 jQuery 的情况下看起来动画？
function () {
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = "200px";
}
回答by Niet the Dark Absol
Here is a basic animation setup:
这是一个基本的动画设置：
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;
}
To use:
使用：
animate(
document.getElementById('challengeOneImageJavascript'),
"left","px",0,200,1000
);
This example will animate the given element to slide linearly from 0px to 200px over a time of 1 second (1000 ms).
此示例将动画给定元素在 1 秒（1000 毫秒）的时间内从 0px 线性滑动到 200px。
回答by Calvein
You can easily do this through CSS3-Transition:
您可以通过CSS3-Transition轻松做到这一点：
#challengeOneImageJavascript {
-webkit-transition: left .2s;
-moz-transition: left .2s;
-o-transition: left .2s;
transition: left .2s;
}
Though, it is not supported by IE9 and earlier browser versions.
但是，IE9 和更早的浏览器版本不支持它。
回答by Jefferson Steelflex
I did a ton of research, and I finally learned how to do it really well.
I like to place my program in a window.onload function, that way it dosn't run the code until the page has finished loading.
To do the animation, make a function(I'll call it the draw function) and call it what ever you want except reserved words, then at the very end of the draw function call the requestAnimationFrame function and give it the name of the function to be called next frame.
Before the requestAnimationFrame function can be used it must be declared.
See the code below:
我做了大量的研究，我终于学会了如何做得很好。
我喜欢将我的程序放在 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
}Note:Nothing after the line that calls the draw function will run, so you need to put everything you want to run before the line that calls the draw function.
注意：在调用draw函数的那一行之后不会运行任何东西，所以你需要把所有你想运行的东西放在调用draw函数的那一行之前。
回答by Blaster
With JavaScript, you will have to use setIntervalfunction or this is how it can be done in jQuery:
使用 JavaScript，你将不得不使用setInterval函数，或者这就是它在 jQuery 中的实现方式：
$('#challengeOneImageJavascript').animate({left: '=-5'});
Adust value (5) as per your needs as well as direction via =-or =+
调整值 ( 5) 根据您的需要以及通过=-或=+
With Vanilla JavaScript:
使用原生 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);
}
And you can use it like:
你可以像这样使用它：
animate('challengeOneImageJavascript', 'left', 5, 500, 200);
To stop animation any time, you would do:
要随时停止动画，您可以执行以下操作：
clearInterval(interval);
Note:This just a very quick way to do it to give you an idea.
注意：这只是一种非常快速的方法，可以给您一个想法。
回答by Billy Moon
You would have to use a javascript timeout function, and change the css value a little at a time. The easiest way would be to increment by a set amount each time until a threshold is reached, which would give you a linear animation, which would look clunky and amateurish compared to jQuery's default swinganimation which follows a bezier curve approximately like an s-curve.
您将不得不使用 javascript 超时功能，并一次稍微更改 css 值。最简单的方法是每次增加一个设定的数量，直到达到阈值，这会给你一个线性动画，与 jQuery 的默认swing动画相比，它看起来笨重和业余，它遵循近似于 s 曲线的贝塞尔曲线。
Untested code should do the linear animation
未经测试的代码应该做线性动画
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()
n.b. there are lots of improvements to make to that block of code, but it should get you going...
注意，对该代码块有很多改进，但它应该能让你继续前进......
回答by Pablo Darde
Simplest way via css.
通过css最简单的方法。
https://jsfiddle.net/pablodarde/5hc6x3r4/
https://jsfiddle.net/pablodarde/5hc6x3r4/
translate3d uses hardware acceleration running on GPU. http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
translate3d 使用在 GPU 上运行的硬件加速。 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
HTML
HTML
<div class="movingBox"></div>
CSS
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
JavaScript
const box = document.getElementsByClassName('movingBox')[0];
setTimeout(() => {
box.className += ' moving';
}, 1000);
回答by Chinmoy Samanta
CustomAnimationis a small libary for animating html elements which is written in pure js.You can use this libary.
CustomAnimation是一个用于动画 html 元素的小库，它是用纯 js 编写的。您可以使用这个库。
