论坛 › 动画音画 › 微光

亚伦影音工作室 发表于 2025-11-20 20:51

微光

本帖最后由 亚伦影音工作室 于 2025-11-20 20:51 编辑 <br /><br /><style>
#papa{position: relative;
            width: 1286px;
            height: 720px;
            margin-left: -300px;
            margin-top: 10px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            overflow: hidden;z-index:12345;
            background:url(https://pic1.imgdb.cn/item/6613550168eb93571355a5d8.jpg)no-repeat center/cover;
      }
.img-container {left:30%;
        bottom: 0px;
position: absolute;
height: 100%;
width: 100%;
perspective: 500px;

transform-style: preserve-3d;
}


.box {
box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
width: 550px;
height: 350px;
border-radius: 2px;
overflow: hidden;
border: 2px solid #ccc;
position: absolute;
top: 50%;
transition: 800ms ease-in-out;
}

.box img {
width: 100%;
height: 100%;
}

.box:first-of-type {
z-index: 5;
opacity: 1;
left: 0%;
transform: translate(-250%, -250%) rotateZ(-2600deg);
}

.box:nth-of-type(2) {
opacity: 1;
left: 5%;
transform: translate(-50%, -50%) rotateY(-8deg)translateZ(-20px);
z-index: 5;

}
.box:nth-of-type(3) {
left: 10%;
opacity: 0.9;
color: #eee;
z-index: 10;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-40px);
}

.box:nth-of-type(4) {
z-index: 5;
opacity: 0.8;
left:15%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-60px);
}
.box:nth-of-type(5) {
z-index: 2;
opacity: 0.7;
left: 20%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-80px);
}

.box:nth-of-type(6) {
z-index: 2;
opacity: 0.6;
left: 25%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-100px);
}
.box:nth-of-type(7) {
z-index: 2;
opacity: 0.5;
left: 30%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-120px);
}
.box:nth-of-type(8) {
z-index: 2;
opacity: 0.4;
left: 35%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-140px);
}
      #lyrics-container {
             position: absolute;
            width: 80%;
            height: 50%;left:0%;
            top: 62%;
      }
      

      .lyric-line {
            position: absolute;
            white-space: nowrap;
            opacity: 0;
            transform: scale(0.1);
            transition: transform 3s, opacity 0.8s, color 4s;
            text-align: center;
         
            
            left:10%;
            top: 20%;
            z-index: 10;
            font: 50 30px '华文隶书', sans-serif;
            margin-left: -200px;
            margin-top: -40px;   
filter: drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);
      
      
         
      }
      
      #audio-controls {
            position: fixed;
            bottom: 20px;
            z-index: 100;
            display: none;
      }
      
      #spectrum-container {
            position: absolute;
            width: 1100px;
            height: 640px;
            top: 40px;
            left: 50px;
            pointer-events: none;
            z-index: 5;
      }
      
      .butterfly {
            position: absolute;
            width: 30px;
            height: 30px;
            background-size: contain;
            background-repeat: no-repeat;
            transform-origin: center;
            transition: transform 0.1s;
      }
      
      
      #progress-container {
            position: absolute;
            left: 551px;
            top: 41px;
            transform: translateX(-50%);
            width: 120px;
            height: 120px;
            z-index: 100;
      }
      
      #progress-circle {
            fill: transparent;
            stroke: #880000;
            stroke-width: 5;
            stroke-dasharray: 339.6;
            stroke-dashoffset: 339.6;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            transition: stroke-dashoffset 0.1s linear;
      }
      
      #progress-bg {
            fill: transparent;
            stroke: rgba(255,255,255,0.2);
            stroke-width: 5;
      }
      
      #rotating-image {
            position: absolute;
            left: 500px;
            top: 50px;
            width: 102px;
            height: 102px;
            border-radius: 50%;
            object-fit: cover;
            z-index: 101;
            transform-origin: center;
            transition: transform 0.1s linear;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }
      
      #rotating-image.playing {
            animation: pulse 1.5s infinite;
      }
      
      @keyframes pulse {
            0% { box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); }
            50% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.9); }
            100% { box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); }
      }
   

