封装一个动画函数

https://www.bilibili.com/video/BV1kt421K7Zd/?spm_id_from=333.1391.0.0

定时器思路

var e = document.getElementById("e");
var flag = true;
var left = 0;
setInterval(() => {
	left == 0 ? (flag = true) : left == 100 ? (flag = false) : "";
	flag ? (e.style.left = ` ${left++}px`) : (e.style.left = ` ${left--}px`);
}, 1000 / 60);

requestAnimationFrame

//兼容性处理
window.requestAnimFrame = (function () {
	return (
		window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		function (callback) {
			window.setTimeout(callback, 1000 / 60);
		}
	);
})();

var e = document.getElementById("e");
var flag = true;
var left = 0;

function render() {
	left == 0 ? (flag = true) : left == 100 ? (flag = false) : "";
	flag ? (e.style.left = ` ${left++}px`) : (e.style.left = ` ${left--}px`);
}

(function animloop() {
	render();
	requestAnimFrame(animloop);
})();