寫(xiě)在前面
clip-path即剪切路徑，是css3中的新屬性之一劲妙，clip-path屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域湃鹊。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏镣奋。
說(shuō)人話就是它可以讓方方正正的一個(gè)div盒子變成一個(gè)個(gè)性質(zhì)可DIY的圖形（三角形币呵，正方形，甚至不規(guī)則圖形）
不過(guò)令人可惜的是侨颈，至今clip-path也依然沒(méi)有廣泛應(yīng)用余赢，且網(wǎng)絡(luò)社區(qū)上的輔助工具也非常少
不過(guò)，為了用clip-path完成畫(huà)畫(huà)和動(dòng)畫(huà)兩個(gè)需求哈垢，我特地制作了一個(gè)easy-animation
方便各位進(jìn)行clip-path繪圖與動(dòng)畫(huà)制作没佑。具體我們下文介紹,順便為了勾起各位的興趣，這里特地放出基于clip-path的碎片輪播：
part1 clip-path如何繪圖温赔？
讓我們來(lái)看一個(gè)小小的例子:
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>
這里用百分比作為單位,真實(shí)值計(jì)算以元素寬高為基準(zhǔn)進(jìn)行蛤奢，具體看下方計(jì)算
比如
35.00%*800 =280px
29.75%*400=119px
那么第一個(gè)點(diǎn)的坐標(biāo)就是(280px,119px)了
你或許會(huì)問(wèn)，為什么用百分比而不是px作為單位陶贼？如果用px啤贩，這個(gè)圖形的大小就永久固定了！意味著,你不能隨便更改寬高比比例來(lái)進(jìn)行縮放這里是2:1,所以拜秧，如果你設(shè)置width=400px痹屹，height=200px，就可以得到小一號(hào)的三角形了枉氮。
相鄰點(diǎn)之間連線且最后一個(gè)點(diǎn)與第一個(gè)點(diǎn)想連志衍，構(gòu)成了封閉圖形，clip-path想畫(huà)任意圖形基本就是這個(gè)原理聊替。
part2 clip-path制作動(dòng)畫(huà)楼肪？
只要兩個(gè) clip-path，其中包含的點(diǎn)個(gè)數(shù)相同惹悄，在animation的幀內(nèi)部就可以線性切換了春叫！
在上直接體驗(yàn):
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內(nèi)部0%與100%的clip-path中點(diǎn)的數(shù)量是相同的，如果不同暂殖，則沒(méi)有動(dòng)畫(huà)效果价匠！
part3 easy-animation 基于clip-path動(dòng)畫(huà)的開(kāi)源項(xiàng)目
github地址:https://github.com/moushicheng/easy-animation
在線使用：https://moushicheng.github.io/easy-animation/
一句話簡(jiǎn)介
前端的幀動(dòng)畫(huà)制作器,作為用戶(hù)的你可以直接繪制多個(gè)幀，然后點(diǎn)擊導(dǎo)出(import),就可以獲得相應(yīng)的css代碼
幀的概念
現(xiàn)代動(dòng)畫(huà)成形的原理就是視覺(jué)暫留呛每，一個(gè)時(shí)長(zhǎng)為1s的動(dòng)畫(huà)通常是由多個(gè)畫(huà)面組成(動(dòng)漫中常常是是24幀/s)踩窖，每個(gè)畫(huà)面就是一幀，在easy-animation中,你只需要繪制一些關(guān)鍵幀,程序就能自動(dòng)補(bǔ)幀,完成動(dòng)畫(huà)晨横。
PS:補(bǔ)幀:自動(dòng)補(bǔ)齊中間缺失的幀,來(lái)填補(bǔ)畫(huà)面,比如上面只畫(huà)了兩幅三角形毙石，但是中間三角形的變換已經(jīng)被補(bǔ)幀了
[warning]每一幀的畫(huà)面必須是封閉的圖形。
如何使用颓遏？
以一次繪制動(dòng)畫(huà)的過(guò)程為例徐矩。
gif演示:
時(shí)間軸中:
左下角的加號(hào):
是用于添加新的軌道
新的軌道意味著你能畫(huà)更多移動(dòng)的對(duì)象了。
cur:Number
代表你在當(dāng)前軌道中選擇的幀（以點(diǎn)擊來(lái)切換）叁幢，圖中：cur:1滤灯，你在繪圖區(qū)畫(huà)的圖像就是第二幀（眾所周知程序員從0開(kāi)始數(shù)數(shù)）
右邊軌道的加號(hào)
是用于在對(duì)應(yīng)軌道中添加新的幀
常見(jiàn)情況1：
當(dāng)前cur:0，0幀你已經(jīng)畫(huà)好封閉圖形了曼玩，這時(shí)候你想畫(huà)第二個(gè)圖形鳞骤，這時(shí)候如果你不添加新幀，或者不切換cur：1黍判，則無(wú)法繪制新的圖形豫尽，現(xiàn)象就是：無(wú)論你如何點(diǎn)擊畫(huà)面都畫(huà)不了新的點(diǎn)。如下方gif
從上到下分別是:
選擇
目前主要是用于拖動(dòng)插入的圖片顷帖。未來(lái)將會(huì)有更多功能 待更新.......
PS：鋼筆狀態(tài)下也可以拖動(dòng)圖片,但是當(dāng)你把圖片移動(dòng)到繪圖層（灰色框框 默認(rèn)800x400 px）因?yàn)槔L圖層在圖片層之上美旧，這時(shí)候你就得通過(guò)選擇工具拖動(dòng)圖片了
鋼筆
在繪圖層中以點(diǎn)擊的方式繪制剪切畫(huà)面。
撤回
撤回上一個(gè)繪制的點(diǎn)
前進(jìn)
返回上一個(gè)你不小心撤回的點(diǎn)
插入圖片
插入后的圖片可放大,縮小,調(diào)整尺寸
主要用于用戶(hù)在圖片上方描點(diǎn)贬墩，像ps那樣
預(yù)覽動(dòng)畫(huà)
點(diǎn)擊后可觀看你繪制的動(dòng)畫(huà)榴嗅。
導(dǎo)出css代碼
導(dǎo)出一串css代碼，附帶clip-path剪切路徑陶舞，你可以直接在你的網(wǎng)站上
調(diào)整畫(huà)布尺寸
其實(shí)最重要的是調(diào)整一個(gè)合適的寬高比嗽测，因?yàn)樵谇拔恼f(shuō)過(guò)了clip-path中使用%作為單位的作用。
part4 看看利用clip-path的優(yōu)秀作品肿孵？
分頁(yè)欄唠粥，注意數(shù)字之間的切換:
codepen:https://codepen.io/ainalem/pen/BaNzPLr
碎片輪播:（打個(gè)小廣告不過(guò)分把）
簡(jiǎn)書(shū)：http://www.reibang.com/p/d1b1812a255b
Olympics 2020
codepen:https://codepen.io/ainalem/pen/ExYNYGp
