Анимация сортировки интерфейса моделирования Ctrip

внешний интерфейс алгоритм

В письменном тесте Ctrip прошлой ночью третий вопрос заключался в том, чтобы смоделировать шаг сортировки, то есть выразить процесс сортировки в виде анимации.

то есть этот эффект

В первую очередь мне нравится эта тема от Ctrip.Это тема, которую должен делать фронтенд.Он не только интересен,но и рассматривает алгоритм сортировки,а так же рассматривает некоторые анимации и операции dom. Без лишних слов, давайте проанализируем эту тему.

Во-первых, это основная структура страницы.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>排序动画演示</title>
</head>
<body>
	<div class="container">

	</div>
</body>
</html>

Затем добавьте стиль к элементам, которые нужно отсортировать.

.container{
    text-align:center;
}
.sort{
    position:absolute;
    width:50px;
    height:50px;
    line-height:50px;
    border:1px solid black;
    transition:1s; 
}

Почему абсолютное позиционирование?Во-первых, абсолютное позиционирование может удерживать элементы вне потока документов, что может минимизировать перестановку, а положение абсолютного позиционирования легко вычислить, поэтому здесь используется абсолютное позиционирование, конечно, возможно и фиксированное. Тогда самое главное, что продолжительность анимации установлена ​​на 1с

Затем сначала выведите элементы для сортировки в интерфейс

var arr = [5,4,8,9,6,5,4,12,3,6,7,8,56];
var container = document.querySelector('.container');
var fragment = document.createDocumentFragment(); // 创建文档片段，尽量减少重绘和重排
var len = arr.length;
for(let i = 0; i < len; i++ ){
    var node = document.createElement('div');
    node.className = 'sort';
    node.id = i; // 这个后面移动位置的时候需要用到
    node.style.left = i * 60 + 'px';
    fragment.append(node);
}
container.append(fragment);

Пока что элементы, подлежащие сортировке, выводятся на страницу первыми.

Затем приступайте к обработке сортировки. Здесь используется пузырьковая сортировка. Обычная структура пузырьковой сортировки выглядит следующим образом.

for(let i = 0; i < len; i++){
    for(let j = 0; j < len - i; j++){
    	if(arr[j] > arr[j+1]){
    	    // 这里使用了 ES6 的解构赋值，即交换两个元素的值
    		[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
    		// 也可以这样
    		/*
    		    var temp = arr[j];
    		    arr[j] = arr[j+1];
    		    arr[j+1] = temp;
    		*/
    	}
    }
}

Присвоение деструктурирования по-прежнему очень полезно, рекомендуется использовать присваивание структуры

Итак, что мы должны сделать, чтобы добиться анимации пузырьковой сортировки.

Сначала нам нужно получить длину двух элементов, которые нужно поменять местами слева, а затем поменять местами длину двух элементов.Место нахождения, помните, что ранее мы присваивали идентификаторы элементам, мы можем найти эти два элемента по идентификаторам.

var x = document.getElementById(j)	
var y = document.getElementById(j+1);
// 这里同样采用解构赋值
[x.style.left,y.style.left] = [y.style.left,x.style.left];
// 记得 id 也要交换
[x.id,y.id]=[y.id,x.id];

До сих пор мы сделали все, что нужно было сделать, но если мы добавим этот код непосредственно в пузырьковую сортировку, мы увидим эффект сортировки напрямую, и мы не можем видеть промежуточный процесс, так как же мы можем увидеть? процесс сортировки, мы можем использовать setTimeout в это время.

Код для пузырьковой части выглядит следующим образом

var time = 1;
for(let i = 0; i < len; i++){
	for(let j = 0; j < len - i; j++){
		if(arr[j] > arr[j+1]){
			[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
			setTimeout(function(){
				var x = document.getElementById(j)	
				var y = document.getElementById(j+1);
				[x.style.left,y.style.left] = [y.style.left,x.style.left];
				[x.id,y.id] = [y.id,x.id];
			},time * 1000)
			time++;
		}

	}
}

Время для отображения эффекта каждый раз.Если это только 1000, то анимация будет завершена в течение 1 с.Если вы не уверены, вы можете просмотреть соответствующие знания о цикле событий.

На этом код заканчивается

адрес предварительного просмотра

весь код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>排序</title>
	<style>
		.container{
			text-align: center;
		}
		.sort{
			transition: 1s;
			height: 50px;
			width: 50px;
			border: 1px solid black;
			line-height: 50px;
			position: absolute;
		}
	
	</style>
</head>
<body>
	<div class="container">
	</div>
	<script>
		var arr = [5,4,8,9,6,5,4,12,3,6,7,8,56];
		var container = document.querySelector('.container');
		var fragment = document.createDocumentFragment();
		var len = arr.length;
		for(let i = 0; i < len;i++){
			var temp = document.createElement('div');
			temp.className = 'sort';
			temp.style.left = i*60 +'px';
			temp.id = i;
			temp.innerHTML = arr[i];
			fragment.append(temp);
		}
		container.append(fragment);
		var time = 1;
			for(let i = 0; i < len; i++){
				for(let j = 0; j < len - i; j++){
					if(arr[j] > arr[j+1]){
						[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
						setTimeout(function(){
							var x = document.getElementById(j)	
							var y = document.getElementById(j+1);
							[x.style.left,y.style.left] = [y.style.left,x.style.left];
							[x.id,y.id] = [y.id,x.id];
						},time * 1000)
						time++;
					}
				}
			}
	</script>
</body>
</html>
Категории