anime 动画引擎

anime官网地址
anime中文官网地址

<template>
    <div class="title">基本使用方法</div>
    <div class="amine-box">
        <div class="old"></div>
        <div class="animation" ref="ani"></div>
    </div>

    <br><br>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import anime from 'animejs'

const ani = ref();


let AniObj = null;
onMounted(() => {
    AniObj = anime({
        // 简单的配置
        // 所有不需要的项目都可以删除
        targets: ani.value,
        // 需要改变的属性
        //（大多数单位可以省略）
        // (省略时使用默认单位：例如 rotate，单位 deg，translateX 单位 px)
        translateX: 300,
        // 独立的动画属性（同步）
        rotate: {
            value: 360,
            duration: 700,
            easing: 'easeInOutSine'
        },
        // 持续时间
        duration: 1000,
        // 延迟
        delay: 200,
        // 末端延迟（在动画结束时以毫秒为单位添加一些额外时间）
        endDelay: 1000,
        // 动画曲线
        easing: 'easeInOutExpo',
        // 循环
        loop: true,
        // 动画方向（normal ： 正向，reverse：反向，alternate往返（一次正向，一次反向））
        direction: 'normal',
        // 自动播放（改为false，可以根据代码进行控制什么时候播放）
        autoplay: 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: 100px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
}

.old,
.animation {
    position: absolute;
    top: 35px;
    width: 30px;
    height: 30px;
    background-color: brown;
    left: 60px;
}

.old {
    opacity: 0.5;
}
</style>