</style>
<divid="papa">
<div class="img-container">
      <div class="box">
      <img
          src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic1.imgdb.cn/item/6732a9fed29ded1a8cf93f09.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic1.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic1.imgdb.cn/item/6600e7829f345e8d03a9a674.jpg"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic1.imgdb.cn/item/6716290ed29ded1a8c299351.jpg"
          alt=""
      />
      </div>
<div class="box">
      <img
          src="https://pic1.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg"
          alt=""
      />
      </div>
<div class="box">
      <img
          src="https://pic1.imgdb.cn/item/66c6d1c4d9c307b7e97d6802.jpg"
          alt=""
      />
      </div>

    </div>

    <div id="lyrics-container"></div>
    <div id="spectrum-container"></div>
   
    <div id="audio-controls">
      <audio id="audio-player" crossOrigin="anonymous"controls>
            <source src="https://s2.cldisk.com/sv-w8/audio/13/61/13/7896e12072b0afc89159099d2c2ba2eb/audio.mp3" type="audio/mpeg">
         </audio>
    </div>
   
    <img id="rotating-image" src="https://pic1.imgdb.cn/item/690c41ba3203f7be00db7fed.png" width="102" height="102">
   
    <!-- 圆形进度条 -->
    <div id="progress-container">
      <svg width="120" height="120" viewBox="0 0 120 120">
            <circle id="progress-bg" cx="60" cy="60" r="54" />
            <circle id="progress-circle" cx="60" cy="60" r="54" />
      </svg>
    </div>
</div>
<script>

const imgContainer = document.querySelector(".img-container");
const box = document.querySelector(".box");
setInterval(() => {if(!audioPlayer.paused){
      let last = imgContainer.firstElementChild;
      last.remove();
      imgContainer.appendChild(last);
   } }, 2500);


//尽量使用标准LRC格式歌词
const lrcLyrics = `微光
词曲：生命树下
演唱：生命树下
夜太长风太凉
我在寂静里数着过往
多少次想要遗忘
却被一束光温柔收藏
我曾走过荒芜的街
梦与现实都渐渐搁浅
就在最黑的那一夜
有个声音轻轻唤我别灰暗
你是那道微光照进我心房
在破碎里生出新的盼望
纵然泪还未干
我已能微笑着原谅
你说别怕风会停下
你说痛过才懂爱多深啊
原来重生不是奇迹
而是心被拥抱的那一刹
你是微光穿越我荒凉
指引我走出所有迷惘
当世界变得无声无光
你仍在我心底柔软又明亮
你说别怕风会停下
你说痛过才懂爱多深啊
原来重生不是奇迹
而是心被拥抱的那一刹
你是微光穿越我荒凉
指引我走出所有迷惘
当世界变得无声无光
你仍在我心底柔软又明亮
有你在的地方
黑夜也成了远方
我拾起碎片化作歌唱
将泪水酿成希望
`;


const colors = [
    '#FF1493', '#FF69B4', '#FF6347', '#FFA500',
    '#FFD700', '#90EE90', '#00FA9A', '#00FF7F',
    '#7CFC00', '#ADFF2F', '#32CD32', '#00FF00',
    '#FF00FF', '#DA70D6', '#BA55D3', '#9370DB',
    '#FF4500', '#FF8C00', '#FFD700', '#FF0000'
];

// 解析LRC歌词
function parseLRC(lrcText) {
    const lines = lrcText.split('\n');
    const result = [];
   
    for (const line of lines) {
      // 匹配时间标签
      const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\]/);
      if (!timeMatch) continue;
      
      const minutes = parseFloat(timeMatch);
      const seconds = parseFloat(timeMatch);
      const hundredths = parseFloat(timeMatch) / 100;
      const time = minutes * 60 + seconds + hundredths;
      
      // 获取歌词文本
      const text = line.replace(timeMatch, '').trim();
      if (text) {
            result.push({ time, text });
      }
    }
   
    return result;
}

const lyrics = parseLRC(lrcLyrics);

