<template>
    <div class="title">直接变化变量中的对象</div>
    <div class="amine-box">
        {
   
   { TestNumber }}
    </div>
    <br><br>
</template>
<script setup>
import {
      
       ref, onUnmounted } from 'vue';
import anime from 'animejs'

const TestNumber = ref(0);

// 因为不需要获取Dom元素，所以不需要在 onMounted 后执行
let AniObj = anime({
      
      
    // 需要变化的对象
    targets: TestNumber,
    // 需要变化的值
    value: 100,
    // 持续时间
    duration: 3000,
    // 变化值的精度（-log值）
    round: 10,
    // 动画曲线
    easing: 'linear',
    endDelay: 1000,
    loop: true,
});

onUnmounted(() => {
      
      
    // 目前 Anime 没有释放缓存的办法，
    // 只能停止动画
    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%;
    height: 50px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    line-height: 50px;
    text-align: center;
}
</style>