visual-studio-code - editor.cursorBlinking 有什么作用？

Question

文档说 editor.cursorBlinking 的选项是“blink”、“smooth”、“phase”、“expand”和“solid”。它没有描述每一个的含义。

它们分别有什么作用？

Answer 1

额外的光标动画想法详细here ，它指向一个 JSFiddle showing the five new options .以下样式显示了每个样式的作用:

@keyframes blink  {   0%,  49% { opacity: 0; }
                     51%, 100% { opacity: 1; }
}
@keyframes smooth {   0%,  20% { opacity: 0; }
                     60%, 100% { opacity: 1; }
}
@keyframes phase  {   0%,  20% { opacity: 0; }
                     90%, 100% { opacity: 1; }
}
@keyframes expand {   0%,  20% { transform: scaleY(0); }
                     80%, 100% { transform: scaleY(1); }
}

基本上:

blink在给定状态中花费 49%，在转换中花费 2%，在另一个状态中花费 49%。过渡，在这个和大多数下面只涉及改变不透明度。因为这个(和其他人)指定 alternate (动画以交替方向运行)，这意味着 98% 处于给定状态，2% 转换到另一个状态。

smooth在给定状态中花费 60%，在转换到另一个状态时花费 40%。

phase在给定状态中花费 30%，在转换中花费 70%。

expand在给定的状态中花费 40%，在转换中花费 60%。在这种情况下，过渡不是不透明度，而是 y 轴上的缩放，这意味着它从垂直中点开始并收缩到垂直中点。

solid表示完全不闪烁，光标始终在那里。

为了使答案自成一体，我已将该 JSFiddle 中的相关内容复制到下面(压缩并更好地标记不同的样式)。只需运行代码片段以获得更直观的表示:

body { font-family: "Menlo", "Monaco", "Courier New", "Courier"; font-size: 9pt; background-color: black; color: #fff; }
.line { line-height: 18px; background-color: #333; overflow: hidden; margin: 2px; vertical-align: middle; }
.cursor { position: relative; top: 2px; width: 5px; height: 14px; background-color: #eee; display: inline-block; margin-left: 1px; margin-right: 1px; }

@keyframes blink { 0%, 49% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes smooth { 0%, 20% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes phase { 0%, 20% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes expand { 0%, 20% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }

.blink { animation: blink 0.5s ease-in-out 0s infinite alternate; }
.smooth { animation: smooth 0.5s ease-in-out 0s infinite alternate; }
.phase { animation: phase 0.5s ease-in-out 0s infinite alternate; }
.expand { animation: expand 0.5s ease-in-out 0s infinite alternate; }

<div class="line"><div class="cursor blink"></div>-blink</div>
<div class="line"><div class="cursor smooth"></div>-smooth</div>
<div class="line"><div class="cursor phase"></div>-phase</div>
<div class="line"><div class="cursor expand"></div>-expand</div>
<div class="line"><div class="cursor solid"></div>-solid</div>