const container = document.getElementById('lyrics-container');
const spectrumContainer = document.getElementById('spectrum-container');
const audioPlayer = document.getElementById('audio-player');
const rotatingImage = document.getElementById('rotating-image');
const progressCircle = document.getElementById('progress-circle');
let currentLineIndex = 0;
let lyricElements = [];
let hasPlayedOnce = false;
let audioContext;
let analyser;
let dataArray;
let butterflies = [];
let animationId;
let progressInterval;
let rotationAngle = 0;
let rotationInterval;
let isPlaying = false;

// 创建蝴蝶频谱
function createButterflies() {
   
    const butterflySVG = `
    <svg viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
            <path d="M 0 0 L 0 0 Q 0 -215 20 -120 L 0 0 M 0 0 L 0 0 Q 66.439 -204.477 56.103 -107.946 L 0 0 M 0 0 L 0 0 Q 126.374 -173.939 86.715 -85.326 L 0 0 M 0 0 L 0 0 Q 173.939 -126.374 108.838 -54.354 L 0 0 M 0 0 L 0 0 Q 204.477 -66.439 120.307 -18.061 L 0 0 M 0 0 L 0 0 Q 215 0 120 20 L 0 0 M 0 0 L 0 0 Q 204.477 66.439 107.946 56.103 L 0 0 M 0 0 L 0 0 Q 173.939 126.374 85.326 86.715 L 0 0 M 0 0 L 0 0 Q 126.374 173.939 54.354 108.838 L 0 0 M 0 0 L 0 0 Q 66.439 204.477 18.061 120.307 L 0 0 M 0 0 L 0 0 Q 0 215 -20 120 L 0 0 M 0 0 L 0 0 Q -66.439 204.477 -56.103 107.946 L 0 0 M 0 0 L 0 0 Q -126.374 173.939 -86.715 85.326 L 0 0 M 0 0 L 0 0 Q -173.939 126.374 -108.838 54.354 L 0 0 M 0 0 L 0 0 Q -204.477 66.439 -120.307 18.061 L 0 0 M 0 0 L 0 0 Q -215 0 -120 -20 L 0 0 M 0 0 L 0 0 Q -204.477 -66.439 -107.946 -56.103 L 0 0 M 0 0 L 0 0 Q -173.939 -126.374 -85.326 -86.715 L 0 0 M 0 0 L 0 0 Q -126.374 -173.939 -54.354 -108.838 L 0 0 M 0 0 L 0 0 Q -66.439 -204.477 -18.061 -120.307 L 0 0 Z" fill="#ff0000"/>
            
      </svg>
    `;
    for (let i = 0; i < 20; i++) {
      const butterfly = document.createElement('div');
      butterfly.className = 'butterfly';
      butterfly.style.backgroundImage = `url("data:image/svg+xml;utf8,${encodeURIComponent(butterflySVG)}")`;
      butterfly.style.left = `${Math.random() * 100}%`;
      butterfly.style.top = `${Math.random() * 100}%`;
      butterfly.style.opacity = '0.7';
      butterfly.style.transform = `scale(${0.5 + Math.random() * 0.5}) rotate(${Math.random() * 360}deg)`;
      spectrumContainer.appendChild(butterfly);
      butterflies.push({
            element: butterfly,
            x: Math.random(),
            y: Math.random(),
            speed: 0.1 + Math.random() * 0.2,
            angle: Math.random() * Math.PI * 2,
            size: 0.5 + Math.random() * 0.5,
            baseSize: 0.5 + Math.random() * 0.5,
            targetX: Math.random(),
            targetY: Math.random(),
            targetSize: 0.5 + Math.random() * 0.5,
            frequencyBand: Math.floor(Math.random() * 32)
      });
    }
}

// 初始化音频分析器
function initAudioAnalyzer() {
    try {
       audioContext = new (window.AudioContext || window.webkitAudioContext)();
       const source = audioContext.createMediaElementSource(audioPlayer);
       analyser = audioContext.createAnalyser();
       analyser.fftSize = 64;
       source.connect(analyser);
       analyser.connect(audioContext.destination);
       dataArray = new Uint8Array(analyser.frequencyBinCount);
       console.log('音频分析器初始化成功');
       if (!animationId) {
            updateButterflies();
      }
    } catch (e) {
      console.error('音频分析器初始化失败:', e);
    }
}

