原生javascript中的动画 [英] animation in native javascript
本文介绍了原生javascript中的动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在不使用jQuery库的animate方法的情况下在本机javascript中运行动画(如更改CSS属性)?
我尝试过jQuery库动画,帧速率间隔发生变化,使我的动画流畅。
提前致谢
How do i run an animation(like changing CSS properties) in native javascript without using jQuery library's animate method?? I have tried jQuery library animate and the framerate interval changes to make my animation fluid. Thanks in advance
推荐答案
以下是一个例子:
function animate(object, property, start_value, end_value, time) {
var frame_rate = 0.06; // 60 FPS
var frame = 0;
var delta = (end_value - start_value) / time / frame_rate;
var handle = setInterval(function() {
frame++;
var value = start_value + delta * frame;
object.style[property] = value + "px";
if (value == end_value) {
clearInterval(handle);
}
}, 1 / frame_rate);
}
animate(document.getElementById("a"), "top", 0, 100, 1000);
这篇关于原生javascript中的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文