vue3 波纹效果

<template>
  <div class="container">
    <div class="animation" ref="album">
      <img 
        src="http://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg?param=300x300" 
        alt="Album cover"
      >
      <div v-for="(ripple, index) in ripples" 
           :key="index" 
           class="ripple-circle"
           :ref="el => rippleRefs[index] = el">
      </div>
    </div>
    <div id="play" @click="play">播放</div>
    <div id="pause" @click="pause">停止</div>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue';

const album = ref(null);
const rippleRefs = ref([]);
const ripples = [1, 2]; // 两个波纹元素
const isPlaying = ref(false);
let rotateId = null;
let rippleIds = [];
let currentRotation = 0;

// 旋转动画
function rotateAnimation() {
  const rotate = () => {
    currentRotation = (currentRotation + 1) % 360;
    album.value.style.transform = `rotate(${currentRotation}deg)`;
    rotateId = requestAnimationFrame(rotate);
  };
  rotate();
}

// 波纹动画
function rippleAnimation(element, delay) {
  let scale = 1;
  let opacity = 0;
  let startTime = null;
  
  const ripple = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;
    const progress = (elapsed % 2000) / 2000; // 2秒循环
    
    if (progress < 0.25) {
      scale = 1 + progress * 4 * 0.25;
      opacity = progress * 4 * 0.1;
    } else if (progress < 0.5) {
      scale = 1.25 + (progress - 0.25) * 4 * 0.25;
      opacity = 0.1 + (progress - 0.25) * 4 * 0.2;
    } else if (progress < 0.75) {
      scale = 1.5 + (progress - 0.5) * 4 * 0.25;
      opacity = 0.3 + (progress - 0.5) * 4 * 0.2;
    } else {
      scale = 1.75 + (progress - 0.75) * 4 * 0.25;
      opacity = 0.5 - (progress - 0.75) * 4 * 0.5;
    }
    
    element.style.transform = `scale(${scale})`;
    element.style.opacity = opacity;
    
    const id = requestAnimationFrame(ripple);
    rippleIds.push(id);
  };
  
  setTimeout(() => {
    const id = requestAnimationFrame(ripple);
    rippleIds.push(id);
  }, delay);
}

// 播放功能
function play() {
  if (isPlaying.value) return;
  isPlaying.value = true;
  
  // 移除过渡效果
  album.value.style.transition = 'none';
  rippleRefs.value.forEach(el => {
    el.style.transition = 'none';
  });
  
  // 启动动画
  rotateAnimation();
  rippleAnimation(rippleRefs.value[0], 0);
  rippleAnimation(rippleRefs.value[1], 1000);
}

// 停止功能
function pause() {
  if (!isPlaying.value) return;
  isPlaying.value = false;
  
  // 停止所有动画
  cancelAnimationFrame(rotateId);
  rippleIds.forEach(id => cancelAnimationFrame(id));
  rippleIds = [];
  
  // 添加平滑过渡效果
  album.value.style.transition = 'transform 0.5s ease-out';
  rippleRefs.value.forEach(el => {
    el.style.transition = 'transform 0.5s ease-out, opacity 0.5s ease-out';
    el.style.transform = 'scale(1)';
    el.style.opacity = '0';
  });
  
  // 平滑停止到当前角度
  album.value.style.transform = `rotate(${currentRotation}deg)`;
  
  // 过渡完成后移除过渡效果
  setTimeout(() => {
    album.value.style.transition = 'none';
    rippleRefs.value.forEach(el => {
      el.style.transition = 'none';
    });
  }, 500);
}

// 组件卸载时清除动画
onBeforeUnmount(() => {
  pause();
});
</script>

<style scoped>
.container {
  position: relative;
  height: 100vh;
  background-color: #51c77d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.animation {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  border: 3px solid rgba(0,0,0,0.1);
}

.animation img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.ripple-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 0;
}

#play, #pause {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  border: 1px solid #fff;
  margin-top: 15px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

#play:hover, #pause:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
</style>