// 更新动画
function updateButterflies() {
    if (!analyser) {
      animationId = requestAnimationFrame(updateButterflies);
      return;
    }
    analyser.getByteFrequencyData(dataArray);
   
   
    let volume = 0;
    for (let i = 0; i < dataArray.length; i++) {
      volume += dataArray;
    }
    volume = volume / dataArray.length / 100;
    butterflies.forEach((butterfly, index) => {
      const intensity = dataArray / 100;
      butterfly.targetSize = butterfly.baseSize * (1 + intensity * 1.2 + volume * 0.3);
      butterfly.size += (butterfly.targetSize - butterfly.size) * 0.05;
      if (Math.random() < 0.005 || intensity > 0.5) {
            butterfly.angle = Math.random() * Math.PI * 2;
      }
      const moveIntensity = 0.003 * butterfly.speed * (1 + intensity * 1.5 + volume * 0.3);
      butterfly.x += Math.cos(butterfly.angle) * moveIntensity;
      butterfly.y += Math.sin(butterfly.angle) * moveIntensity;
      
      
      if (butterfly.x < 0) {
            butterfly.x = 1;
            butterfly.angle = Math.random() * Math.PI * 2;
      }
      if (butterfly.x > 1) {
            butterfly.x = 0;
            butterfly.angle = Math.random() * Math.PI * 2;
      }
      if (butterfly.y < 0) {
            butterfly.y = 1;
            butterfly.angle = Math.random() * Math.PI * 2;
      }
      if (butterfly.y > 1) {
            butterfly.y = 0;
            butterfly.angle = Math.random() * Math.PI * 2;
      }
      butterfly.element.style.left = `${butterfly.x * 100}%`;
      butterfly.element.style.top = `${butterfly.y * 100}%`;
      const rotation = (butterfly.angle * 180 / Math.PI) + (intensity * 60) + (index % 2 === 0 ? 1 : -1) * (volume * 65);
      butterfly.element.style.transform = `scale(${butterfly.size}) rotate(${rotation}deg)`;
      butterfly.element.style.opacity = `${0.5 + intensity * 0.4}`;
      const hue = (index * 15 + Date.now() * 0.0005 * (1 + volume)) % 360;
      butterfly.element.style.filter = `hue-rotate(${hue}deg) saturate(${1 + volume * 1.5})`;
    });
   
    animationId = requestAnimationFrame(updateButterflies);
}

// 预创建所有歌词元素
function createLyricElements() {
    lyrics.forEach((line, index) => {
      const element = document.createElement('div');
      element.className = 'lyric-line';
      element.textContent = line.text;
      element.style.color = colors;
      
      
      element.style.left = '66%';
      element.style.top = '53%';
      element.style.marginLeft = '-200px';
      element.style.marginTop = '-50px';   
      
      container.appendChild(element);
      lyricElements.push(element);
    });
}

// 显示歌词行
function showLyricLine(index) {
    if (index >= lyricElements.length) return;
   
    const element = lyricElements;
   
   
    element.style.transform = 'scale(0.1)';
    element.style.opacity = '0';
   
   
    setTimeout(() => {
      element.style.transition = 'transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s, color 2s';
      element.style.transform = 'scale(1.5)';
      element.style.opacity = '1'
      let colorIndex = index % colors.length;
      const colorChangeInterval = setInterval(() => {
            colorIndex = (colorIndex + 1) % colors.length;
            element.style.color = colors;
      }, 2000);
      setTimeout(() => {
            element.style.transition = 'transform 3s, opacity 5s';
            element.style.transform = 'scale(1) translatex(0px)';
            element.style.opacity = '0';
            clearInterval(colorChangeInterval);
            setTimeout(() => {
                element.style.transition = 'none';
            }, 1000);
      }, 3000);
    }, 100);
}

// 重置歌词状态
function resetLyrics() {
    currentLineIndex = 0;
    lyricElements.forEach(el => {
      el.style.opacity = '0';
      el.style.transform = 'scale(0.1)';
      el.style.transition = 'none';
    });
}

// 更新歌词
function updateLyrics() {
    const currentTime = audioPlayer.currentTime;
    if (currentLineIndex < lyrics.length && currentTime >= lyrics.time) {
      showLyricLine(currentLineIndex);
      currentLineIndex++;
    }
    if (currentTime < lyrics.time && currentLineIndex > 0) {
      resetLyrics();
    }
}

