offset-distance

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!

此属性最初名为 motion-offset。此属性和其他所有相关的 motion-* 属性,正在 规范 中被重新命名为 offset-*。我们正在年鉴中更改这些名称。如果您现在想要使用它,最好使用两种语法。

CSS 中的 motion-offset 属性表示:您在 motion-path 上走了多远?这是与运动路径相关的**可动画**属性。

.thing-that-moves {
  /* "Old" syntax. Available in Blink browsers as of ~October 2015 */
  motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  motion-offset: 0%;

  /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  offset-distance: 0%;
 
  animation: move 3s linear infinite;
}

/* Animate the element along the path from 0% to 100%  */
@keyframes move {
  100% { 
    motion-offset: 100%; /* Old */
    offset-distance: 100%; /* New */
  }
}

在上例中,我们将初始 motion-offset 值设置为 0%,但值得注意的是,即使未明确定义,零也是默认值(我们可以省略该值)。

变量

offset-distance 属性接受以下值

  • 长度
  • 百分比

在这两种情况下,该值都指定了从路径起点(默认值为 0px0%)到路径终点的距离长度。

示例

在本例中,我们有两个圆圈,其中一个较小的圆圈沿着较大的圆圈的路径运动。

以下是我们用来绘制形状的 SVG 文件

<svg viewbox="0,0 10,10" width="200px" height="200px">
  
  <!-- the circle path to be animated along -->  
  <path 
    class="track"
    fill="none"
    stroke-width="0.25"
    d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
  />
  
  <!-- the mover that follows the path -->
  <circle class="marker" r="1" fill="orange"></circle>
  
</svg>

现在,我们可以将 CSS 中的 .marker 类设置为跟随 .track 类的坐标

/* The motion-offset is zero by default */
.marker {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  /* Move the .marker from it's default value of 0% to 100% of the path's length */
  100% { offset-distance: 100%; }
}

查看 CodePen 上 Geoff Graham (@geoffgraham) 的 沿路径动画的简单示例

类似地,我们可以将 offset-distance 值停止在 50%,动画将在路径的半途停止。

查看 CodePen 上 Geoff Graham (@geoffgraham) 的 沿路径动画的简单示例

或者,为了控制动画的速度,我们可以将 offset-distance 值乘以 300% 来加快速度。但是,如果我们指定了动画运行的时间超过了元素走完路径所需的时间,那么运动将停止,直到动画完成其间隔才能重复。

查看 CodePen 上 Geoff Graham (@geoffgraham) 的 沿路径动画的简单示例

浏览器支持

撰写本文时,offset-distance 属性仍被视为一项实验性功能,并且没有有关浏览器支持的文档。但是,有关 motion-path 支持的文档,我们可以将其作为当前的参考标准。

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
46727916.0

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712716.0

相关属性

附加信息