效果圖：
water.gif
運用animejs根據對 path路徑( d= " " )的改變，從而實現水滴效果,這種東西牽扯到到貝塞爾曲線繪圖什么亂七八糟的，比較麻煩，一般都是UI給你搞的svg圖片(這東西應該很考驗UI的，看看鋼筆工具用的6不6了！??)，然后你根據圖片把 path 路徑給導出來，這邊是直接給導好的，可以直接拿來用??~~~
不了解animejs的，可以參考https://www.animejs.cn/documentation/#morphing
npm install --s animejs
代碼如下：
<template>
<div class="overall">
<div class="bck">
<span>water</span>
<svg viewBox="0 0 1000 1000">
<!-- fill 想要填充的顏色 -->
<path
id="path"
d="M385.83210362571293 334.86146390932754 C 419.2619578186055 310.28313498809257 463.36083443833644 286.0954244687181 505.0628857927696 283.89987440965143 546.7649371472027 281.7043243505848 601.2637514721268 296.3308014584882 636.0444117523117 321.6881635549277 670.8250720324966 347.0455256513672 704.5017491081679 395.1211347723354 713.7468474738787 436.04404698828836 722.9919458395894 476.96695920424133 705.9385601693999 525.9001748775581 691.515001946576 567.2256368506457 677.0914437237521 608.5510988237334 659.9059594835412 661.8529547703343 627.2054981369351 683.9968188268143 594.5050367903291 706.1406828832943 538.0186662144454 702.5679266703842 495.31223386694 700.0888211895253 452.60580151943464 697.6097157086665 403.6472294562813 692.4581527729604 370.9669040519029 669.1221859416617 338.28657864752444 645.7862191103629 310.3108053434175 599.6984098691668 299.2302814406694 560.0730202017334 288.1497575379213 520.4476305343 290.0501236045737 468.90510731912883 304.4837606354143 431.3698479370612 318.9173976662549 393.83458855499356 352.4022494328204 359.4397928305625 385.83210362571293 334.86146390932754z"
stroke="none"
fill="#64a8f6"
/>
</svg>
</div>
</div>
</template>
<script>
import anime from "animejs/lib/anime.es.js";
export default {
data() {
return {};
},
mounted() {
anime({
targets: "#path",
d: [
"M386.26369194054416 335.4857362728247 C 422.0469354319771 312.2136488142555 465.8040250219928 285.8611702694004 504.9959407888876 286.7573008535199 544.1878565557823 287.65343143763937 589.4640316944785 315.13143058138724 621.4151865419128 340.86251977754154 653.3663413893471 366.59360897369584 683.6722121430029 402.9437009547504 696.7028698734931 441.1438360304455 709.7335276039834 479.34397110614066 712.7112513429187 531.7997830151969 699.5991329248544 570.0633302317125 686.4870145067902 608.3268774482281 652.1613837899911 645.494088122567 618.0301593651076 670.7251193295392 583.8989349402241 695.9561505365115 536.793219587352 720.6625859555577 494.8117863755533 721.4495174735462 452.83035316375464 722.2364489915346 399.5393566843368 702.1031574372957 366.14156009431554 675.4467084374702 332.7437635042943 648.7902594376446 307.06585354443024 603.0203039466819 294.42500683542596 561.5108234745927 281.7841601264217 520.0013430025035 274.9900323227703 464.06067347189617 290.29647984029 426.3898256049348 305.6029273578097 388.71897773797343 350.48044844911124 358.75782373139384 386.26369194054416 335.4857362728247z",
"M378.79710923183063 324.68567270614085 C 412.99807766862693 298.90759676224945 462.32472998206345 275.7388168672839 505.2678980802559 275.14929561195555 548.2110661784484 274.5597743566272 605.3907290959111 293.2313174296687 636.4561178209856 321.14854517417075 667.5215065460601 349.0657729186728 680.6571379164085 400.9986357930346 691.660230430703 442.65266207896775 702.6633229449975 484.3066883649009 715.2736786274429 533.8233808900604 702.4746729067529 571.0727028897695 689.6756671860628 608.3220248894786 649.4810305245951 640.8999776484019 614.8661961065625 666.1485940772226 580.2513616885299 691.3972105060433 534.3830011986166 723.4483642675144 494.78566639855734 722.5644014626936 455.188331598498 721.6804386578727 410.06893507199874 687.8686117589984 377.28218730620654 660.8448172482977 344.49543954041434 633.8210227375969 310.9351964449256 598.9261453939882 298.06517980380426 560.4216343984892 285.1951631626829 521.9171234029902 286.6067658881405 469.1070782240286 300.0620874594782 429.81775127530386 313.51740903081594 390.5284243265791 344.59614079503433 350.46374865003224 378.79710923183063 324.68567270614085z",
"M386.2535893890838 335.4711234034286 C 422.4918164524112 311.31363670768417 465.4150543321444 280.33783390856854 505.1416538322048 280.5378030710557 544.8682533322651 280.73777223354284 591.4560285183493 310.27138521717467 624.6131863894461 336.67093837835154 657.770344260543 363.0704915395284 693.0056432330312 400.5343824147732 704.0846010587858 438.935122038117 715.1635588845404 477.33586166146085 703.978193316223 526.3446934984391 691.0869333439736 567.0753761184147 678.1956733717241 607.8060587383903 659.3980215827621 659.7902624981585 626.7370412252886 683.3192177579706 594.0760608678152 706.8481730177826 536.4875073773397 712.2692373991943 495.12105119913286 708.2491076772872 453.75459502092593 704.2289779553801 411.20936177205175 683.8876929795274 378.53830415604716 659.1984394265282 345.8672465400426 634.5091858735291 314.23237428707296 599.0662057227935 299.0947055031052 560.1135863592924 283.9570367191375 521.1609669957913 273.1858108045776 462.92313373816614 287.7122914522407 425.48272324552215 302.2387720999038 388.04231275287816 350.0153623257564 359.628610099173 386.2535893890838 335.4711234034286z",
"M385.36270044568755 334.1824941074179 C 418.516789564816 309.9336769345797 463.35823177758476 288.3422305245809 505.0034478465829 286.4368756697072 546.648663915581 284.5315208148335 600.6063565184743 297.7670866794516 635.2339968596763 322.75036497817587 669.8616372008782 347.7336432769001 701.0151278555942 394.75734675233974 712.7692898937946 436.3365454620529 724.523451931995 477.9157441717661 721.5041439214912 533.0961670199895 705.7589690888788 572.2255572364548 690.0137942562664 611.3549474529202 653.4129672319108 648.0834708507307 618.2982408981202 671.112886760845 583.1835145643296 694.1423026709592 536.7732890935205 710.1036721995204 495.070611086135 710.4020526971401 453.3679330787495 710.7004331947599 402.82222361434054 697.329661291842 368.0821728538071 672.9031697465632 333.34212209327364 648.4766782012845 296.9641831432669 604.0053352654389 286.6303065229344 563.8431034254678 276.2964299026019 523.6808715854967 289.62351414468674 470.20654692641114 306.07891313181227 431.92977870673616 322.5343121189378 393.6530104870612 352.2086113265591 358.43131128025607 385.36270044568755 334.1824941074179z"
],
easing: "easeInOutSine",
duration: 5000,
direction: "alternate",
loop: true
});
}
};
</script>
<style scoped>
svg {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.bck {
width: 300px;
height: 300px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
text-transform: uppercase;
}
</style>
