Clip-Path

前言

借助clip-path,我们可以实现一些复杂的animation动画效果,我们先来简单概述一下它的特性,如MDN所描述的。

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

CSS特性 clip-path建立了一个裁剪区域,元素在这个区域中的部分显示出来,在这个区域之外的隐藏起来, 比如我们用clip-path建立了一个圆圈, 那么在这个圆圈之内的区域是positive的,而之外的区域是negative的,positive渲染出来,而negative被隐藏。
正是利用这种正空间和负空间之间的关系可以实现动画,从而提供了十分有趣的过渡效果。

属性

clip-path自带四种形状: 圆圈, 椭圆, 内嵌小图。 并且还可以使用URL为其他SVG 元素提供源代码。我们先看前四个形状的示例。

首先,这个属性只会影响到元素的哪部分被渲染出来, 并不会改变元素本身的大小

circle

clip-path: circle( at );

Circle 接受两个参数:

1. 形状半径: 可以是长度或者比例
2. 位置: 定义了图像变化的中心点, 可以是沿着x轴或者y轴的长度或者比例. 如果不设置位置,则默认处于在盒子的上下左右居中

.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%); }
}

其中box1执行circle-leave-active,box2执行circle-enter-active,是box1的相反动画

如下图将值设置为circle(75% at 10% 90%), 动画的中心点就出现在了左下角

Ellipse

clip-path: ellipse({2} at );

Ellipse接收以下三个参数:

1. 形状半径: 定义在水平轴,可以是长度或者比例
2. 形状半径: 定义在垂直轴,可以是长度或者比例
3. 位置: 定义了图像变化的中心点, 可以是沿着x轴或者y轴的长度或者比例

效果是从box1从圆形变成椭圆形,然后消失, 接着box2逐渐变大

inset

clip-path: inset({1,4} round {1,4});

inset最多有五个可以动画化的属性。 前四个代表了形状的边缘,表现类似margins /padding. 第一个是必填, 另外三个是optional

1. 长度/比例: 可以代表四个边, top/bottom sides, or top side
2. 长度/比例: 可以代表left/right sides or right side
3. 长度/比例: 代表 bottom side
4. 长度/比例: 代表 left side
5. 角半径: 需要在值之前加上round关键字

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

@keyframes inset {
  0% { clip-path: inset(0% round 0%); }
  100% { clip-path: inset(50% round 50%); }
}

离开的过渡将一个 full-sized的方块变成了一个圆圈, 因为round从 0% 变成了 50%.
如果将
100% { clip-path: inset(50% round 50%); }
变成
100% { clip-path: inset(10% round 50%); }
那么最终的圆圈将变得更大

相应的如果我们修改为60%或者更大,则圆圈将完全消失.即padding的效果
100% { clip-path: inset(0% round 60%); }

Polygon

clip-path: polygon();

每个属性代表了形状的顶点,由于是多边形,因此最少要有三个参数,代表三个顶点

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

@keyframes polygon {
  0% { clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%); }
  100% { clip-path:  polygon(50% 50%, 50% 25%, 50% 50%, 75% 50%, 50% 50%, 50% 75%, 50% 50%, 25% 50%); }
}

效果

其中,上面8个点的位置如下图所示

最终100%时8个点的位置

参考文档

https://css-tricks.com/animating-with-clip-path/#top-of-site
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient
code yourself: https://codepen.io/talmand/pen/ydPmKo