📅 最后修改于: 2023-12-03 15:28:56.539000 🧑 作者: Mango
如果你是一位程序员，你一定经历过让用户等待的尴尬情境。为解决这个问题，我们通常会加入一个进度条来让用户知道程序正在运行，但是，仅有进度条还不能完全解决问题。因为一些运行时间较长的程序，进度条也会让用户感到乏味，需要更加丰富有趣的交互设计。
这时，颤动滚动至结束（Shake & Scroll Till Done）这一设计模式应运而生，它可以为用户提供更好的交互体验。
首先我们考虑一个标准的进度条与传统的等待界面交互。一般情况下一个进度条由一个或多个矩形组成，动态改变矩形的长度或宽度，从而表现出进度值的变化。这种方式实际上是不够精彩的，因为它仅仅是单调的从左到右、从上到下的动画，并没有给用户提供任何额外的信息。
现在我们就可以尝试一种新的交互方式——颤动滚动到结束。这种方式不仅可以提示用户程序正在运行，同时也可以通过颤动和滚动的动画方式对操作过程进行描述。
下面是一个使用CSS和HTML实现颤动滚动到结束动画效果的代码片段：
<!DOCTYPE html>
<html>
<head>
<title>Shake & Scroll Till Done</title>
<style>
@keyframes shake {
10%, 90% {
transform: translateX(-10px);
}
20%, 80% {
transform: translateX(10px);
}
30%, 50%, 70% {
transform: translateX(-10px);
}
40%, 60% {
transform: translateX(10px);
}
}
.progress {
background-color: #f5f5f5;
border-radius: 13px;
height: 26px;
overflow: hidden;
width: 100%;
}
.progress-bar {
animation: shake 2s linear infinite;
background-color: #5cb85c;
height: 100%;
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar"></div>
</div>
</body>
</html>
在这段代码中，我们首先定义了一个名为“shake”的关键帧动画，通过连续的变化实现颤动的效果。接下来，我们创建了一个进度条容器，其中包含了一个进度条元素。我们将进度条元素的宽度属性从0%到100%的变换改变为0%到85%，以模拟程序的运行过程。最后我们添加了 .progress-bar 元素的过渡属性，使进度条元素变化更加平滑。
通过这种交互方式，不仅可以让用户更好地了解程序的运行状态，同时也可以通过动画和颤动的形式使等待过程更加生动和有趣。
参考文献：