效果圖：
svg.gif
上圖是在animejs官網(wǎng)上看到的，只怪在人群中多看了你一眼，我就迷上了它??，想直接看大佬代碼的可以戳這里 ~~~~ ??
在線svg繪制地址 ??
分析了代碼，想要做成這種效果，你需要了解以下知識點：
- js(我這里用的vue)；
- animejs；
- svg；
- 用鋼筆工具畫三角形；
其實要實現(xiàn)這種效果，難就難在繪圖，一看代碼你會發(fā)現(xiàn)基本都是path路徑，animejs主要解決的就是路徑變換問題。
注意：
- 統(tǒng)一角數(shù)，是三角形就全是三角形，是四角形就全是四角形；
- 統(tǒng)一個數(shù)；
- 不懂怎么用鋼筆工具畫三角形的可以百度一下，最后連接時按著 shift 連接；
下面是我簡單學習后做出來的效果圖：
svg1.gif
代碼如下：
<template>
<div class="overall">
<div class="bck">
<svg viewBox="0 0 700 600" width="700" height="600">
<path
id="svg_1"
d="m236.5,251.45313c0,0 138,-9 138,-9c0,0 -37,-65 -37,-65c0,0 -101,74 -101,74z"
/>
<path
id="svg_2"
d="m337.5,178.45313c0,0 100,73 100,73c0,0 -18,58 -18,58c0,0 -82,-131 -82,-131z"
/>
<path
id="svg_3"
d="m419.5,308.45313c0,0 -144,60 -144,60c0,0 124,0 124,0c0,0 20,-60 20,-60z"
/>
<path
id="svg_4"
d="m375.5,244.45313c0,0 -101,123 -101,123c0,0 143,-58 143,-58c0,0 -42,-65 -42,-65z"
/>
<path
id="svg_5"
d="m373.5,243.45313c0,0 -137,8 -137,8c0,0 36,116 36,116c0,0 101,-124 101,-124z"
/>
</svg>
</div>
</div>
</template>
<script>
import anime from "animejs/lib/anime.es.js";
export default {
data() {
return {
paths: [
{
id: "#svg_1",
d:
"m335.5,160.45313c0,0 -76,165 -76,165c0,0 -45,-44 -45,-44c0,0 121,-121 121,-121z"
},
{
id: "#svg_2",
d:
"m261.5,325.45313c0,0 100,-31 100,-31c0,0 -46,-85 -46,-85c0,0 -54,116 -54,116z"
},
{
id: "#svg_3",
d:
"m315.5,209.45313c0,0 138,71 138,71c0,0 -116,-121 -116,-121c0,0 -22,50 -22,50z"
},
{
id: "#svg_4",
d:
"m452.5,281.45313c0,0 -117,120 -117,120c0,0 -75,-73 -75,-73c0,0 192,-47 192,-47z"
},
{
id: "#svg_5",
d:
"m317.5,210.45313c0,0 47,92 47,92c0,0 88,-21 88,-21c0,0 -135,-71 -135,-71z"
}
]
};
},
mounted() {
let _this = this;
_this.paths.forEach(function(path, index) {
anime({
targets: path.id,
d: {
value: path.d,
duration: 1000,
easing: "easeInOutQuad"
},
delay: 1000,
endDelay: 1000,
direction: "alternate",
loop: true
});
});
}
};
</script>
<style scoped>
svg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
path {
fill: none;
stroke: black;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
}
.bck {
width: 700px;
height: 600px;
}
</style>
