本机javascript中的动画
如何在本地javascript中运行动画(如更改CSS属性),而不使用jQuery库的动画方法?? 我已经尝试了jQuery库动画制作,帧速率间隔改变使我的动画流畅。本机javascript中的动画,javascript,Javascript,如何在本地javascript中运行动画(如更改CSS属性),而不使用jQuery库的动画方法?? 我已经尝试了jQuery库动画制作,帧速率间隔改变使我的动画流畅。 提前感谢CSS3可以使用转换自动为大多数样式属性的更改设置动画。它可能会比任何基于javascript的动画运行得更流畅 关于如何使用它,有一个很好的教程。这里是一个简短的演示: function fade(element, started) { if (element.style.opacity > 0){
提前感谢CSS3可以使用
转换
自动为大多数样式属性的更改设置动画。它可能会比任何基于javascript的动画运行得更流畅
关于如何使用它,有一个很好的教程。这里是一个简短的演示:
function fade(element, started) {
if (element.style.opacity > 0){
console.log(element.style.opacity);
element.style.opacity -= 0.02;
setTimeout((function(e){return function(){fade(e);}})(element),10);
}
}
fade(document.getElementById("myname"));
下面是一个JSFIDLE:下面是一个示例:
jQuery是开源的,为什么不看看他们的技术呢?为什么不使用CSS3转换呢?它更快。跨浏览器兼容性是一个我无法忽视的问题,解决这个问题:
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);