anime时间轴控制

最新推荐文章于 2024-11-12 10:35:22 发布

一只敲码的猫~

最新推荐文章于 2024-11-12 10:35:22 发布

阅读量298

点赞数

分类专栏： vue es6 JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_38946996/article/details/127988201

版权

vue 同时被 3 个专栏收录

105 篇文章

订阅专栏

es6

78 篇文章

订阅专栏

JavaScript

52 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中利用anime.js库创建一个时间轴动画控制。通过在组件中定义多个动画元素并使用anime.timeline()方法，设置动画的缓动效果、持续时间和循环次数。在组件挂载和卸载时分别启动和暂停动画，实现了元素平移的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="title">时间轴控制</div>
    <div class="amine-box">
        <div class="line">
            <div class="old"></div>
            <div class="animation" ref="ani1"></div>
        </div>
        <div class="line">
            <div class="old"></div>
            <div class="animation" ref="ani2"></div>
        </div>
        <div class="line">
            <div class="old"></div>
            <div class="animation" ref="ani3"></div>
        </div>
    </div>

    <br><br>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import anime from 'animejs'
const ani1 = ref();
const ani2 = ref();
const ani3 = ref();

const AniTimeLine = anime.timeline({
    easing: 'easeOutExpo',
    duration: 750,
    loop: true,
});;


onMounted(() => {
    AniTimeLine
        .add({
            targets: ani1.value,
            translateX: 250,
        })
        .add({
            targets: ani2.value,
            translateX: 250,
        })
        .add({
            targets: ani3.value,
            translateX: 250,
        })
});

onUnmounted(() => {
    AniTimeLine.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);
    padding: 20px;
}

.line {
    width: 300px;
    height: 30px;
    margin: 0 auto 10px auto;
    position: relative;
}

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

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