写在前面
clip-path即剪切路径，是css3中的新属性之一，clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
说人话就是它可以让方方正正的一个div盒子变成一个个性质可DIY的图形（三角形，正方形，甚至不规则图形）
不过令人可惜的是，至今clip-path也依然没有广泛应用，且网络社区上的辅助工具也非常少
不过，为了用clip-path完成画画和动画两个需求，我特地制作了一个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%)
}
}
看到了吗？在@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演示:
时间轴中:
左下角的加号:
是用于添加新的轨道
新的轨道意味着你能画更多移动的对象了。
cur:Number
代表你在当前轨道中选择的帧（以点击来切换），图中：cur:1，你在绘图区画的图像就是第二帧（众所周知程序员从0开始数数）
右边轨道的加号
是用于在对应轨道中添加新的帧
常见情况1：
当前cur:0，0帧你已经画好封闭图形了，这时候你想画第二个图形，这时候如果你不添加新帧，或者不切换cur：1，则无法绘制新的图形，现象就是：无论你如何点击画面都画不了新的点。如下方gif
从上到下分别是:
选择
目前主要是用于拖动插入的图片。未来将会有更多功能 待更新.......
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
