requestAnimationFrame用法及说明

requestAnimationFrame它是请求动画帧,以浏览器的显示帧率来作为其动画动作的频率。比如浏览器每16.7ms刷新一次,动画回调也会每16.7ms调用一次

用法:requestAnimationFrame(callback);

该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行,回调函数执行次数通常与 浏览器屏幕刷新次数 相匹配。

终止执行

window.cancelAnimationFrame() 可以取消回调函数。 只需要把 requestAnimationFrame 的返回值作为参数传递给 cancelAnimationFrame 就可以了

requestAnimationFrame 与 setTimeout 、 setInterval用来做动画的优缺点

setTimeout 和 setInterval 的问题是,它们不够精确。它们的内在运行机制决定了 时间间隔参数 实际上只是指定了把动画代码添加到 浏览器UI线程队列 中以等待执行的时间。如果队列前面已经加入了其它任务,那动画代码就要等前面的 任务完成后 再执行,并且如果时间间隔过短(小于16.7ms)会造成丢帧,所以就会导致动画可能不会按照预设的去执行,降低用户体验。

requestAnimationFrame 采用 浏览器时间间隔 ,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,消耗性能;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个 统一 的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。

        
当前进度:0%
            const btn = document.getElementById('btn');
			const test = document.getElementById('test');

			//使用 requestAnimationFrame 实现
			btn.onclick = function() {
				var timer = requestAnimationFrame(function fn() {
					if (parseInt(test.style.width) < 300) {
						test.style.width = parseInt(test.style.width) + 3 + 'px';
						progress.innerHTML = parseInt(test.style.width) / 3 + '%';
						timer = requestAnimationFrame(fn);
					} else {
						cancelAnimationFrame(timer);
					}
				});
			}

			//使用 setInterval 实现
			btn.onclick = function() {
				var timer = setInterval(function() {
					if (parseInt(test.style.width) < 300) {
						test.style.width = parseInt(test.style.width) + 3 + 'px';
						progress.innerHTML = parseInt(test.style.width) / 3 + '%';
					} else {
						clearInterval(timer);
					}
				}, 17);
			}

			//使用 setTimeout 实现
			btn.onclick = function() {
				var timer = setTimeout(function fn() {
					if (parseInt(test.style.width) < 300) {
						test.style.width = parseInt(test.style.width) + 3 + 'px';
						progress.innerHTML = parseInt(test.style.width) / 3 + '%';
						timer = setTimeout(fn, 17);
					} else {
						clearTimeout(timer);
					}
				}, 17);
			}

浏览器渲染有个渲染时机(Rendering opportunity)的问题,也就是浏览器会根据当前的浏览上下文判断是否进行渲染,它会尽量高效,只有必要的时候才进行渲染,如果没有界面的改变,就不会渲染。按照规范里说的一样,因为考虑到硬件的刷新频率限制、页面性能以及页面是否存在后台等等因素,有可能执行完 setTimeout 这个 task 之后,发现还没到渲染时机,所以 setTimeout 回调了几次之后才进行渲染

requestAnimationFrame 的使用场景

在大数据渲染过程中,比如表格的渲染,如果不进行一些性能策略处理,就会出现 UI 冻结现象,用户体验极差。有个场景,将后台返回的十万条记录插入到表格中,如果一次性在循环中生成 DOM 元素,会导致页面卡顿5s左右。这时候我们就可以用 requestAnimationFrame 进行分步渲染,确定最好的时间间隔,使得页面加载过程中很流畅。

            var total = 10000;
            var size = 100;
            var count = total / size;
            var done = 0;
            var ul = document.getElementById('list');

            function addItems() {
                var li = null;
                var fg = document.createDocumentFragment();
                for (var i = 0; i < size; i++) {
                    li = document.createElement('li');
                    li.innerText = 'item ' + (done * size + i);
                    fg.appendChild(li);
                }
                ul.appendChild(fg);
                done++;
                if (done < count) {
                    requestAnimationFrame(addItems);
                }
            };
            requestAnimationFrame(addItems);

CSS 动画原理

根据上面的原理我们知道,你眼前所看到图像正在以每秒 60 次的频率绘制,由于频率很高,所以你感觉不到它在绘制。而 动画本质就是要让人眼看到图像被绘制而引起变化的视觉效果,这个变化要以连贯的、平滑的方式进行过渡。 那怎么样才能做到这种效果呢? 60Hz 的屏幕每 16.7ms 绘制一次,如果在屏幕每次绘制前,将元素的位置向左移动一个像素,即1px,这样一来,屏幕每次绘制出来的图像位置都比前一个要差1px,你就会看到图像在移动;而由于人眼的视觉停留效应,当前位置的图像停留在大脑的印象还没消失,紧接着图像又被移到了下一个位置,这样你所看到的效果就是,图像在流畅的移动。这就是视觉效果上形成的动画。

你可能感兴趣的:(html5,javascript,css,html)