anime SVG 简单使用方法

<template>
    <div class="title">SVG 简单使用方法</div>
    <div class="amine-box">
        <div class="icon" ref="icon"></div>
        <svg width="256" height="112" viewBox="0 0 256 112">
            <path fill="none" stroke="rgba(255,255,255,0.3)" ref="pathEle" stroke-width="1"
                d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z">
            </path>
        </svg>
    </div>
    <br><br>
</template>
<script setup>
import anime from 'animejs'
import { onMounted, onUnmounted, ref } from 'vue';

const pathEle = ref();
const icon = ref();
let AniObj = null;
onMounted(() => {
    // 获取 Path 元素的路径
    var path = anime.path(pathEle.value);

    AniObj = anime({
        targets: icon.value,
        translateX: path('x'),
        translateY: path('y'),
        rotate: path('angle'),
        easing: 'linear',
        duration: 2000,
        loop: true
    });
})

onUnmounted(() => {
    AniObj.pause();
})



</script>
<style lang="less" scoped>
.title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #999;
}


.amine-box {
    width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
}

.icon {
    // 注意，这个动画的块需要提前处理一下居中
    width: 20px;
    height: 20px;
    position: absolute;
    margin: -10px 0 0 -10px;
    background-color: blueviolet;
}
</style>