请使用firefox,chrome等最新浏览器浏览本站。

web中动画实现的方式总结

css3 阿豹 334次浏览 0个评论 扫描二维码

在HTML5/CSS3S时代,在web中实现动画的方式有很多。

1.使用css3的animation + @keyframe

demo:

.animated {
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.duration0-2{
	-webkit-animation-duration: 0.2s;
	animation-duration: 0.2s;
}

.duration0-6{
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.animated.delay1{
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes slideInDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.slideInDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown;
}

2.使用css3的transition实现

demo:

element{
    -webkit-transition: all linear 1s;
    transition: all linear 1s;
}

3.使用jquery,zepto相关api实现

4.window.setTimout()或者window.setInterval()

使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。

5.使用requestAnimationFrame

requestAnimationFrame跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。
基本语法:

可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。
requestAnimationFrame(callback)//callback为回调函数

demo:

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var progress = 0;
function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);

为了让requestAnimationFrame兼容老的浏览器,我们可以写一些代码让浏览器在不支持requestAnimationFrame的情况下使用window.setTimeout(),这是一种回退(fallback)到过去的方法。

(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];
	for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
		window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
	}
	if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
		var currTime = new Date().getTime();
		var timeToCall = Math.max(0, 16 - (currTime - lastTime));
		var id = window.setTimeout(function() {
			callback(currTime + timeToCall);
		}, timeToCall);
		lastTime = currTime + timeToCall;
		return id;
	};
	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
		clearTimeout(id);
	};
})();

喜欢 (6)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到