写在前面

clip-path即剪切路径，是css3中的新属性之一，clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

说人话就是它可以让方方正正的一个div盒子变成一个个性质可DIY的图形（三角形，正方形，甚至不规则图形）

三角,正方与不规则

不过令人可惜的是，至今clip-path也依然没有广泛应用，且网络社区上的辅助工具也非常少

寥寥无几的clip-path制作器之一

不过，为了用clip-path完成画画和动画两个需求，我特地制作了一个easy-animation

easy-animation
方便各位进行clip-path绘图与动画制作。具体我们下文介绍,顺便为了勾起各位的兴趣，这里特地放出基于clip-path的碎片轮播： 示例

part1 clip-path如何绘图？

让我们来看一个小小的例子:
css部分:

    .ele-0{
      width:800px;
      height:400px;
      background: black;
      clip-path: polygon(35.00% 29.75%,21.00% 71.75%,63.38% 36.25%)
    }

html部分

<div class="ele-0"></div>

由三个点构成的三角形

这里用百分比作为单位,真实值计算以元素宽高为基准进行，具体看下方计算
比如

35.00%*800 =280px
29.75%*400=119px

那么第一个点的坐标就是(280px,119px)了

你或许会问，为什么用百分比而不是px作为单位？如果用px，这个图形的大小就永久固定了！意味着,你不能随便更改宽高比比例来进行缩放这里是2:1,所以，如果你设置width=400px，height=200px，就可以得到小一号的三角形了。

相邻点之间连线且最后一个点与第一个点想连，构成了封闭图形，clip-path想画任意图形基本就是这个原理。

part2 clip-path制作动画？

只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了！
在上直接体验:
codepen:https://codepen.io/a1163675107/pen/mdrypVV

    .ele-0{
       width:800px;
       height:400px;
       position: absolute;
       background: black;
       animation: move-0 1s linear infinite;
     }
    @keyframes move-0 {
          0%{
          clip-path: polygon(35.00% 29.75%,21.00% 71.75%,63.38% 36.25%,35.13% 30.00%)
         }
          100%{
          clip-path: polygon(82.88% 21.25%,65.25% 70.00%,86.88% 63.25%,83.00% 21.00%)
         }
       }

基于clip-path的线性变换
看到了吗？在@keyframes内部0%与100%的clip-path中点的数量是相同的，如果不同，则没有动画效果！

part3 easy-animation 基于clip-path动画的开源项目

github地址:https://github.com/moushicheng/easy-animation
在线使用：https://moushicheng.github.io/easy-animation/

一句话简介

前端的帧动画制作器,作为用户的你可以直接绘制多个帧，然后点击导出(import),就可以获得相应的css代码

帧的概念

现代动画成形的原理就是视觉暂留，一个时长为1s的动画通常是由多个画面组成(动漫中常常是是24帧/s)，每个画面就是一帧，在easy-animation中,你只需要绘制一些关键帧,程序就能自动补帧,完成动画。
PS:补帧:自动补齐中间缺失的帧,来填补画面,比如上面只画了两幅三角形，但是中间三角形的变换已经被补帧了
[warning]每一帧的画面必须是封闭的图形。

如何使用？

以一次绘制动画的过程为例。
gif演示:

绘制过程.gif

时间轴中:

左下角的加号:

是用于添加新的轨道

添加新轨道

新的轨道意味着你能画更多移动的对象了。

cur:Number

代表你在当前轨道中选择的帧（以点击来切换），图中：cur:1，你在绘图区画的图像就是第二帧（众所周知程序员从0开始数数）

右边轨道的加号

是用于在对应轨道中添加新的帧

添加新帧

常见情况1：

当前cur:0，0帧你已经画好封闭图形了，这时候你想画第二个图形，这时候如果你不添加新帧，或者不切换cur：1，则无法绘制新的图形，现象就是：无论你如何点击画面都画不了新的点。如下方gif
![pop4.gif](https://img.haomeiwen.com/i23336154/0a7981012f

工具栏：

工具栏

从上到下分别是:

选择

目前主要是用于拖动插入的图片。未来将会有更多功能 待更新.......
PS：钢笔状态下也可以拖动图片,但是当你把图片移动到绘图层（灰色框框 默认800x400 px）因为绘图层在图片层之上，这时候你就得通过选择工具拖动图片了

钢笔

在绘图层中以点击的方式绘制剪切画面。

撤回

撤回上一个绘制的点

前进

返回上一个你不小心撤回的点

插入图片

插入后的图片可放大,缩小,调整尺寸
主要用于用户在图片上方描点，像ps那样

预览动画

点击后可观看你绘制的动画。

导出css代码

导出一串css代码，附带clip-path剪切路径，你可以直接在你的网站上

调整画布尺寸

其实最重要的是调整一个合适的宽高比，因为在前文说过了clip-path中使用%作为单位的作用。

part4 看看利用clip-path的优秀作品？

分页栏，注意数字之间的切换:
codepen:https://codepen.io/ainalem/pen/BaNzPLr

分页栏
碎片轮播:（打个小广告不过分把）
简书：https://www.jianshu.com/p/d1b1812a255b
示例

Olympics 2020
codepen:https://codepen.io/ainalem/pen/ExYNYGp

Olympics 2020