css 不规则 路径运动_CSS运动路径的乐趣

我们通常会为开发人员使用大型旧JS库（例如GSAP ）提供沿路径动画的元素。 但是使用新的CSS运动路径模块，我们可以仅使用CSS来创建奇特的路径动画！

我创建了一些有趣的小动画，这些动画与这些属性一起运行-我们将逐步介绍本文涉及的一些技术。

演示地址

演示地址

简单路径动画

要创建路径动画，我们需要使用offset-path以及要沿其进行动画处理的路径的值（语法类似于SVG路径），并对offset-distance属性进行动画处理：

.obj{
  offset-path:path("M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0");
  animation: move 2000ms ;
}

@keyframes move{
  100%{
    offset-distance: 100% ;
  }
}

这是一个简单的例子：

演示地址

我们还可以分别使用offset-rotate和offset-position更改动画对象的旋转行为和位置，这可能会带来一些很酷的效果。 在此演示中，您可以看到与默认值相比的offset-rotate效果：第二个对象不相对于路径旋转，而是保持固定。

演示地址

SVG的运动路径

我还对能够显示元素正在移动的实际路径感兴趣。 在上面的演示中，我通过在HTML中包含具有相同路径坐标的SVG并使用绝对定位来做到这一点。 规范允许将URL传递给path()函数（类似于clip-path ），这意味着我们可以简单地包含SVG路径ID，并避免在CSS中复制路径。 （当我们包含具有许多坐标的复杂路径时，我们CSS文件会变得非常混乱！）但是，似乎在任何地方都还不支持，因此我们必须使用路径坐标。

这也意味着我们无法控制动画的响应速度，因为我们无法缩放SVG并具有路径匹配。 如果我们尝试更改SVG宽度，则路径将保持其原始大小。 （我很确定是这种情况，因为我无法使其表现为其他方式–如果您有解决方案，请告诉我！）

“画”路

我们不仅可以沿路径移动元素，还可以使其看起来像在绘制路径。 我们已经可以使用CSS中的stroke-dashoffset和stroke-dasharray属性“绘制” SVG路径-技巧是将stroke-dasharray值设置为路径的长度，然后将偏移值设置为0：

.path{
  stroke-dasharray: 520 ;
  stroke-dashoffset: 520 ;
  animation: draw 1000ms ;
}

@keyframes draw{
  100%{
    stroke-dashoffset: 0 ;
  }
}

（ 来自CSS Tricks的这篇文章详细介绍了它。）

如果我们使用与offset-path动画具有相同的持续时间和计时功能（递减）的“绘图”动画，则它们将同时发生，并且路径将看起来好像是由动画元素绘制的。

在本文开头的两个演示中的第二个中，沿笔画动画的每个循环，沿路径移动对象的动画都会循环两次。 使用stroke-dashoffset可以先画线然后再画线（从正偏移值到负偏移值），因此似乎先被绘制然后被擦除：

.path{
  stroke-dasharray: 520 ;
  stroke-dashoffset: 520 ;
  animation: draw 1000ms ;
}

@keyframes draw{
  0%{
    stroke-dashoffset: 520 ;
  }
  50%{
    stroke-dashoffset: 0 ;
  }
  100%{
    stroke-dashoffset: -520 ;
  }
}

带有box-shadow动画更加流畅

这些动画还有一个小技巧：构建第一个示例时，我注意到动画非常快，因此在某些时候看起来有些跳动。 为了使动画更自然，我在对象移动时添加了一个盒子阴影–这创建了一种运动模糊效果，并且感觉更平滑：

@keyframes move{
  10%{
    opacity: 1 ;
    offset-distance: 0% ;
  }
  30%{
    box-shadow: -0.5rem 0 0.3rem salmon ;
  }
  70%{
    box-shadow: -0.5rem 0 0.3rem salmon ;
  }
  90%{
    opacity: 1 ;
    offset-distance: 100% ;
    box-shadow: none ;
  }
  100%{
    opacity: 0 ;
    offset-distance: 100% ;
  }
}

浏览器支持

在撰写本文时， offset-path仅在Chrome中受支持-尽管可以在Firefox中使用layout.css.motion-path.enabled标志启用它，并且在下一版Firefox中将其设置为标准支持。

更新！

从Firefox版本72开始，您不再需要翻转该标志，默认情况下已启用😄

资源资源

丹·威尔逊（Dan Wilson ）创建了一些有用的Codepen演示 ，以演示运动路径的不同属性。 他还刚刚发表了一篇文章 。 （感谢亚当·库恩为我指出方向！）

翻译自: https://css-irl.info/fun-with-css-motion-path/