editor.cursorBlinking有什么作用？

Question

该文档说，editor.cursorBlinking的选项是'blink'，'smooth'，'phase'，'expand'和'solid'。它没有描述这些含义。

这些分别做什么？

Answer 1

这里详细介绍了额外的光标动画概念，它指向显示五个新选项的JSFiddle。以下样式显示了每种样式的作用：

@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复制到了下面（压缩并更好地标记了不同的样式）。只需运行代码片段即可获得更直观的表示：

@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); }
}

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; }