<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>
anime 动画引擎
最新推荐文章于 2024-06-21 09:32:45 发布