简介
仿网易云播放动画
效果图(效果图)
最终成品效果
动画组件
src/components/musicPlay.vue
<template>
<div class="music-play">
<div></div>
<div></div>
<div></div>
</div>
</template>
<script setup>
const props = defineProps({
state: {
type: Boolean,
default: true,
},
color: {
type: String,
default: "blue",
},
});
</script>
<style lang="sass" scoped>
// TODO 音乐播放器动画
// ? 动画停止class >>> .muscic-play-stop
// HTML结构
// <div class="music-play">
// <div></div>
// <div></div>
// <div></div>
// </div>
$music-play-box-height: 20px//音乐播放状态高度
$music-play-width: 3.2px//音乐播放状态宽度
$music-play-delys: .5s//音乐播放状态动画延迟
$music-play-gap: 6px//音乐播放状态间距
$music-animate-time: .75s//动画播放时长
$music-play-radius: 4px 4px 0 0 //圆角
$music-play-pos: center bottom//动画位置
.music-play
display: inline-block
width: calc(#{$music-play-width * 3 + $music-play-gap })
position: relative
height: $music-play-box-height
.music-play>div
position: absolute
width: $music-play-width
height: 100%
border-radius: $music-play-radius
animation: music-play-an #{$music-animate-time} linear infinite
transform-origin: $music-play-pos
animation-play-state: v-bind('props.state===true?"running":"paused"')
background: v-bind('props.color')
@for $i from 1 through 3
.music-play>div:nth-child(#{$i})
animation-delay: calc(#{($i - 1) * $music-play-delys})
margin-left: calc(#{$music-play-gap * ($i - 1)})
@keyframes music-play-an
0%,
100%
transform: scaleY(1)
50%
transform: scaleY(0)
</style>
使用组件
<template>
<div
style="
display: flex;
flex-direction: column;
gap: 20px;
width: 100px;
margin: 20px;
"
>
<button @click="test1">播放</button>
<music-play-animate :state="musicPlay" color="red" />
<music-play-animate :state="musicPlay" />
</div>
</template>
<script setup>
import { ref } from "vue";
import MusicPlayAnimate from "../components/music/MusicPlayAnimate.vue";
const musicPlay = ref(true),
test1 = () => {
musicPlay.value = !musicPlay.value;
console.log(musicPlay.value);
};
</script>