// 更新进度条
function updateProgress() {
    const progress = (audioPlayer.currentTime / audioPlayer.duration) || 0;
    const circumference = 339.6; // 2πr (r=54) 放大20%
    const offset = circumference - (progress * circumference);
    progressCircle.style.strokeDashoffset = offset;
}

// 旋转图片
function rotateImage() {
    if (isPlaying) {
      rotationAngle += 0.5;
      rotatingImage.style.transform = `rotate(${rotationAngle}deg)`;
    }
}
function startAllAnimations() {
    isPlaying = true;
    rotatingImage.classList.add('playing');
    progressInterval = setInterval(updateProgress, 100);
    rotationInterval = setInterval(rotateImage, 20);
}

function stopAllAnimations() {
    isPlaying = false;
    clearInterval(progressInterval);
    clearInterval(rotationInterval);
    rotatingImage.classList.remove('playing');
}

// 初始化函数
function init() {
    createLyricElements();
    createButterflies();
    const togglePlayback = () => {
      if (audioPlayer.paused) {
            if (!audioContext) {
                initAudioAnalyzer();
            }
            
            audioPlayer.play().then(() => {
                startAllAnimations();
                hasPlayedOnce = true;
            }).catch(e => {
                console.log('播放失败:', e);
            });
      } else {
            audioPlayer.pause();
            stopAllAnimations();
      }
    };
   
    // 旋转图片点击事件
    rotatingImage.addEventListener('click', togglePlayback);
   
    audioPlayer.addEventListener('timeupdate', updateLyrics);
   
    audioPlayer.addEventListener('ended', function() {
      resetLyrics();
      stopAllAnimations();
    });
    audioPlayer.addEventListener('pause', function() {
      stopAllAnimations();
    });
   
    // 播放时恢复动画
    audioPlayer.addEventListener('play', function() {
      startAllAnimations();
      if (!animationId) {
            updateButterflies();
      }
      if (!analyser) {
            initAudioAnalyzer();
      }
    });
   
    // 尝试自动播放
    const tryAutoPlay = () => {
      if (!hasPlayedOnce) {
            togglePlayback();
      }
    };
   
    // 页面加载后尝试自动播放
    tryAutoPlay();
   
    // 如果自动播放失败，在用户点击时再次尝试
    document.addEventListener('click', tryAutoPlay);
}

// 启动应用
window.addEventListener('load', init);


let timeline = new TimelineMax({
repeat: -1,
yoyo: true }),

feTurb = document.querySelector('#feturbulence');

timeline.add(
TweenMax.to(feTurb, 15, {
onUpdate: function () {
    let bfX = this.progress() * 0.005 + 0.015, //base frequency x
    bfY = this.progress() * 0.05 + 0.1; //base frequency y
    feTurb.setAttribute('baseFrequency', `${bfX} ${bfY}`);
} }),
0);
</script>

小辣椒 发表于 2025-11-20 23:02

欣赏亚纶的特效代码制作，漂亮！{:4_199:}

小辣椒 发表于 2025-11-20 23:04

只是我的网卡，好久才看见，估计代码太多了

小辣椒 发表于 2025-11-20 23:04

可以一键停止，亚纶特棒！

偶然~ 发表于 2025-11-21 00:27

音画太棒了！

偶然~ 发表于 2025-11-21 00:27

音画唯美

偶然~ 发表于 2025-11-21 00:27

背景歌声动听

偶然~ 发表于 2025-11-21 00:28

制作大气

偶然~ 发表于 2025-11-21 00:28

音画合一，歌曲与画面结合完美

偶然~ 发表于 2025-11-21 00:28

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-11-21 00:28

感谢亚伦影音工作室带来的精彩，辛苦了！祝你开心幸福、阖家安康！

杨帆 发表于 2025-11-21 13:47

漂亮~谢谢亚伦老师精彩分享{:4_191:}

小文 发表于 2025-11-21 13:56

喜欢，静静地听……

老谟深虑 发表于 2025-11-23 18:59

         欣赏老师的新作，点赞！

查看完整版本: 微光