如何使用clip-path实现动画过渡切换

小桥风满袖
674 阅读4分钟

快速熟悉clip-path的使用

对于不熟悉clip-path的童鞋可以先看下MDN对clip-path介绍

CSS 属性创建一个剪切区域，用于设置应显示元素的哪个部分。显示区域内部的内容，而隐藏区域外部的内容。

clip-path默认自带4个开箱即用的形状，分别为 圆、椭圆、矩形、多边形

image.png

clip-path: circle(25% at 50% 50%);   //圆
clip-path: ellipse(25% 50% at 50% 50%);  //椭圆
clip-path: inset(20px 20px 20px 20px);  // 插入
clip-path: polygon(50% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);  // 多边形

添加过渡

通过transition或者animation我们可以很容易添加动画，以下是两个简单演示

实现简单的切换

1.圆

Circle 接受两个可以进行动画处理的属性：

  • 形状半径： 可以是长度或百分比
  • 位置： 可以是沿 和 轴的长度或百分比x``y

12.gif

.circle-enter-active { animation: 1s circle reverse; }
.circle-leave-active { animation: 1s circle; }
@keyframes circle {
  0% { clip-path: circle(75%); }
  100% { clip-path: circle(0%); }
}

圆形在离开过渡中从最初的 75% 半径（刚好足以让元素完全显示）调整为 0%。由于未设置位置，因此圆在垂直和水平方向上都默认为元素的中心。enter 过渡通过 animation 属性中的 “reverse” 关键字反向播放动画。

使用同样的方法，可以很轻松实现其他几种形状的变化，你可以实际体验看下效果

让我们制作更贴近实际开发的效果

1、向下滑动

14.gif

下滑过渡由两个使用插入形状的不同动画组成。第一个是离开动画，它对插入形状的顶部值从 0% 到 100% 进行动画处理，从而提供整个正方形向下滑出视图。第二个是进入动画，其底部值为 100%，然后将其向下动画化至 0%，从而提供整个正方形向下滑入视图。

.down-enter-active { animation: 1s down-enter; }
.down-leave-active { animation: 1s down-leave; }

@keyframes down-enter {
    0% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0); }
}

@keyframes down-leave {
    0% { clip-path: inset(0); }
    100% { clip-path: inset(100% 0 0 0); }
}

使用同样的手法，我们可以实现更多有意思的效果，其本质目的都是为了切换过渡至另一个元素显示，你可以查看下面的示例

使用路径实现我们最终想要的融化效果

15.gif

融化过渡由两个不同的动画组成，分别用于进入和离开。在离开过渡中，路径是一个正方形，但顶部由几条贝塞尔曲线组成。首先，这些曲线是完全平坦的，然后我们向下设置动画，以停止在形状底部之外。当这些曲线向下移动时，它们会以不同的方式进行动画处理，以便每条曲线的调整方式与其他曲线不同。这样，元素就在底部下方消失了。

enter 过渡的作用大致相同，只不过曲线位于正方形的底部。曲线从顶部开始，初始时是完全平坦的。然后，使用相同的曲线调整对它们进行向下动画处理。这样，第二个元素就会在底部融化到视图中。

.melt-enter-active { animation: 2s melt-enter; }
.melt-leave-active { animation: 2s melt-leave; }

@keyframes melt-enter {
    0% {
        clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.5 -34.5 75 -34.5C87.5 -34.5 87.17 -4.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -16.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');
    }
    100% {
        clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
    }
}

@keyframes melt-leave {
    0% {
        clip-path: path('M0 0C8.33 -8.33 16.67 -12.5 25 -12.5C37.5 -12.5 36.57 -0.27 50 0C63.43 0.27 62.5 -34.37 75 -34.37C87.5 -34.37 87.5 -4.01 100 0C112.5 4.01 112.38 -18.34 125 -18.34C137.62 -18.34 138.09 1.66 150.48 0C162.86 -1.66 162.16 -25 174.54 -25C182.79 -25 191.28 -16.67 200 0L200 200L0 200L0 0Z');
    }
    100% {
        clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');
    }
}

使用这种方法，我们可以制作更多有意思的过渡效果，你可以查看下面的示例体验

工具辅助

Clippy — CSS clip-path 生成器 预置多种可供调整的形状，方便可视化绘制裁剪形状

结语

clip-path用于创建既简单又复杂的灵活而强大的动画，希望本文能给各位童鞋在工作中带去些许灵感。

avatar
文章
阅读
粉丝