我正在尝试在 JavaScript 中为水平div移动设置动画200px。
下面的代码使它跳跃像素，但有没有办法让它在不使用 jQuery 的情况下看起来动画？
function () {
var div = document.getElementById('challengeOneImageJavascript');
div.style.left = "200px";
}
JavaScript 动画
IT技术
javascript
animation
2021-03-05 12:08:13
6个回答
这是一个基本的动画设置：
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根据您的需要以及通过=-或 的方向调整值 ( )=+
使用原生 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);
注意： 这只是一种非常快速的方法，可以给您一个想法。